@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@media only screen and (max-width: 600px){
    #body {
        margin: 0;
        padding: 0;
        font-family: 'Poppins', sans-serif;
        background-color: rgb(37, 35, 35);
        overflow-x: hidden;
        z-index: -1;
    }
    
    #tint {
        filter: brightness(40%);
        position: absolute;
        top: 0;
        background-size: cover;
        z-index: -1;
    }
    
    #frame {
        position: absolute;
        right: 83%;
        top: 0%;
        height: 20vw;
        width: 20vw;
        background-color: #292929;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #headShot {
        height: 4.5vw;
        border-radius: 50%;
    }
    
    #nameBar, #bioBar, #educationBar, #skillsBar, #projectBar, #contactBar {
        background-color: rgb(48, 48, 48);
        margin: 2vw 5%;
        padding: 2vw;
        border-radius: 20px;
    }
    
    #nameBar, #bioBar, #educationBar, #skillsBar, #projectBar, #contactBar {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    #bioTitle, #educationTitle, #skillsTitle, #projectTitle, #emailTitle {
        color: gold;
        font-size: 4vw;
    }
    
    #bioText, #project1Text, #project2Text, #project3Text, #project1Desc, #project2Desc, #project3Desc {
        color: rgb(171, 171, 77);
        font-size: 3vw;
        margin-bottom: 1vw;
    }
    #gitHubTitle, #linkedInTitle{
        color: gold;
    }
    
    #contactBar {
        text-align: center;
    }
    
    #gitHubLink, #linkedInLink, #email {
        font-size: 3vw;
        margin: 1vw 0;
        text-decoration: underline;
    }

    #headShot {
        height: 19.5vw;
    }
    #nameBar {
        position: absolute;
        top: 1vw;
        left: 5vw;
        height: 12vw;
        width: 77vw;
        background-color: rgb(48, 48, 48);
    }
    #name {
        display: flex;
        position: absolute;
        top: 0vw;
        left: 35vw;
        font-size: 6vw;
        color: gold;
    }
    #bioBar{
        margin-top: 30vw;
        padding: 4vw;
    }

    #nameBar, #educationBar, #skillsBar, #projectBar, #contactBar {
        margin: 4vw 5%;
        padding: 4vw;
    }

    #bioTitle, #educationTitle, #skillsTitle, #projectTitle, #gitHubTitle, #linkedInTitle, #emailTitle {
        font-size: 5vw;
    }

    #lukioText, #tavastiaText, #bioText, #project1Text, #project2Text, #project3Text, #project1Desc, #project2Desc, #project3Desc {
        display: flex;
        font-size: 4vw;
        color: gold;
        text-align: center;
        justify-content: center;
    }
    #schoolIcon, #computerIcon, #htmlIcon, #cssIcon, #jsIcon, #pythonIcon, #gitIcon, #tux, #project1Icon {
        font-size: 4vw;
        color: rgb(255, 208, 0);
        text-align: center;
        margin-top: 1vw;
    }
    #gitHubLink, #linkedInLink{
        font-size: 4vw;
        position: relative;
        left: 2vw;
    }
    #htmlText, #cssText, #jsText, #pythonText, #gitText, #linuxText {
        font-size: 4vw;
        color: gold;
    }
    .projectIcon {
        height: 50px;
        width: 50px;
        color: rgb(255, 208, 0);
    }
    .projectbar {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
@media only screen and (min-width: 601px) {    
    #tint{
        position: absolute;
        top: 0;
        margin: 0%;
        width: 100vw;
        height:90vw;
        background-image: url(/imgs/cvbackground.jpg);
        z-index: -1;
    }
    #body{
        margin: 0%;
        width: 100vw;
        height: 90vw;
        background-color: rgb(37, 35, 35);
        font-family: "poppins";
        position: relative; /* Added to fix absolute positioning issues */
        overflow-x: hidden;
    }
    #frame {
        position: absolute;
        left: -7.5vw;
        height: 15vw;
        width: 15vw;
        background-color: #292929;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #headShot{
        display: flex;
        height: 14.5vw;
        border-radius: 50%;
    }
    #name{
        display: flex;
        position: absolute;
        top: 5.5vw;
        left: 20vw;
        font-size: 5vw;
        color: gold;
    }
    #nameBar{
        display: flex;
        position: absolute;
        top: 2.5vw;
        left: 10%;
        height: 15vw;
        display: flex;
        width: 90%;
        background-color: rgb(48, 48, 48);
        position: relative; /* Added to fix absolute positioning issues */
        background-color: rgb(48, 48, 48);
    }
    #bioBar{
        display: flex;
        position: absolute;
        top: 20vw;
        height: 20vw;
        width: 60vw;
        background-color: rgb(48, 48, 48);
    }
    #bioBarEnd{
        display: flex;
        position: absolute;
        right: -10vw;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 20vw;
        width: 20vw;
        z-index: -1;
    }
    #bioTitle{
        display: flex;
        position: absolute;
        top: 0vw;
        left: 2vw;
        color: gold;
        font-size: 2.7vw;
    }
    #bioText{
        display: flex;
        position: absolute;
        top: 3vw;
        left: 2vw;
        color:rgb(171, 171, 77);
        font-size: 1.2vw;
    }
    #educationBar{
        display: flex;
        position: absolute;
        top: 20vw;
        right: 0vw;
        height: 5vw;
        width: 20vw;
        background-color: rgb(48, 48, 48);
    }
    #educationBarEnd{
        display: flex;
        position: absolute;
        left: -5vw;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 5vw;
        width: 5vw;
        z-index: -1;
    }
    #educationTitle{
        display: flex;
        position: absolute;
        top: 0.5vw;
        left: 2vw;
        color: rgb(255, 208, 0);
        font-size: 2.5vw;
    }
    #schoolIcon{
        display: flex;
        position: absolute;
        top: 1.4vw;
        left: -1vw;
        color: rgb(255, 208, 0);
        font-size: 2.5vw;
    }
    #lukioBar{
        display: flex;
        position: absolute;
        top: 6vw;
        right: 0vw;
        height: 4vw;
        width: 18vw;
        background-color: rgb(48, 48, 48);
    }
    #lukioBarEnd{
        display: flex;
        position: absolute;
        left: -4vw;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 4vw;
        width: 4vw;
        z-index: -1;
    }
    #lukioText{
        display: flex;
        position: absolute;
        width: 5vw;
        top: 0.5vw;
        left: 2vw;
        color: gold;
        font-size: 1.2vw;
    }
    #lukioYears{
        display: flex;
        position: absolute;
        top: 1.8vw;
        left: 0vw;
        color: gold;
        font-size: 0.8vw;
    }
    #tavastiaBar{
        display: flex;
        position: absolute;
        top: 11vw;
        right: 0vw;
        height: 8vw;
        width: 18vw;
        background-color: rgb(48, 48, 48);
    }
    #computerIcon{
        display: flex;
        position: absolute;
        top: 2.4vw;
        left: -1vw;
        color: rgb(255, 208, 0);
        font-size: 2.5vw;
    }
    #tavastiaBarEnd{
        display: flex;
        position: absolute;
        left: -4vw;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 8vw;
        width: 8vw;
        z-index: -1;
    }
    #tavastiaText{
        display: flex;
        position: absolute;
        padding-right: 1vw;
        top: 0.5vw;
        left: 2vw;
        color: gold;
        font-size: 1.2vw;
    }
    #tavastiaYears{
        display: flex;
        position: absolute;
        bottom: -1.3vw;
        left: 0vw;
        color: gold;
        font-size: 0.8vw;
    }
    #skillsBar{
        display: flex;
        position: absolute;
        top: 40vw;
        right: 0;
        height: 5vw;
        width: 18vw;
        background-color: rgb(48, 48, 48);
    }
    #skillsBarEnd{
        display: flex;
        position: absolute;
        left: -5vw;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 5vw;
        width: 5vw;
        z-index: -1;
    }
    #skillsTitle{
        display: flex;
        position: absolute;
        top: 0.5vw;
        left: 2.5vw;
        color: rgb(255, 208, 0);
        font-size: 2.5vw;
    }
    #htmlBar{
        display: flex;
        position: absolute;
        top: 6vw;
        right: 0vw;
        height: 4vw;
        width: 9vw;
        background-color: rgb(48, 48, 48);
        color: gold;
    }
    #htmlBarEnd{
        display: flex;
        position: absolute;
        top: -1.4vw;
        left: -4vw;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 4vw;
        width: 4vw;
        z-index: -1;
    }
    #htmlIcon{
        display: flex;
        position: absolute;
        top: 1.5vw;
        left: -2vw;
        color: rgb(255, 208, 0);
        font-size: 1vw;
    }
    #htmlText{
        display: flex;
        position: absolute;
        top: 1.4vw;
    }
    #cssBar{
        display: flex;
        position: absolute;
        top: 11vw;
        right: 0vw;
        height: 4vw;
        width: 9vw;
        background-color: rgb(48, 48, 48);
        color: gold;
    }
    #cssBarEnd{
        display: flex;
        position: absolute;
        top: -1.4vw;
        left: -4vw;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 4vw;
        width: 4vw;
        z-index: -1;
    }
    #cssIcon{
        display: flex;
        position: absolute;
        top: 1.5vw;
        left: -2vw;
        color: rgb(255, 208, 0);
        font-size: 1vw;
    }
    #cssText{
        display: flex;
        position: absolute;
        top: 1.4vw;
    }
    #jsBar{
        display: flex;
        position: absolute;
        top: 16vw;
        right: 0vw;
        height: 4vw;
        width: 9vw;
        background-color: rgb(48, 48, 48);
        color: gold;
    }
    #jsBarEnd{
        display: flex;
        position: absolute;
        top: -1.4vw;
        left: -4vw;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 4vw;
        width: 4vw;
        z-index: -1;
    }
    #jsIcon{
        display: flex;
        position: absolute;
        top: 1.5vw;
        left: -2vw;
        color: rgb(255, 208, 0);
        font-size: 1vw;
    }
    #jsText{
        display: flex;
        position: absolute;
        top: 1.4vw;
    }
    #pythonBar{
        display: flex;
        position: absolute;
        top: 21vw;
        right: 0vw;
        height: 4vw;
        width: 9vw;
        background-color: rgb(48, 48, 48);
        color: gold;
    }
    #pythonBarEnd{
        display: flex;
        position: absolute;
        top: -1.4vw;
        left: -4vw;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 4vw;
        width: 4vw;
        z-index: -1;
    }
    #pythonIcon{
        display: flex;
        position: absolute;
        top: 1.5vw;
        left: -2vw;
        color: rgb(255, 208, 0);
        font-size: 1vw;
        }
    #pythonText{
        display: flex;
        position: absolute;
        top: 1.4vw;
    }
    #gitBar{
        display: flex;
        position: absolute;
        top: 26vw;
        right: 0vw;
        height: 4vw;
        width: 9vw;
        background-color: rgb(48, 48, 48);
        color: gold;
    }
    #gitBarEnd{
        display: flex;
        position: absolute;
        top: -1.4vw;
        left: -4vw;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 4vw;
        width: 4vw;
        z-index: -1;
    }
    #gitText{
        display: flex;
        position: absolute;
        top: 1.4vw;
    }
    #gitIcon{
        display: flex;
        position: absolute;
        top: 1.5vw;
        left: -2vw;
        color: rgb(255, 208, 0);
        font-size: 1vw;
    }
    #linuxBar{
        display: flex;
        position: absolute;
        top: 31vw;
        right: 0vw;
        height: 4vw;
        width: 9vw;
        background-color: rgb(48, 48, 48);
        color: gold;
    }
    #linuxBarEnd{
        display: flex;
        position: absolute;
        bottom: 0;
        left: -4vw;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 4vw;
        width: 4vw;
        z-index: -1;
    }
    #linuxText{
        display: flex;
        position: absolute;
        top: 1.4vw;
    }
    #tux{
        display: flex;
        position: absolute;
        top: 1.5vw;
        left: -2vw;
        color: rgb(255, 208, 0);
        font-size: 1vw;
    }
    #projectBar{
        display: flex;
        position: absolute;
        top: 44vw;
        left: 0vw;
        height: 5vw;
        width: 28vw;
        background-color: rgb(48, 48, 48);
    }
    #projectBarEnd{
        display: flex;
        position: absolute;
        right: -5vw;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 5vw;
        width: 5vw;
        z-index: -1;
    }
    #projectTitle{
        display: flex;
        position: absolute;
        top: 0.5vw;
        left: 2vw;
        color: rgb(255, 208, 0);
        font-size: 2.5vw;
    }
    #project1Bar{
        display: flex;
        position: absolute;
        top: 7vw;
        left: 0vw;
        height: 10vw;
        width: 25vw;
        background-color: rgb(48, 48, 48);
    }
    #project1BarEnd{
        display: flex;
        position: absolute;
        top: 0vw;
        left: 80%;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 10vw;
        width: 10vw;
        z-index: -1;
    }
    #project1Text{
        display: flex;
        position: absolute;
        top: 1vw;
        left: 4vw;
        color: gold;
        font-size: 1.2vw;
    }
    #project2Bar{
        display: flex;
        position: absolute;
        top: 19vw;
        left: 0vw;
        height: 10vw;
        width: 25vw;
        background-color: rgb(48, 48, 48);
    }
    #project2BarEnd{
        display: flex;
        position: absolute;
        top: 0vw;
        left: 80%;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 10vw;
        width: 10vw;
        z-index: -1;
    }
    #project2Text{
        display: flex;
        position: absolute;
        top: 1vw;
        left: 4vw;
        color: gold;
        font-size: 1.2vw;
    }
    #project3Bar{
        display: flex;
        position: absolute;
        top: 31vw;
        left: 0vw;
        height: 10vw;
        width: 25vw;
        background-color: rgb(48, 48, 48);
    }
    #project3BarEnd{
        display: flex;
        position: absolute;
        top: 0vw;
        left: 80%;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 10vw;
        width: 10vw;
        z-index: -1;
    }
    #project3Text{
        display: flex;
        position: absolute;
        top: 1vw;
        left: 4vw;
        color: gold;
        font-size: 1.2vw;
    }
    .projectIcon{
        display: flex;
        position: absolute;
        width: 2.5vw;
        height: 2.5vw;
        top: 0.7vw;
        left: 1vw;
        color: rgb(255, 208, 0);
    }
    #project1Desc{
        display: flex;
        position: absolute;
        top: 3vw;
        left: 4vw;
        color:rgb(171, 171, 77);
        font-size: 0.75vw;
    }
    #project2Desc{
        display: flex;
        position: absolute;
        top: 3vw;
        left: 4vw;
        color:rgb(171, 171, 77);
        font-size: 0.75vw;
    }
    #project3Desc{
        display: flex;
        position: absolute;
        top: 3vw;
        left: 4vw;
        color:rgb(171, 171, 77);
        font-size: 0.75vw;
    }
    #contactBar{
        display: flex;
        position: absolute;
        bottom: 35vw;
        left: 40vw;
        height: 10vw;
        width: 20vw;
        background-color: rgb(48, 48, 48);
        justify-content: center;
        flex-direction: column;
    }
    #contactBarEnd1{
        display: flex;
        position: absolute;
        top: 0;
        left: 20vw;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 10vw;
        width: 10vw;
        z-index: -1;
    }
    #contactBarEnd2{
        display: flex;
        position: absolute;
        top: 0;
        right: 15vw;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        background-color: rgb(48, 48, 48);
        height: 10vw;
        width: 10vw;
        z-index: -1;
    }
    #gitHubTitle{
        display: flex;
        position: relative;
        text-align: center;
        color: rgb(255, 208, 0);
        font-size: 1.6vw;
    }
    #linkedInTitle{
        display: flex;
        position: relative;
        text-align: center;
        color: rgb(255, 208, 0);
        font-size: 1.6vw;
    }
    #emailTitle{
        display: flex;
        position: relative;
        text-align: center;
        color: rgb(255, 208, 0);
        font-size: 1.6vw;
    }
    #gitHubLink{
        display: flex;
        position: relative;
        text-align: center;
        font-size: 1.6vw;
        left: 1vw;
    }
    #linkedInLink{
        display: flex;
        position: relative;
        text-align: center;
        font-size: 1.6vw;
        left: 1vw;
    }
    #email{
        display: flex;
        position: relative;
        text-align: center;
        text-decoration: underline;
        top: 0.5vw;
        font-size: 1vw;
        left: 1vw;
    }
}