iframe{
    color-scheme: none!important;
}

.button, .button, input[type="button"], input[type="submit"], input::file-selector-button, .rounded {
    border-radius: var(--1s);
}

:root{
    --c0: #3f3f3f;
    --c1: #505050;
    --c2: #49525b;
    --c3: #546d86;
    --c4: #155393;
    --c5: #00A0E3;
    --c6: #fab400;
    --c7: #fecc00;
    --c8: #dddddd;
    --c9: #eeeeee;
    --c10:#ffffff;
}

@font-face {
    font-family: "Nunito"; 
    src: url("../fonts/Nunito-Regular.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: normal; 
    font-display: swap;
} 

.menu-list{
    transform: translateX(-100%);
    transition: 0.75s ease-in-out;
    display: flex;
    gap: 5px;
    flex-direction: column;
    top: 0;
    left: 0;
    margin: 0!important;
    padding: calc(var(--1s)*4.5) calc(var(--1s)*2.222) calc(var(--1s)*0.833) calc(var(--1s)*0.833);
    z-index: 9;
}

.menu{
    margin:0;
    padding: 0;
    position: fixed;
    top: var(--1_5s);
    right: var(--2s);
    display: flex;
    flex-direction: column;
    align-items: end;
    z-index: 10;
}

.menu-button{
    left: var(--1s);
    cursor: pointer;
    z-index: 10;
    display: block;
    border: none;
    width: var(--2s);
    height: var(--1_25s);
    z-index: 10;
}

.menu-button::before,
.menu-button::after {
content: '';
left: 0;
position: absolute;
display: block;
width: 100%;
height: calc(var(--1s)* 0.05);
border-radius: var(--1s);
background: #000000;
}
.menu-button::before {
top: 0;
box-shadow: 0 calc(var(--1s)* 0.61) 0 #000000;
transition: box-shadow .3s .15s, top .3s .15s, transform .3s;
}
.menu-button::after {
bottom: 0;
transition: bottom .3s .15s, transform .3s;
}
.menu-checkbox:checked + .menu-button::before {
top: calc(var(--1s)* 0.61);
transform: rotate(45deg);
box-shadow: 0 6px 0 rgba(0,0,0,0);
transition: box-shadow .15s, top .3s, transform .3s .15s;
}
.menu-checkbox:checked + .menu-button::after {
bottom: calc(var(--1s)* 0.61);
transform: rotate(-45deg);
transition: bottom .3s, transform .3s .15s;
}

.menu-checkbox:checked ~ .menu-list{
    transform: translateX(0);
}

a:hover {
    color: #3278C8;
    transition: 0.5s;
}


@media screen and (max-width: 768px) {
.mbtoff{padding-top: var(--3s);}
.menu-list{
width: 100%;
font-size: calc(var(--1s)* 1.5);
}

}