@charset "utf-8";
/* CSS Document */

.main-menu {
    padding: 0;
    list-style: none;
    position: relative;
    border: dashed 3px purple;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 5vh;
    z-index: 99;
}

.main-menu li {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
}

.main-menu img {
    width: 100%;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    transition-duration: 0.5s;
}

.main-menu li:hover {
    cursor: pointer;
    z-index: 999 !important;
}

.main-menu li.site-offline {
    filter: grayscale(100%) brightness(75%);
}

.main-menu li.site-offline img {
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

.main-menu li:not(.site-offline):hover img {
    transform: scale(1.2);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

.main-menu li.site-offline:hover img {
    animation-name: wobble-horizontal;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

@keyframes wobble-horizontal {
    16.65% {
        transform: translateX(8px);
    }
    33.3% {
        transform: translateX(-6px);
    }
    49.95% {
        transform: translateX(4px);
    }
    66.6% {
        transform: translateX(-2px);
    }
    83.25% {
        transform: translateX(1px);
    }
    100% {
        transform: translateX(0);
    }
}

.navigation {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 70vh;
}

/* Landscape (i.e. wide viewport) */
@media screen and (min-aspect-ratio: 1/1) {
    .main-menu {
        width: 45vh;
        height: 45vh;
    }

    .main-menu li {
        width: 16vh;
        height: 16vh;
        margin: -8vh; /* half the width */
    }

    .main-menu li:nth-child(1) { animation: fade_landscape_1 0.8s forwards; }
    .main-menu li:nth-child(2) { animation: fade_landscape_2 0.8s forwards; }
    .main-menu li:nth-child(3) { animation: fade_landscape_3 0.8s forwards; }
    .main-menu li:nth-child(4) { animation: fade_landscape_4 0.8s forwards; }

}
    @keyframes fade_landscape_1 {
        0% { opacity: 0; transform: translate(0) scale(0.6) rotate(-90deg); }
        100% { opacity: 1; transform: rotate(-90deg) translate(22.5vh) rotate(90deg) scale(1); }
    }

    @keyframes fade_landscape_2 {
        0% { opacity: 0; transform: translate(0) scale(0.6) rotate(0deg); }
        100% { opacity: 1; transform: rotate(0deg) translate(22.5vh) rotate(0deg) scale(1); }
    }

    @keyframes fade_landscape_3 {
        0% { opacity: 0; transform: translate(0) scale(0.6) rotate(90deg); }
        100% { opacity: 1; transform: rotate(90deg) translate(22.5vh) rotate(-90deg) scale(1); }
    }

    @keyframes fade_landscape_4 {
        0% { opacity: 0; transform: translate(0) scale(0.6) rotate(180deg); }
        100% { opacity: 1; transform: rotate(180deg) translate(22.5vh) rotate(-180deg) scale(1); }
    }

/* Portrait (i.e. narrow viewport) */
@media screen and (max-aspect-ratio: 1/1) {
    .main-menu {
        width: 45vw;
        height: 45vw;
    }

    .main-menu li {
        width: 16vw;
        height: 16vw;
        margin: -8vw; /* half the width */
        animation: none;
    }

    .main-menu li:nth-child(1) { animation: fade_portrait_1 0.8s forwards; }
    .main-menu li:nth-child(2) { animation: fade_portrait_2 0.8s forwards; }
    .main-menu li:nth-child(3) { animation: fade_portrait_3 0.8s forwards; }
    .main-menu li:nth-child(4) { animation: fade_portrait_4 0.8s forwards; }
}

    @keyframes fade_portrait_1 {
        0% { opacity: 0; transform: translate(0) scale(0.6) rotate(-90deg); }
        100% { opacity: 1; transform: rotate(-90deg) translate(22.5vw) rotate(90deg) scale(1); }
    }

    @keyframes fade_portrait_2 {
        0% { opacity: 0; transform: translate(0) scale(0.6) rotate(0deg); }
        100% { opacity: 1; transform: rotate(0deg) translate(22.5vw) rotate(0deg) scale(1); }
    }

    @keyframes fade_portrait_3 {
        0% { opacity: 0; transform: translate(0) scale(0.6) rotate(90deg); }
        100% { opacity: 1; transform: rotate(90deg) translate(22.5vw) rotate(-90deg) scale(1); }
    }

    @keyframes fade_portrait_4 {
        0% { opacity: 0; transform: translate(0) scale(0.6) rotate(180deg); }
        100% { opacity: 1; transform: rotate(180deg) translate(22.5vw) rotate(-180deg) scale(1); }
    }
    
    .main-menu li:nth-child(1) { animation-delay: 0s !important; z-index: 4; }
    .main-menu li:nth-child(2) { animation-delay: 0.2s !important; z-index: 3; }
    .main-menu li:nth-child(3) { animation-delay: 0.4s !important; z-index: 2; }
    .main-menu li:nth-child(4) { animation-delay: 0.6s !important; z-index: 1; }
}