/* @media (max-width: 1440px){
    

}

@media (max-width: 1280px) {

}

@media (max-width: 1024px) {

}

@media (max-width: 820px) {

}

@media (max-width: 768px) {

}

@media (max-width: 720px) {
    
} */

@media (max-width: 650px){
      h1{
        font-size: 25px;
    }

    #themeToggleButton{
        padding: 5px;
        font-size: 10px;
    }

    .skillsBox{
        position: static;
        padding: 10px;
        width: 100%;
        text-align: center;
    }

    .skillsBox:hover{
        transform: scale(1);
    }

    .skillsBox div:hover{
        transform: scale(1);
    }

    .skillsBox div{
        margin: auto;
        width: 80%;
    }

    .introInformation{
        width: 100%;
    }

    .summary{
        width: 100%;
    }
}

@media (max-width: 600px) {
    .skillsBox{
        position: static;
        padding: 10px;
        width: 100%;
        display: grid;
        text-align: center;

    }

    .skillsBox:hover{
        transform: scale(1);
    }

    .skillsBox div:hover{
        transform: scale(1);
    }

    .skillsBox div{
        margin: auto;
        display: inline-block;
        width: auto;
    }

    .introInformation{
        width: 100%;
    }

    .summary{
        width: 100%;
    }


    .skill-set{
        width: 100%;
    }

    .skill-group{
        margin: auto;
    }

    li{
        list-style-position: outside;
        list-style: none;
        margin: 0;
        padding: 0px;
    }    

    ul{
        list-style-position: outside;
    }

    ol{
        list-style-position: outside;
    }
    
    .main-page-projects{
        margin: auto;
        justify-content: center;
    }

    .projects{
        margin: auto;
        justify-content: center;
    }

    .project-set{
        width: 100%;
        padding: 20px;
    }

    .project-set img{
        margin: auto;
    }

    .project-group{
        width: 100%;
        padding: 10px;
        margin: 10px ;
        align-items: center;
    }
}




@media (max-width: 485px) {

    nav{
        width: 100%;
    }


    header a{
        font-size: 13px;
        padding: 5px;
    }

    h1{
        font-size: 25px;
    }

    #themeToggleButton{
        padding: 5px;
        font-size: 15px;
    }

    .skillsBox{
        position: static;
        padding: 10px;
        width: 100%;
        text-align: center;
    }

    .skillsBox:hover{
        transform: scale(1);
    }

    .skillsBox div:hover{
        transform: scale(1);
    }

    .skillsBox div{
        margin: auto;
        width: 80%;
    }

    .introInformation{
        width: 100%;
    }

    .summary{
        width: 100%;
    }

    /* About Page */

    .skill-set{
        width: 100%;
        padding: 10px;
        margin: 10px 0;
    }

    /* Projects Page */

    .main-page-projects{
        margin: auto;
        justify-content: center;
    }

    .projects{
        margin: auto;
        justify-content: center;
    }

    .projects-group{
        padding: 10px;
        width: 100%;
    }

    .project-set{
        width: 100%;
        padding: 10px;
    }

    .project-set img{
        width: 100%;
    }

    /* Contact Page */

    .loading-screen{
    margin: 30px auto;
    width: 60%;
    }
}

@media (max-width: 414px) {

    
    header a{
        font-size: 13px;
        padding: 5px;
    }

    h1{
        font-size: 25px;
    }

    #themeToggleButton{
        padding: 5px;
        font-size: 15px;
    }

    .skillsBox{
        position: static;
        padding: 10px;
        width: 100%;
        text-align: center;
    }

    .skillsBox:hover{
        transform: scale(1);
    }

    .skillsBox div:hover{
        transform: scale(1);
    }

    .skillsBox div{
        margin: auto;
        width: 80%;
    }

    .introInformation{
        width: 100%;
    }

    .summary{
        width: 100%;
    }

    /* About Page */

    .skill-set{
        width: 100%;
        padding: 10px;
        margin: 10px 0;
    }

    /* Projects Page */

    .main-page-projects{
        margin: auto;
        justify-content: center;
    }

    .projects{
        margin: auto;
        justify-content: center;
    }

    .projects-group{
        padding: 10px;
        width: 100%;
    }

    .project-set{
        width: 100%;
        padding: 10px;
    }

    .project-set img{
        width: 100%;
    }

    /* Contact Page */

    .loading-screen{
    margin: 30px auto;
    width: 60%;
    }
}

@media (max-width: 390px) {
    header a{
        font-size: 13px;
        padding: 5px;
    }

    h1{
        font-size: 25px;
    }

    #themeToggleButton{
    padding: 5px;
    font-size: 15px;
    }

    .skillsBox{
        position: static;
        padding: 10px;
        width: 100%;
        text-align: center;
    }

    .skillsBox:hover{
        transform: scale(1);
    }

    .skillsBox div:hover{
        transform: scale(1);
    }

    .skillsBox div{
        margin: auto;
        width: 80%;
    }

    .introInformation{
        width: 100%;
    }

    .summary{
        width: 100%;
    }

    /* About Page */

    .skill-set{
        width: 100%;
        padding: 10px;
        margin: 10px 0;
    }

    /* Projects Page */

    .main-page-projects{
        margin: auto;
        justify-content: center;
    }

    .projects{
        margin: auto;
        justify-content: center;
    }

    .projects-group{
        padding: 10px;
        width: 100%;
    }

    .project-set{
        width: 100%;
        padding: 10px;
    }

    .project-set img{
        width: 100%;
    }

    /* Contact Page */

    .loading-screen{
    margin: 30px auto;
    width: 60%;
    }
}

@media (max-width: 375px) {
    header a{
        font-size: 13px;
        padding: 5px;
    }

    h1{
        font-size: 25px;
    }

    #themeToggleButton{
    padding: 5px;
    font-size: 15px;
    }

    .skillsBox{
        position: static;
        padding: 10px;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .skillsBox:hover{
        transform: scale(1);
    }

    .skillsBox div:hover{
        transform: scale(1);
    }

    .skillsBox div{
        margin: auto;
        width: 80%;
    }

    .introInformation{
        width: 100%;
    }


    .summary{
        width: 100%;
    }

    /* About Page */

    .skill-set{
        width: 100%;
        padding: 10px;
        margin: 10px 0;
    }

    /* Projects Page */

    .main-page-projects{
        margin: auto;
        justify-content: center;
    }

    .projects{
        margin: auto;
        justify-content: 0;
    }

    .projects-group{
        padding: 10px;
        width: 100%;
    }

    .project-set{
        width: 100%;
        padding: 10px;
    }

    .project-set img{
        width: 100%;
    }

    /* Contact Page */

    .loading-screen{
    margin: 30px auto;
    width: 60%;
    }
}

@media (max-width: 360px) {
    header a{
        font-size: 13px;
        padding: 5px;
    }

    h1{
        font-size: 25px;
    }

    #themeToggleButton{
    padding: 5px;
    font-size: 15px;
    }

    .skillsBox{
        position: static;
        padding: 10px;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .skillsBox:hover{
        transform: scale(1);
    }

    .skillsBox div:hover{
        transform: scale(1);
    }

    .skillsBox div{
        margin: auto;
        width: 80%;
    }

    .introInformation{
        width: 100%;
    }

    .summary{
        width: 100%;
    }

    /* About Page */

    .skill-set{
        width: 100%;
        padding: 10px;
        margin: 10px 0;
    }

    /* Projects Page */

    .main-page-projects{
        margin: auto;
        justify-content: center;
    }

    .projects{
        margin: auto;
        justify-content: center;
    }

    .projects-group{
        padding: 10px;
        width: 100%;
    }

    .project-set{
        width: 100%;
        padding: 10px;
    }

    .project-set img{
        width: 100%;
    }

    /* Contact Page */

    .loading-screen{
    margin: 30px auto;
    width: 60%;
    }
}

@media (max-width: 320px) {
    header a{
        font-size: 13px;
        padding: 5px;
    }

    h1{
        font-size: 25px;
    }

    .skillsBox{
        position: static;
        padding: 10px;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .skillsBox:hover{
        transform: scale(1);
    }

    .skillsBox div:hover{
        transform: scale(1);
    }

    .skillsBox div{
        margin: auto;
        width: 80%;
    }

    .introInformation{
        width: 100%;
    }

    .summary{
        width: 100%;
    }

    #themeToggleButton{
    padding: 5px;
    font-size: 15px;
    }

    /* About Page */

    .skill-set{
        width: 100%;
        padding: 10px;
        margin: 10px 0;
    }

    /* Projects Page */

    .main-page-projects{
        margin: auto;
        justify-content: center;
    }

    .projects{
        margin: auto;
        justify-content: center;
    }

    .projects-group{
        padding: 10px;
        width: 100%;
    }

    .project-set{
        width: 100%;
        padding: 10px;
    }

    .project-set img{
        width: 100%;
    }

    /* Contact Page */

    .loading-screen{
        margin: 30px auto;
        width: 60%;
    }
}