/* https://coolors.co/009e60-f77f00-ffffff-000000 */
@media screen and (min-width: 760px) {

    dialog {
        position: fixed;
        top: 50%;
        left: 20%;
        right: 20%;
        width: 60%;
        transform: translateY(-50%);

        border-radius: 10px;
        border: none;
    }

    /*============ HEADER STYLING ==============*/
    header {
        grid-template-columns: 200px 1fr 100px;
        justify-content: center;
        align-items: center;
    }

    #menu {
        display: none;
    }

    header .logo {
        grid-column: 1/2;
    }

    header nav ul {
        flex-direction: row;
        justify-content: end;
        grid-column: 2/3;
    }

    header nav a {
        padding: 0.8rem 2rem;
    }

    header nav a,
    header nav li {
        display: inline-block;
        border: none;
    }

    #dark-light {
        grid-column: 3/4;
    }

    /*============ FOOTER STYLING ==============*/
    footer {
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }
}