@import url('/fonts/index.css');
body {
    margin:0;
    width:100vw;
    height:100vh;
    background-color: rgb(229,229,234);
    display:flex;
    align-items: center;
    justify-content: center;
    font-family: sfprodisplaylight;
}
.content{
    width:450pt;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(22.5pt);
}
.content > img {
    width:80pt;
    height:80pt;
    border-radius: 150pt;
    object-fit: contain;
    padding: 50pt;
    overflow-clip-margin: padding-box;
    background-color: rgb(0,122,255);
}
.cards {
    display: flex;
    flex-direction: column;
    gap:10pt;
    width:350pt;
    transform: translateY(-45pt);
}
.cards > div:nth-child(1){
    width:calc(100% - 40pt);
    background-color: white;
    border-radius: 20pt;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding:10pt 20pt;
}
.cards > div:nth-child(1) > span:nth-child(1){
    font-size: 40pt;
    color:rgb(0,122,255);
    font-family: sfprodisplaybold;
}
.cards > div:nth-child(1) > span:nth-child(2), .cards > div:nth-child(1) > span:nth-child(3){
    font-size: 15pt;
    font-family: sfprodisplaylight;
}
.nav{
    display: flex;
    gap:10pt;
    width:100%;
}
.nav > a {
    user-select: none;
    -webkit-user-select: none;
    width:calc(calc(100% - 20pt) / 3);
    background-color: white;
    border-radius: 10pt;
    padding:10pt;
    font-family: sfprodisplaylight;
    display:flex;
    gap:4pt;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 300ms;
    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(../aboutme-w.svg);
}
.nav > a > img {
    width:14pt;
    height:14pt;
    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(../aboutme.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;
        text-decoration: none;
    }
    .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(../aboutme-w.svg);
    }
}