@media (orientation: portrait) {
    body, html {
        margin: 0;
        padding: 0;
        overflow-x: clip;
    }
    
    .container {
        overflow-x: hidden;
        display: block;
    }
    
    .menu {
        background-color: rgb(245, 107, 142, 0.3);
        backdrop-filter: blur(3px);
        color: var(--highlight);
        width: 69vw;
        padding: 1vh;
        position: absolute;
        transition: all 0.3s ease-in-out;
        right: -77vw;
        top: 3svh;
        z-index: 9997;
    }
    .menu.open {
        display: block;
        z-index: 9997;
        position: absolute;
        right:0;
        top: 9svh;
    }
    .menu-items {
        padding: 0;
        display: flex;
        padding-top: 1svh;
        gap: 1.69vh;
        flex-direction: column;
        min-height: 50svh;
        z-index: 99999;
        font-family: var(--h-font)
    }
    
    .menu-items .moblink {
        display: block;
        padding: 1em; 
        text-decoration: none;
        color: var(--white);
        background-color: var(--highlight);
        transition: color 0.3s ease background-color 0.69s ease-in-out;
        font-size: 3.69vh;
    }
    
    .menu-items .moblink:hover {
        background-color: var(--accentcolor);
        color: var(--bg-color); 
    }
    .moblink.active {
    margin-left: -9.69vw;
    background-color: rgb(255,107,142, 0.69);
    backdrop-filter: blur(3px);
    color: var(--white);
    cursor:auto;
    }
    .moblink.active:hover {
        background-color: var(--accentcolor);
        color: var(--white); 
    }
    
    
    .content {
        margin-right: 5vw;
    }
    
}
.toggle-btn {
    background-color: rgb(245, 107, 142, 0.3);
    backdrop-filter: blur(0px);
    z-index: 9998;
}

@media (orientation: landscape) {
    .container, .toggle-btn {
        display: none;
    }
    .menu {
        display: none;
    }
}