.side-nav {
    position: fixed;
    background: url('../img/nav-left.png') center center / contain no-repeat;
    margin-left: 3%;
    background-color: transparent;
    border-radius: 18px 0 0 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 15%;
    z-index: 101;
    box-shadow: none;
    padding: 0;
    aspect-ratio: 9/16;
}

.side-nav > div {
    position: absolute;
    left: 35%;
    width: 60%;
    aspect-ratio: 4/3;
    /* background: rgba(255,255,255,0.82); */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s;
}

.side-nav .nav1 { top: 10%; 
    left: 35%;
    z-index: 4; 
background-image: url('../img/nav-01.png');
background-size: contain;
background-repeat: no-repeat;}

.side-nav .nav2 { top: 25%;
      left: 32%; z-index: 3; 
background-image: url('../img/nav-02.png');
background-size: contain;
background-repeat: no-repeat;}

.side-nav .nav3 { top: 40%; z-index: 2; 
background-image: url('../img/nav-03.png');
background-size: contain;
background-repeat: no-repeat;}

.side-nav .nav4 { top: 56%;left: 33%;
     z-index: 1; 
background-image: url('../img/nav-04.png');
background-size: contain;
background-repeat: no-repeat;}

.side-nav > div a {
    color: #a86c2c;
    /* background-color: #ffffffad; */
    font-size: 2.5vh;
    text-decoration: none;
    margin-top: 30%;
    
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    text-align: center;
    letter-spacing: 0.05em;
    transition: all 0.2s;
}

.side-nav .nav1 a { transform: rotate(-2deg); }
.side-nav .nav2 a { transform: rotate(1deg); }
.side-nav .nav3 a { transform: rotate(0deg); 
}
.side-nav .nav4 a { transform: rotate(0deg); }

.side-nav > div a:hover {
        text-shadow: 0 4px 16px rgba(80,60,40,0.18);
font-size: 3vh;

     color: #7a4a1c;
        transition: all 0.2s;
}