@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url('../assets/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #fff;
    font-size: 1.5em;
    line-height: 1.4;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(0.5em);
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.card {
    width: 90vw;
    max-width: 30em;
    padding: 1.6em;
    text-align: left;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 0.6em;
    backdrop-filter: blur(1em);
}

.profile-photo {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    margin: 0 auto;
    border: 2px solid #00d1ff;
    display: inline-block;
    margin-right: 1em;
}

h1 {
    font-size: 1.6em;
    font-weight: 400;
    margin: 0 auto;
    color: #00d1ff;
    display: inline-block;
    vertical-align: top;
}

.menu {
    margin-bottom: 20px;
}

.menu a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9em;
    padding: 3px 10px;
    margin-right: 5px;
    border-radius: 15px;
    transition: background-color 0.3s;
}

.menu a.active {
    background-color: #00d1ff;
    color: #000;
}

.content {
    display: none;
    margin-top: 1em;
}

.content.active {
    display: block;
}

p {
    color: #e0e0e0;
}

ul {
    list-style: none;
}

ul li {
    margin: 8px 0;
}

ul li:before {
    content: "› ";
    color: #00d1ff;
}

.links a {
    color: #00d1ff;
    text-decoration: none;
    margin-right: 15px;
    transition: opacity 0.3s;
}

.links a:hover {
    opacity: 0.7;
}

.profile-info {
    display: inline-block;
    vertical-align: top;
}

.contact-info {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.icon {
    width: 2em;
    height: 2em;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.icon-email {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9Ikljb25zIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDp1cmwoI2xpbmVhci1ncmFkaWVudCk7fS5jbHMtMntmaWxsOiNlZDk2MGE7fTwvc3R5bGU+PGxpbmVhckdyYWRpZW50IGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iMTIiIHgyPSIxMiIgeTE9IjMiIHkyPSIyMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmNjUwIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZhYjE3Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiBoZWlnaHQ9IjE4IiByeD0iMyIgd2lkdGg9IjIyIiB4PSIxIiB5PSIzIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTUuNzE3LDEyLjAyOWwzLjk1Ni0zLjZhMSwxLDAsMCwwLTEuMzQ2LTEuNDhMMTMuMzUsMTEuNDc5YTIuMDA1LDIuMDA1LDAsMCwxLTIuNywwTDUuNjczLDYuOTVBMSwxLDAsMSwwLDQuMzI3LDguNDNsMy45NTcsMy42TDQuMzI4LDE1LjYyQTEsMSwwLDEsMCw1LjY3MiwxNy4xbDQuMTQzLTMuNzZhMy45MzcsMy45MzcsMCwwLDAsNC4zNywwbDQuMTQzLDMuNzZhMSwxLDAsMSwwLDEuMzQ0LTEuNDhaIi8+PC9zdmc+");
}

.icon-github {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDcyIDcyIiB3aWR0aD0iNzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNOCw3MiBMNjQsNzIgQzY4LjQxODI3OCw3MiA3Miw2OC40MTgyNzggNzIsNjQgTDcyLDggQzcyLDMuNTgxNzIyIDY4LjQxODI3OCwtOC4xMTYyNDUwMWUtMTYgNjQsMCBMOCwwIEMzLjU4MTcyMiw4LjExNjI0NTAxZS0xNiAtNS40MTA4MzAwMWUtMTYsMy41ODE3MjIgMCw4IEwwLDY0IEM1LjQxMDgzMDAxZS0xNiw2OC40MTgyNzggMy41ODE3MjIsNzIgOCw3MiBaIiBmaWxsPSIjM0U3NUMzIi8+PHBhdGggZD0iTTM1Ljk5ODUsMTIgQzIyLjc0NiwxMiAxMiwyMi43ODcwOTIxIDEyLDM2LjA5NjY0NCBDMTIsNDYuNzQwNjcxMiAxOC44NzYsNTUuNzcxODMwMSAyOC40MTQ1LDU4Ljk1ODQxMjEgQzI5LjYxNDUsNTkuMTc5Nzg2MiAzMC4wNTI1LDU4LjQzNTg0ODggMzAuMDUyNSw1Ny43OTczMjc2IEMzMC4wNTI1LDU3LjIyNTA2ODEgMzAuMDMxNSw1NS43MTAwODYzIDMwLjAxOTUsNTMuNjk5NjQ4MiBDMjMuMzQzLDU1LjE1NTg5ODEgMjEuOTM0NSw1MC40NjkzOTM4IDIxLjkzNDUsNTAuNDY5MzkzOCBDMjAuODQ0LDQ3LjY4NjQwNTQgMTkuMjcwNSw0Ni45NDU0Nzk5IDE5LjI3MDUsNDYuOTQ1NDc5OSBDMTcuMDkxLDQ1LjQ1MDA3NTQgMTkuNDM1NSw0NS40ODAxOTQzIDE5LjQzNTUsNDUuNDgwMTk0MyBDMjEuODQzLDQ1LjY1MDM2NjIgMjMuMTEwNSw0Ny45NjM0OTk0IDIzLjExMDUsNDcuOTYzNDk5NCBDMjUuMjUyNSw1MS42NDU1Mzc3IDI4LjcyOCw1MC41ODIzMzk4IDMwLjA5Niw0OS45NjQ5MDE4IEMzMC4zMTM1LDQ4LjQwNzc1MzUgMzAuOTM0NSw0Ny4zNDYwNjE1IDMxLjYyLDQ2Ljc0MzY4MzEgQzI2LjI5MDUsNDYuMTM1MjgwOCAyMC42ODgsNDQuMDY5MTIyOCAyMC42ODgsMzQuODM2MTY3MSBDMjAuNjg4LDMyLjIwNTI3OTIgMjEuNjIyNSwzMC4wNTQ3ODgxIDIzLjE1ODUsMjguMzY5NjM0NCBDMjIuOTExLDI3Ljc1OTcyNjIgMjIuMDg3NSwyNS4zMTEwNTc4IDIzLjM5MjUsMjEuOTkzNDU4NSBDMjMuMzkyNSwyMS45OTM0NTg1IDI1LjQwODUsMjEuMzQ1OTAxNyAyOS45OTI1LDI0LjQ2MzIxMDEgQzMxLjkwOCwyMy45Mjg1OTkzIDMzLjk2LDIzLjY2MjA0NjggMzYuMDAxNSwyMy42NTE1MDUyIEMzOC4wNCwyMy42NjIwNDY4IDQwLjA5MzUsMjMuOTI4NTk5MyA0Mi4wMTA1LDI0LjQ2MzIxMDEgQzQ2LjU5MTUsMjEuMzQ1OTAxNyA0OC42MDMsMjEuOTkzNDU4NSA0OC42MDMsMjEuOTkzNDU4NSBDNDkuOTEyNSwyNS4zMTEwNTc4IDQ5LjA4OSwyNy43NTk3MjYyIDQ4Ljg0MTUsMjguMzY5NjM0NCBDNTAuMzgwNSwzMC4wNTQ3ODgxIDUxLjMwOSwzMi4yMDUyNzkyIDUxLjMwOSwzNC44MzYxNjcxIEM1MS4zMDksNDQuMDkxNzExOSA0NS42OTc1LDQ2LjEyOTI1NzEgNDAuMzUxNSw0Ni43MjU2MTE3IEM0MS4yMTI1LDQ3LjQ2OTU0OTEgNDEuOTgwNSw0OC45MzkzNTI1IDQxLjk4MDUsNTEuMTg3NzMwMSBDNDEuOTgwNSw1NC40MDg5NDg5IDQxLjk1MDUsNTcuMDA2NzA1OSA0MS45NTA1LDU3Ljc5NzMyNzYgQzQxLjk1MDUsNTguNDQxODcyNiA0Mi4zODI1LDU5LjE5MTgzMzggNDMuNjAwNSw1OC45NTU0MDAyIEM1My4xMyw1NS43NjI3OTQ0IDYwLDQ2LjczNzY1OTMgNjAsMzYuMDk2NjQ0IEM2MCwyMi43ODcwOTIxIDQ5LjI1NCwxMiAzNS45OTg1LDEyIiBmaWxsPSIjRkZGIi8+PC9nPjwvc3ZnPg==");
}

.icon-whatsapp {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjEwMCUiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJXaGF0c0FwcC1Mb2dvLUljb24iPjxwYXRoIGQ9Ik0xMTYuMjI1LC0wLjAwMWMtMTEuMjY0LDAuNTEyIC0yNi4xMTIsMS41MzYgLTMyLjc2OCwzLjA3MmMtMTAuMjQsMi4wNDggLTE5Ljk2OCw1LjEyIC0yNy42NDgsOS4yMTZjLTkuNzI4LDQuNjA4IC0xNy45MiwxMC43NTIgLTI1LjA4OCwxNy45MmMtNy42OCw3LjY4IC0xMy44MjQsMTUuODcyIC0xOC40MzIsMjUuNmMtNC4wOTYsNy42OCAtNy4xNjgsMTcuNDA4IC05LjIxNiwyNy42NDhjLTEuNTM2LDYuNjU2IC0yLjU2LDIxLjUwNCAtMi41NiwzMi43NjhjLTAuNTEyLDQuNjA4IC0wLjUxMiwxMC43NTIgLTAuNTEyLDEzLjgyNGwwLDI1MS45MDVsMCwxMy44MjRjMC41MTIsMTEuMjY0IDEuNTM2LDI2LjExMiAzLjA3MiwzMi43NjhjMi4wNDgsMTAuMjQgNS4xMiwxOS45NjggOS4yMTYsMjcuNjQ4YzQuNjA4LDkuNzI4IDEwLjc1MiwxNy45MiAxNy45MiwyNS4wODhjNy42OCw3LjY4IDE1Ljg3MiwxMy44MjQgMjUuNiwxOC40MzJjNy42OCw0LjA5NiAxNy40MDgsNy4xNjggMjcuNjQ4LDkuMjE2YzYuNjU2LDEuNTM2IDIxLjUwNCwyLjU2IDMyLjc2OCwyLjU2YzQuNjA4LDAuNTEyIDEwLjc1MiwwLjUxMiAxMy44MjQsMC41MTJsMjUxLjkwNCwwbDEzLjgyNCwwYzExLjI2NCwtMC41MTIgMjYuMTEyLC0xLjUzNiAzMi43NjgsLTMuMDcyYzEwLjI0LC0yLjA0OCAxOS45NjgsLTUuMTIgMjcuNjQ4LC05LjIxNmM5LjcyOCwtNC42MDggMTcuOTIsLTEwLjc1MiAyNS4wODgsLTE3LjkyYzcuNjgsLTcuNjggMTMuODI0LC0xNS44NzIgMTguNDMyLC0yNS42YzQuMDk2LC03LjY4IDcuMTY4LC0xNy40MDggOS4yMTYsLTI3LjY0OGMxLjUzNiwtNi42NTYgMi41NiwtMjEuNTA0IDIuNTYsLTMyLjc2OGMwLjUxMiwtNC42MDggMC41MTIsLTEwLjc1MiAwLjUxMiwtMTMuODI0bDAsLTI2NS43MjljLTAuNTEyLC0xMS4yNjQgLTEuNTM2LC0yNi4xMTIgLTMuMDcyLC0zMi43NjhjLTIuMDQ4LC0xMC4yNCAtNS4xMiwtMTkuOTY4IC05LjIxNiwtMjcuNjQ4Yy00LjYwOCwtOS43MjggLTEwLjc1MiwtMTcuOTIgLTE3LjkyLC0yNS4wODhjLTcuNjgsLTcuNjggLTE1Ljg3MiwtMTMuODI0IC0yNS42LC0xOC40MzJjLTcuNjgsLTQuMDk2IC0xNy40MDgsLTcuMTY4IC0yNy42NDgsLTkuMjE2Yy02LjY1NiwtMS41MzYgLTIxLjUwNCwtMi41NiAtMzIuNzY4LC0yLjU2Yy00LjYwOCwtMC41MTIgLTEwLjc1MiwtMC41MTIgLTEzLjgyNCwtMC41MTJsLTI2NS43MjgsMFoiIHN0eWxlPSJmaWxsOnVybCgjX0xpbmVhcjEpO2ZpbGwtcnVsZTpub256ZXJvOyIvPjxwYXRoIGQ9Ik0zNDQuNzU0LDI4OS42OThjLTQuNTYsLTIuMjgyIC0yNi45OCwtMTMuMzExIC0zMS4xNjEsLTE0LjgzMmMtNC4xOCwtMS41MjEgLTcuMjE5LC0yLjI4MiAtMTAuMjU5LDIuMjgyYy0zLjA0MSw0LjU2NCAtMTEuNzgsMTQuODMyIC0xNC40NCwxNy44NzVjLTIuNjYsMy4wNDIgLTUuMzIsMy40MjMgLTkuODgsMS4xNGMtNC41NjEsLTIuMjgxIC0xOS4yNTQsLTcuMDk1IC0zNi42NzIsLTIyLjYyN2MtMTMuNTU2LC0xMi4wODcgLTIyLjcwOSwtMjcuMDE3IC0yNS4zNjksLTMxLjU4MWMtMi42NiwtNC41NjQgLTAuMjgzLC03LjAzMSAyLC05LjMwNGMyLjA1MSwtMi4wNDEgNC41NiwtNS4zMjQgNi44NCwtNy45ODZjMi4yOCwtMi42NjIgMy4wNCwtNC41NjQgNC41NiwtNy42MDZjMS41MiwtMy4wNDIgMC43NiwtNS43MDUgLTAuMzgsLTcuOTg3Yy0xLjE0LC0yLjI4MiAtMTAuMjYsLTI0LjcyIC0xNC4wNiwtMzMuODQ4Yy0zLjcwMSwtOC44ODkgLTcuNDYxLC03LjY4NiAtMTAuMjYsLTcuODI2Yy0yLjY1NywtMC4xMzIgLTUuNywtMC4xNiAtOC43NCwtMC4xNmMtMy4wNDEsMCAtNy45OCwxLjE0MSAtMTIuMTYxLDUuNzA0Yy00LjE4LDQuNTY0IC0xNS45NiwxNS41OTQgLTE1Ljk2LDM4LjAzMmMwLDIyLjQzOCAxNi4zNCw0NC4xMTYgMTguNjIsNDcuMTU5YzIuMjgxLDMuMDQzIDMyLjE1Nyw0OS4wODkgNzcuOTAyLDY4LjgzNmMxMC44OCw0LjY5NyAxOS4zNzQsNy41MDEgMjUuOTk3LDkuNjAzYzEwLjkyNCwzLjQ2OSAyMC44NjYsMi45OCAyOC43MjMsMS44MDZjOC43NjEsLTEuMzA5IDI2Ljk4LC0xMS4wMjkgMzAuNzgxLC0yMS42NzdjMy43OTksLTEwLjY0OSAzLjc5OSwtMTkuNzc3IDIuNjU5LC0yMS42NzhjLTEuMTM5LC0xLjkwMiAtNC4xNzksLTMuMDQzIC04Ljc0LC01LjMyNW0tODMuMjA3LDExMy41NzNsLTAuMDYxLDBjLTI3LjIyLC0wLjAxMSAtNTMuOTE3LC03LjMyIC03Ny4yMDcsLTIxLjEzN2wtNS41MzksLTMuMjg3bC01Ny40MTMsMTUuMDU2bDE1LjMyNSwtNTUuOTU5bC0zLjYwOCwtNS43MzZjLTE1LjE4NCwtMjQuMTQ1IC0yMy4yMDMsLTUyLjA1MSAtMjMuMTkyLC04MC43MDRjMC4wMzMsLTgzLjYxMSA2OC4wODMsLTE1MS42MzUgMTUxLjc1NiwtMTUxLjYzNWM0MC41MTcsMC4wMTYgNzguNjAzLDE1LjgxMSAxMDcuMjQzLDQ0LjQ3NGMyOC42NCwyOC42NjMgNDQuNDA0LDY2Ljc2NCA0NC4zODksMTA3LjI4M2MtMC4wMzUsODMuNjE3IC02OC4wODMsMTUxLjY0NSAtMTUxLjY5MywxNTEuNjQ1bTEyOS4xMDIsLTI4MC43MDljLTM0LjQ1NywtMzQuNDg2IC04MC4yODEsLTUzLjQ4NyAtMTI5LjEwMywtNTMuNTA3Yy0xMDAuNTk1LDAgLTE4Mi40NjgsODEuODQxIC0xODIuNTA4LDE4Mi40MzdjLTAuMDEzLDMyLjE1NiA4LjM5LDYzLjU0NiAyNC4zNjEsOTEuMjEybC0yNS44OTIsOTQuNTQ1bDk2Ljc1LC0yNS4zN2MyNi42NTcsMTQuNTM1IDU2LjY3LDIyLjE5NCA4Ny4yMTYsMjIuMjA3bDAuMDc1LDBjMTAwLjU4NiwwIDE4Mi40NjUsLTgxLjg1MiAxODIuNTA2LC0xODIuNDQ4YzAuMDE5LC00OC43NTEgLTE4Ljk0NiwtOTQuNTkgLTUzLjQwNSwtMTI5LjA3NiIgc3R5bGU9ImZpbGw6I2ZmZjsiLz48L2c+PGRlZnM+PGxpbmVhckdyYWRpZW50IGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMCwtNTEyLC01MTIsMCwyNTYuMDAxLDUxMikiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBpZD0iX0xpbmVhcjEiIHgxPSIwIiB4Mj0iMSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiMyNWNmNDM7c3RvcC1vcGFjaXR5OjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiM2MWZkN2Q7c3RvcC1vcGFjaXR5OjEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=");
}

@media (max-width: 640px) {
    .card {
        max-width: 20em;
    }

    .menu a {
        display: block;
        margin: 5px 0;
    }
}