.menu {
    width: 10rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5000;
    top: 25rem;
    left: 0;
    position: fixed;
    cursor: move;
}

.menuitem {
    width: 6rem;
    height: 6rem;
    position: absolute;
    left: 0;
    justify-content: center;
    align-items: center;
    list-style: none;
    transform-origin: 5.20833333333333333rem;
    transition: 0.08s;
    transition-delay: calc(0.12s * var(--i));
    transform: rotate(0deg) translateX(3.5rem);
    z-index: 2500;
    opacity: 0;
    pointer-events: none;
}
.menuitem_second {
    width: 6rem;
    height: 6rem;
    position: absolute;
    left: 0;
    justify-content: center;
    align-items: center;
    list-style: none;
    transform-origin: 5.20833333333333333rem;
    transition: 0.08s;
    transition-delay: calc(0.12s * var(--i));
    transform: rotate(0deg) translateX(3.5rem);
    z-index: 2500;
    opacity: 0;
    pointer-events: none;
}
.menu a {
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6rem;
    height: 6rem;
    border-radius: 10%;
}

.menu.active.left .menuitem{
    transform: translateX(calc(8rem * var(--i) + 5rem));
    opacity: 1;
    pointer-events: auto;
}
.menu.active.left .menuitem_second {
    transform: translateX(calc(8rem * var(--i) + 5rem)) translateY(calc(8rem * var(--j)));
    opacity: 1;
    pointer-events: auto;
}
.menu.active.right .menuitem{
    transform: translateX(calc(-8rem * var(--i)));
    opacity: 1;
    pointer-events: auto;
}
.menu.active.right .menuitem_second{
    transform: translateX(calc(-8rem * var(--i))) translateY(calc(-8rem * var(--j)));
    opacity: 1;
    pointer-events: auto;
}

.toggle {
    position: absolute;
    width: 7rem;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
    cursor: pointer;
    box-shadow: 0 0 0.3rem gray;
    z-index: 4500;
    background-color: white;
    opacity: 0.5;
}
.award{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/award1.png");
    background-position: center;
    background-size: cover;
}
.design{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/design1.png");
    background-position: center;
    background-size: cover;
}
.education{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/education1.png");
    background-position: center;
    background-size: cover;
}
.home{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/home1.png");
    background-position: center;
    background-size: cover;
}
.hp{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/hp1.png");
    background-position: center;
    background-size: cover;
}
#menu{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/menu1.png");
    background-position: center;
    background-size: cover;
}
.parts{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/parts1.png");
    background-position: center;
    background-size: cover;
}
.project{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/project1.png");
    background-position: center;
    background-size: cover;
}
.safety{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/safety1.png");
    background-position: center;
    background-size: cover;
}
.team{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/team1.png");
    background-position: center;
    background-size: cover;
}
.wetlab{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/wetlab1.png");
    background-position: center;
    background-size: cover;
}
.model{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/model1.png");
    background-position: center;
    background-size: cover;
}
.iconsforindex{
    top: 0;
    left: 0;
    display: block;
    justify-content: center;
    align-items: center;
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 10%;
}
.iconsforindex a{
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 10%;
}
@media(max-width: 500px){
    .menu{
        display: none;
        opacity: 0;
        pointer-events: none;
    }
}