* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media only screen and (max-width: 1070px) {
    #skills-lists-container{
        grid-template-columns: 1fr 1fr;
    }

    #skills-container-0{
        margin-bottom: 2.5rem;
    }
}

@media only screen and (max-width: 970px) {
    body{
        background-color: var(--BG-main);
        font-size: 12px;
    }

    #container{
        display: block;
        overflow-y: auto;
        height: auto;
    }

    #left-container, #right-container{
        padding: 0;
        display: flex;
        flex-direction: column;
        height: auto;
        overflow: auto;
        width: 100%;
        padding-bottom: 0rem;
    }

    #left-section{
        margin-top: 5rem;
        margin-bottom: 2rem;
    }

    .left-section, .right-section{
        margin: auto;
        padding: 1rem;
        max-width: 600px;
        width: 100%;
    }

    #navigation-menu{
        display: none;
    }

    .section-title{
        padding-top: 4rem;
    }

    #skills-section{
        margin-left: auto;
    }

    #footer-section{
        margin-top: 1.5rem;
        border-top: 1px dashed var(--seconday-text-main);
        padding-top: 2rem;
        margin-bottom: 1rem;
    }
}

@media only screen and (max-width: 620px) {
    #subtitle{
        margin-bottom: 2rem;
    }

    .connect-icon{
        margin-right: 1.5rem;
        fill: var(--primary-text-main);
        height: 25px;
        width: auto;
    }
}

@media only screen and (max-width: 575px) {
    .message{
        font-size: 0.72rem;
    }
}

@media only screen and (max-width: 420px) {
    #title{
        font-size: 2.5rem;
    }

    .message{
        font-size: 0.8rem;
    }
}