* {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            a {
                text-decoration: none;
            }
            
            html {
                /*variáveis*/
                --bg-color: #EDF2FF;
                --text-color: #00082F;
                --primary-color: #4263EB;
                --primary-color-dark: #364FC7;
            }
            
            body.dark-blue {
                --bg-color: #00082F;
                --text-color: #FFFFFF;
            }
            
            body.dark-pink {
                --bg-color: #1F000B;
                --text-color: #FFFFFF;
                --primary-color: #D6336C;
                --primary-color-dark: #A61E4D;
            }
            
            body.pink {
                --bg-color: #FFF0F6;
                --text-color: #1F000B;
                --primary-color: #D6336C;
                --primary-color-dark: #A61E4D;
            }
            
            body {
                background: var(--bg-color);
                color: var(--text-color);
                font-family: 'Roboto', sans-serif;
            }
            
            .container {
                text-align: center;
                width: 300px;
                margin: 60px auto;
            }
            
            img {
                width: 100%;
            }
            
            img.avatar {
                border-radius: 50%;
                width: 200px;
                height: 200px;
                padding: 3.7px;
                border: var(--primary-color) solid 4px;
            }
            
            h1 {
                font-size: 26px;
                margin-top: 24px;
                margin-bottom: 8px;
            }
            
            .username {
                font-family: 'Roboto Mono', monospace;
                font-weight: 400;
                opacity: 0.8;
                font-size: 18px;
            }
            
            .ocupation {
                font-family: 'Roboto Mono', monospace;
                font-weight: 400;
                opacity: 0.8;
                font-size: 16px;
            }
            
            ul {
                list-style: none;
                margin: 48px 0;
            }
            
            ul li a {
                height: 53px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--primary-color);
                color: white;
                text-transform: uppercase;
                font-size: 14px;
                margin-bottom: 16px;
                border-radius: 6px;
                transition: background 400ms;
            }
            
            ul li a:hover {
                background: var(--primary-color-dark);
            }
            
            .logos img {
                width: 30px;
                height: 30px;
                margin-right: 3px;
                border-radius: 35px;
            }
            
            footer {
                font-weight: 500;
                font-size: 12px;
                opacity: 0.6;
                transition: opacity 400ms;
            }
            
            footer:hover {
                opacity: 1;
            }
            
            footer a {
                color: var(--text-color);
            }