.icon {
    width:1.7vw;
    height:2.7vh;
    top:4vh;
    right:2.5vw;
    position: fixed;
    cursor: pointer;
    z-index: 10;
}

.menu-circle {
    position: fixed;
}

/* 隐藏的菜单 */
.menu {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top:0;
    left:0;
    background:url("https://static.igem.wiki/teams/5034/wiki-images/h-g-1.png"),url("https://static.igem.wiki/teams/5034/wiki-images/h-g-2.png"),url("https://static.igem.wiki/teams/5034/wiki-images/h-g-3.png");
    background-size: 100% 100%; 
    background-position:right top; 
    background-repeat: no-repeat,no-repeat,no-repeat;

    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: scale(0);
    transition: transform 0.3s ease-in-out;
    z-index: 5;
}

/* 菜单显示时的样式 */
.menu.active {
    display: flex;
    transform: scale(1);
}

/* 菜单项样式 */
.menu-list {
    list-style: none;
    height:63vw;
    width:40vw;
    top:0;
    position: absolute;
}

.menu-item {
    color:rgb(223,243,236);
    height: 5vw;
    font-size: 4vw;
    transition: all 0.3s ease-in-out;
    position: relative;
    text-align:left;
    margin: 1.5vw 0;
}

.menu-item a{
    color:rgb(223,243,236);
    text-decoration: none;
}


/* 每个菜单项的倾斜度根据索引递增 */
.menu-item:nth-child(1) {
    width:12vw;
    left:0vw;
    transform: rotate(0deg);
    margin: 0 0 1.5vw 0;
    
}

.menu-item:nth-child(2) {
    width: 14vw;
    left:-1vw;
    transform: rotate(-5deg);
    
}

.menu-item:nth-child(3) {
    width: 10vw;
    left:-2vw;
    transform: rotate(-10deg);
    
}

.menu-item:nth-child(4) {
    width: 13vw;
    left:-3vw;
    transform: rotate(-15deg);
    margin: 2vw 0 0 0;
    /* text-indent: 1vw; */
}

.menu-item:nth-child(5) {
    width: 33vw;
    left:-3vw;
    transform: rotate(-20deg);
    margin: -1vw 0 0 0;
    /* text-indent: 2vw; */
}

.menu-item:nth-child(6) {
    width: 19vw;
    left:3vw;
    transform: rotate(-25deg);
    margin: 3vw 0 0 0;
    /* text-indent: 4vw;
    margin:4%; */
}

.menu-item:nth-child(7) {
    width: 10vw;
    left:10vw;
    transform: rotate(-30deg);
    margin: 2vw 0 0 0;
    /* text-indent: 8vw;
    margin:6%; */
}

.menu-item:nth-child(8) {
    width: 11vw;
    left:18vw;
    transform: rotate(-35deg);
    margin: -2vw 0 0 0;
    /* text-indent: 4vw;
    margin:4%; */
}

.menu-item:nth-child(9) {
    width: 27vw;
    left:24vw;
    transform: rotate(-40deg);
    margin: -7vw 0 0 0;
    /* text-indent: 8vw;
    margin:6%; */
}

.menu-item:nth-child(1):hover {
    transform: rotate(1deg) scale(1.05);
}

.menu-item:nth-child(2):hover {
    transform: rotate(-3deg) scale(1.05);
}

.menu-item:nth-child(3):hover {
    transform: rotate(-8deg) scale(1.05);
}

.menu-item:nth-child(4):hover {
    transform: rotate(-13deg) scale(1.05);
}

.menu-item:nth-child(5):hover {
    transform: rotate(-18deg) scale(1.05);
}

.menu-item:nth-child(6):hover {
    transform: rotate(-23deg) scale(1.05);
}

.menu-item:nth-child(7):hover {
    transform: rotate(-28deg) scale(1.05);
}

.menu-item:nth-child(8):hover {
    transform: rotate(-33deg) scale(1.05);
}

.menu-item:nth-child(9):hover {
    transform: rotate(-38deg) scale(1.05);
}


.submenu {
    display: none;
    position: absolute;
    top: 0;
    list-style: none;
    text-align: right;
    padding: 0 1vw 0 0;
}

.menu-item:nth-child(2) .submenu {
    width:15vw;
    right:100%;
    top:-6vw
}

.menu-item:nth-child(4) .submenu {
    width:22vw;
    right:100%;
    top:-5vw;
}

.menu-item:nth-child(5) .submenu {
    width:10vw;
    right:100%;
    top:-1vw;
}

.menu-item:nth-child(7) .submenu {
    width:15vw;
    right:100%;
    top:-3vw;
}


/* 鼠标悬停在一级目录时显示二级目录 */
.menu-item:hover .submenu {
    display: block;
}

/* 二级目录项样式 */
.submenu-item{
    font-size: 2vw;
    margin:0;
    padding: 2%;
}


.submenu-item a {
    color:rgb(223,243,236);
    text-decoration: none;
}

.menu-item a:hover {
    color: rgb(58, 58, 141);
}

.submenu-item a:hover {
    color: rgb(58, 58, 141);
}

/* 当屏幕宽度小于高度时应用的样式 */
@media (max-aspect-ratio: 1/1) {
  .menu {
    background-size: 100% auto; 
  }
  .menu-circle{
    width: 150vw;
    height: 150vw;
    top: -80vw;
    right: -80vw;
    border-radius: 35%;
  }
  .menu-list{
    right:20vw;
  }
}

/* 针对宽度大于高度的设备的样式 */
@media (min-aspect-ratio: 1/1) {
  .menu {
    background-size: cover; 
  }
  .menu-circle {
    width: 160vw;
    height: 160vw;
    top: -85vw;
    right: -80vw;
    border-radius: 40%;
  }
  .menu-list{
    left:40vw;
  }
}



#down-button{
    width:1.7vw;
    height:2.7vh;
    top:15vh;
    right:2.5vw;
    position: fixed;
    z-index: 11;
    opacity: 0;
}

#Scroll{
    width:1.7vw;
    top:15vh;
    right:3vw;
    position: fixed;
    z-index: 11;
    opacity: 0;
    color:rgb(32, 59, 103);
    font-size: 15px;
}