<button onclick="toggleTheme()" class="themer">Dark</button>
        <div class="card">
            <h1 class="card-title">Who to follow</h1>
            <span class="divider"></span>
            <div class="profile">
                <div class="profile-pic" style="background-color: pink;"></div>
                <div class="profile-info">
                    <span class="display-name">Riyana Gueco</span>
                    <span class="username">RiyanaGueco</span>
                </div>
                <button class="follow-button followed" onclick="followUnfollow(this)">Unfollow</button>
            </div>
            <span class="divider"></span>
            <div class="profile">
                <div class="profile-pic" style="background-color: palegoldenrod;"></div>
                <div class="profile-info">
                    <span class="display-name">Some Company</span>
                    <span class="username">Nice</span>
                </div>
                <button class="follow-button" onclick="followUnfollow(this)">Follow</button>
            </div>
            <span class="divider"></span>
            <div class="profile">
                <div class="profile-pic" style="background-color: powderblue;"></div>
                <div class="profile-info">
                    <span class="display-name">Short</span>
                    <span class="username">shortdn</span>
                </div>
                <button class="follow-button" onclick="followUnfollow(this)">Follow</button>
            </div>
            <span class="divider"></span>
            <a href="#" class="show-more">Show more</a>
        </div>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
            :root {
                --light-bg: white;
                --light-primary: rgb(247, 249, 250);
                --light-secondary: rgb(240, 242, 243);
                --light-divider: rgb(235, 237, 238);

                --dark-bg: black;
                --dark-primary: #15181c;
                --dark-secondary: #2f3336;
                --dark-divider: #2f3336;

                --highlight-color: #e0245e;

                font-family: 'Roboto', sans-serif;
            }
            * {
                box-sizing: border-box;
            }
            html, body {
                margin: 0;
                height: 100%;
                width: 100%;
            }
            html {
                display: table;
            }
            body {
                background-color: var(--background-color);
                display: table-cell;
                vertical-align: middle;
                width: 100%;
            }
            h1 {
                font-size: 1.3em;
                font-weight: 900;
            }

            .light-theme {
                --background-color: var(--light-bg);
                --primary-bg: var(--light-primary);
                --secondary-bg: var(--light-secondary);
                --divider: var(--light-divider);
            }
            .dark-theme {
                --background-color: var(--dark-bg);
                --primary-bg: var(--dark-primary);
                --secondary-bg: var(--dark-secondary);
                --divider: var(--dark-divider);
                color: white !important;
            }

            .card {
                background-color: var(--primary-bg);
                height: auto;
                width: 360px;
                margin: 0 auto;
                border-radius: 24px;
            }
            .card-title {
                margin: 0;
                padding: 20px 20px 15px 20px;
            }
            .divider {
                display: block;
                width: 100%;
                border-top: 1px solid var(--secondary-bg);
            }
            .profile {
                width: 100%;
                min-width: 100%;
                max-width: 100%;
                padding: 10px 20px;

                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                align-content: stretch;
                justify-items: stretch;
                justify-content: space-between;
            }
            .profile:hover, .show-more:hover {
                background-color: var(--secondary-bg);
            }
            .profile-pic {
                display: block;
                height: 50px;
                width: 50px;
                border-radius: 50%;
            }
            .profile-info {
                padding: 0 10px;
                flex-grow: 1;
            }
            .display-name, .username {
                display: block;
            }
            .display-name {
                font-weight: 700;
            }
            .username {
                color: rgb(155, 153, 153);
            }
            .username::before {
                content: '@';
            }
            .follow-button {
                background-color: inherit;
                border: 1px solid var(--highlight-color);
                border-radius: 16px;
                color: var(--highlight-color);
                padding: 6px 16px;
                outline: none;
                font-weight: 900;
            }
            .followed {
                background-color: var(--highlight-color);
                color: white;
            }
            .show-more {
                border-bottom-left-radius: inherit;
                border-bottom-right-radius: inherit;
                display: block;
                padding: 15px 20px 20px 20px;
                text-decoration: none;
                color: var(--highlight-color);
            }
            .show-more:focus {
                -webkit-tap-highlight-color: transparent;
            }

            .themer {
                background-color: var(--primary-bg);
                color: inherit;
                outline: none;
                border: none;
                border-radius: 8px;
                position: fixed;
                right: 30px;
                top: 30px;
                padding: 8px 10px;
            }

function toggleTheme() {
            let body = document.querySelector('body');
            let button = document.querySelector('.themer');

            if (body.className == 'light-theme') {
                body.className = 'dark-theme';
                button.innerText = 'Light';
            } else {
                body.className = 'light-theme';
                button.innerText = 'Dark';
            }
        }

        function followUnfollow(button) {
            button.classList.toggle("followed");
            if (button.innerText == 'Follow') button.innerText = 'Unfollow'
            else button.innerText = 'Follow'
        }