/* ========================================  
   RESET  
======================================== */  
  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
  
  
html,  
body {  
    width: 100%;  
    min-height: 100%;  
}  
  
  
  
/* ========================================  
   PAGE  
======================================== */  
  
body {  
    min-height: 100vh;  
  
    background: #111111;  
  
    font-family:  
        Arial,  
        Helvetica,  
        sans-serif;  
}  
  
  
  
/* ========================================  
   MENU CARD
======================================== */  
  
.menu {
    position: fixed;

    top: 18px;
    bottom: 18px;
    left: 18px;

    width: 260px;

    padding: 28px 26px;

    background: #ffffff;

    border-radius: 14px;

    display: flex;
    flex-direction: column;
}



/* ========================================  
   MENU TITLE
======================================== */  
  
.menu-title {  
    color: #111111;  
  
    font-size: 13px;  
    font-weight: 900;  
  
    letter-spacing: 0.2em; 
 
    text-transform: uppercase; 
}



/* ========================================  
   MENU LINKS
======================================== */

.menu-links {
    margin-top: 55px;

    display: flex;
    flex-direction: column;

    gap: 18px;
}


.menu-links a {
    width: fit-content;

    color: #999999;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.15em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.menu-links a:hover {
    color: #111111;

    transform: translateX(4px);
}



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

    /* ========================================
       MENU — NO CARD ON MOBILE
    ======================================== */

    .menu {
        position: static;

        width: 100%;
        height: auto;

        padding: 28px 20px;

        background: transparent;

        border-radius: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
    }


    /* ========================================
       TITLE
    ======================================== */

    .menu-title {
        color: #777777;

        font-size: 20px;

        text-align: center;
    }


    /* ========================================
       LINKS
    ======================================== */

    .menu-links {
        margin-top: 22px;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        gap: 28px;
    }


    .menu-links a {
        color: #777777;

        font-size: 10px;

        text-align: center;
    }


    .menu-links a:hover {
        color: #ffffff;

        transform: none;
    }

}