/* =====================================
   MENU CONTAINER
===================================== */

.menuContainer{

    position:fixed;

    top:30px;

    right:80px;

    z-index:999;

}

/* =====================================
   MENU BUTTON
===================================== */

.menuButton{

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    user-select:none;

    padding:10px;

}

/* =====================================
   MENU ITEMS
===================================== */

.menuItems{

    position:relative;

    margin-top:12px;

}

/* =====================================
   SINGLE ITEM
===================================== */

.menuItem{

    position:absolute;

    top:0;

    left:0;
    width:180px;

    text-align:left;

    opacity:0;

    transform:translateY(0);

    pointer-events:none;

    text-decoration:none;

    color:white;

    font-family:'Cormorant Garamond',serif;

    font-size:22px;

    font-weight:600;

    letter-spacing:2px;

    transition:

        transform .35s ease,

        opacity .35s ease,

        color .35s ease;

}

.menuItem:hover{

    color:#D8C6A5;

    transform:translateX(10px);

}

.menuButton:focus-visible,
.menuItem:focus-visible{

    outline:2px solid #D8C6A5;

    outline-offset:4px;

}

/* =====================================
   OPEN STATE
===================================== */

.menuContainer.open .menuItem{

    opacity:1;

    pointer-events:auto;

}

.menuContainer.open .menuItem:nth-child(1){

    transform:translateY(70px);

}

.menuContainer.open .menuItem:nth-child(2){

    transform:translateY(120px);

}

.menuContainer.open .menuItem:nth-child(3){

    transform:translateY(170px);

}

.menuContainer.open .menuItem:nth-child(4){

    transform:translateY(220px);

}

.menuContainer.open .menuItem:nth-child(5){

    transform:translateY(270px);

}

/* =====================================
   MOBILE
===================================== */

@media(max-width:768px){

.menuContainer{

    top:20px;

    right:20px;

}

.menuButton{

    width:56px;

    height:56px;

    font-size:22px;

}

.menuItem{

    font-size:18px;

}

.menuContainer.open .menuItem:nth-child(1){

    transform:translateY(70px);

}

.menuContainer.open .menuItem:nth-child(2){

    transform:translateY(120px);

}

.menuContainer.open .menuItem:nth-child(3){

    transform:translateY(170px);

}

.menuContainer.open .menuItem:nth-child(4){

    transform:translateY(220px);

}

.menuContainer.open .menuItem:nth-child(5){

    transform:translateY(270px);

}

}