.sidebar {
width: 40%;
height: 100%;
position: fixed;
top: 0px;
right: 0px;
background: rgba(129, 178, 183, 0.7);
min-height: 400px;
}
.scrollable-content {
overflow-y: visible;
padding: 20px 0 0 40px;
color: #fff;
min-height: 400px;
}
.scrollable-content ul {
margin: -20px;
padding: 0;
list-style: none;
}
.styles li a {
color: #fff;
font-size: clamp(1.15rem, 2.7vw, 2.7rem);
font-weight: 600;
text-align: right;
padding-right: 60px;
padding-bottom: 8px;
text-decoration: none;
line-height: 1.2;
}
.styles li a:hover{
color: #FF8251;
}

/* Style the hamburger */
.burger{
background: #81B2B7;
display: block;
position: absolute;
font-size: 30px;
padding: 0 10px;;
right: 15px;
top: 25px;
z-index: 100;
cursor: pointer;
}
.burger a{
color:#fff !important;
}
@media (max-width: 810px) {
.hidden {
display: none;
}
.sidebar {
width: 100%;
background: rgba(129, 178, 183, 1.0);
z-index: 101;
}
}
@media (min-width: 810px) {
.burger {
display: none;
}
.close {
display: none;
}
}