/* Phone */
@media screen and (max-width: 619px) {
    .maincontainer{
        display: flex;
        flex-direction: column;
    }   

    .navpagelink{
        font-size: 1.5rem;
    }

    .navbar{
        padding-top: 1rem;
        flex-direction: column;
        align-items: center;
    }

    .navbarlinksection{
        display: flex;
        flex-direction: column;
        width: 100vw;
        padding-block: 1rem;
        height: 0.5rem;
        align-items: center;
        opacity: 0;
    }

    .navbarlinksection:focus{
        height: 15rem;
        opacity: 1;
        padding-block: 0rem;
    }

    .content{   
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centers horizontally */
        align-items: center; 
    }

    .navbarlogo{
        width: 9rem;
        height: auto;
        padding-top: 0.5rem;
        padding-bottom: 1.5rem;
    }

    .darksection{
        margin: 2rem 0rem;
        padding: 1rem;
    }
}

/* Tablet */
@media screen and (min-width: 620px) and (max-width: 1099.9px) {
    .maincontainer{
        display: flex;
        flex-direction: column;
    }   

    .navbar{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .navbarlinksection{
        display: flex;
        width: 100vwd;
        padding-inline: 3rem;
        height: 5.5rem;
        flex-grow: 1;
        flex-shrink: 0;
        position: sticky; top: 0;
        box-sizing: border-box;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }

    .navbarlogo{
        height: 4rem;
        margin-block: 1rem;
        margin-right: 0rem;
        margin-left: 2rem;
    }

    .navpagelink{
        font-size: 1.25rem;
        margin: 0.5rem;
    }
}


/* Desktop */
@media screen and (min-width: 1100px) {
    .navpagelink{
        font-size: 1.5rem;
        padding: 0rem;

    }

    .navbar{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .navbarlinksection{
        display: flex;
        flex-direction: column;
        width: 15rem;
        padding-inline: 3rem;
        padding-block: 1rem;
        height: 100vh;
        flex-grow: 1;
        flex-shrink: 0;
        position: sticky; top: 0;
        box-sizing: border-box;
    }

    .navbarlogo{
        width: 9rem;
        height: auto;
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }

    .darksection{
        margin: 6rem auto;
        padding: 2rem;
    }
}