/* ========================
   Default Styles (Laptop / Large Screens)
   ======================== */

/* defined in main.css */

/* ========================
   Tablets (768px - 1024px)
   ======================== */
@media (max-width: 1024px) {

    /* Logos Start */
    #logo-full-svg {
        width: 60dvw;
        height: 200px;
    }

    /* Logos End */

    /* Lines Start */
    .horizontal-line {
        width: 100dvw;
    }

    .v1 {
        left: calc(100dvw - 40px);
    }

    .v2 {
        left: 40px;
    }

    /* Lines End */
}

/* ========================
   Large Phones / Small Tablets (601px - 768px)
   ======================== */
@media (max-width: 768px) {
    #logo-full-svg {
        display: none;
    }
}

/* ========================
   Phones (≤ 600px)
   ======================== */
@media (max-width: 600px) {

    /* Logos Start */
    #logo-full-svg {
        display: none;
    }

    /* Logos End */

    /* Navbar Start */
    #navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: px;
    }

    #navbar ul {
        display: none;
        /* hidden by default */
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
        gap: 4px;
    }

    #navbar ul.show {
        display: flex;
        /* toggled by JS */
    }

    #navbar #nav-header {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    #navbar li {
        width: 100%;
    }

    #navbar a {
        display: block;
        width: 100%;
        padding: 2px 0;
        font-size: small;
        text-align: right;
    }

    #navbar #menu-svg {
        display: inline-block;
    }

    /* Navbar End */

    /* Footer Start */
    #footer {
        padding-right: 0px;
        justify-content: center;
    }

    /* Footer End */
}