@import url('/fonts/index.css');
body {
    margin:0;
    width:calc(100vw - 20pt);
    height:100vh;
    background-color: rgb(229,229,234);
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 0pt 10pt;
    font-family: sfprodisplaylight;
}
.content{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(17.5pt);
}
.content > img {
    width:200pt;
    height:200pt;
    border-radius: 100pt;
    object-fit: cover;
    object-position:0pt -80pt;
    overflow-clip-margin: padding-box;
    /*filter: grayscale(1) contrast(1.3);*/
}
.cards {
    display: flex;
    flex-direction: column;
    gap:5pt;
    width:100%;
    transform: translateY(-35pt);
}
.cards > div:nth-child(1){
    width:calc(100% - 40pt);
    background-color: white;
    border-radius: 10pt;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:10pt 20pt;
    text-align: center;
}
.cards > div:nth-child(1) > span:nth-child(1){
    font-size: 30pt;
    color:rgb(0,122,255);
    font-family: sfprodisplaybold;
}
.cards > div:nth-child(1) > span:nth-child(2){
    font-size: 12pt;
    font-family: sfprodisplaylight;
}
.nav{
    display: flex;
    gap:5pt;
    width:100%;
}
.nav > a {
    width:calc(calc(100% - 10pt) / 3);
    font-size: 12pt;
    background-color: white;
    border-radius: 8pt;
    padding:8pt;
    font-family: sfprodisplaylight;
    display:flex;
    gap:4pt;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color:unset;
}
.nav > a:hover {
    background-color: rgb(0,122,255);
    color:white;
}
.nav > a:nth-child(1):hover > img {
    content: url(../home-w.svg);
}
.nav > a:nth-child(2):hover > img {
    content: url(../education-w.svg);
}
.nav > a:nth-child(3):hover > img {
    content: url(../portfolio-w.svg);
}
.nav > a > img {
    width:12pt;
    height:12pt;
    object-fit: contain;
}
.nav > a:nth-child(1) > img{
    content: url(../home.svg);
}
.nav > a:nth-child(2) > img{
    content: url(../education.svg);
}
.nav > a:nth-child(3) > img{
    content: url(../portfolio.svg);
}
@media (prefers-color-scheme: dark) {
    body {
        color:white;
        background-color: rgb(12,12,14);
    }
    .cards > div:nth-child(1){
        background-color: rgb(28,28,30);
    }
    .cards > div:nth-child(1) > span:nth-child(2){
        color:white;
    }
    .nav > a {
        background-color: rgb(28,28,30);
        color: white;
    }
    .nav > a:nth-child(1) > img{
        content: url(../home-w.svg);
    }
    .nav > a:nth-child(2) > img{
        content: url(../education-w.svg);
    }
    .nav > a:nth-child(3) > img{
        content: url(../portfolio-w.svg);
    }
}