html{
    height: 100%;
    color: #222;
    scroll-behavior: smooth;
    background-color: #efefef;
    scrollbar-track-color: #efefef;
}
body{
    margin: 0;
    padding: 0;
    height: fit-content;
    box-sizing: border-box;
}
header{font-family: 'JetBrains Mono',monospace;}
p{
    margin: 0;
    padding: 0;
    color: #222;
    width: max-content;
    position: absolute;
    transform: translate(-50%,-50%);
}
.Subtitle{
    padding: .5% 1%;
    color: #000;
    background-color: #f9f9f9;
    border: 1px solid #222;
    border-radius: .5rem;
}
.Bio{
    height: max-content;
    position: absolute;
    transform: translate(-50%,-50%);
    text-align: center;
}
.Divison{
    width: 100%;
    height: 100vh;
    position: relative;
    font-family: 'JetBrains Mono', monospace;
}
footer{
    width: 100%;
    height: 60vh;
    color: #000;
    position: relative;
    font-family: 'Inter', Helvetica;
    border-top: 2px dashed #00000080;
}
.Footer-CTA{
    top: 25%;
    left: 50%;
    font-size: 2rem;
    font-weight: 500;
}
.Footer-A{
    text-decoration: none;
    color: #f9f9f9;
    background-color: #000000;
    position: absolute;
    transform: translate(-50%,-50%);
}
.Footer-A:hover{box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.Footer-Text{
    bottom: 2%;
    font-size: .8rem;
    text-align: center;
    position: absolute;
}
@media (max-width: 1440px) {
    .Subtitle{
        padding: .5% 1%;
        border-radius: .5rem;
    }
    .Bio{
        top: 5%;
        left: 50%;
        width: 60vw;
    }
    #Insights{
        top: 30%;
        left: 10%;
    }
    #Projects{
        top: 5%;
        left: 12.5%;
    }
    .Footer-A{
        top: 45%;
        left: 50%;
        padding: 1% 2%;
        border-radius: .5rem;
    }
    #Year{left: 5%;}
    #Thanks{left: 50%;}
    #Rights{right: 0%;}
}
@media (max-width: 768px) {
    .Subtitle{
        padding: 1% 2%;
    }
    .Bio{
        top: 5%;
        width: 85vw;
        font-size: 1rem;
    }
    #Insights{
        top: 35%;
    }
    #Projects{
        top: 5%;
        left: 25.5%;
    }
    .Footer-CTA{
        font-size: 2rem;
    }
    .Footer-A{
        top: 50%;
        padding: 2% 4%;
        font-size: 1rem;
    }
    #Rights{
        left: 85%;
    }
}
@media (max-width: 480px) {
    .Subtitle{
        padding:  2% 4%;
    }
    .Bio{
        top: 5%;
        width: 95vw;
        font-size: .8rem;
    }
    #Insights{
        top: 35%;
    }
    #Projects{
        top: 5%;
        left: 30%;
    }
    .Footer-CTA{
        font-size: 1rem;
    }
    .Footer-A{
        padding: 5% 10%;
        font-size: .8rem;
    }
    #Year{
        left: 8%;
    }
    #Rights{
        left: 80%;
    }
    #Thanks{
        visibility: hidden;
    }
}
@media (min-width: 1441px) and (max-width: 2560px) {
    .Icon{
        height: 2.5rem;
        vertical-align: middle;
    }
    .Bio{
        left: 50%;
        top: 5%;
    }
    .Subtitle{
        padding: .5% 1%;
        font-size: 1.5rem;
        border-radius: .8rem;
    }

    #Projects{
        left: 12.5%;
        top: 20%;
    }
    .Footer-CTA{
        font-size: 3rem;
    }
    .Footer-A{
        left: 50%;
        top: 50%;
        padding: 1.5% 3%;
        font-size: 1.5rem;
        border-radius: .9rem;
    }
    .Footer-Text{
        bottom: 2%;
    }
    #Year{
        left: 5%;
    }
    #Thanks{
        left: 50%;
    }
    #Rights{
        right: 0%;
    }
}