#settings {
    position: absolute;
    top: -150%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50vh;
    height: 52vh;
    padding: 3vh 7vh;
    opacity: 0.9;
    z-index: 100;
    transition: top 0.5s ease;
    filter:
        drop-shadow(0 0 1.8vh rgba(82, 216, 255, 0.55));
}

#settings > * {
    position: relative;
    z-index: 101;
}

#settings::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to right, rgba(82, 216, 255, 0.7) 0%, rgba(31, 92, 196, 0.758) 100%);
    clip-path: polygon(
        10% 0,
        90% 0,
        100% 10%,
        100% 90%,
        90% 100%,
        10% 100%,
        0 90%,
        0 10%
    );
    pointer-events: none;
}

#settings::after {
    content: '';
    position: absolute;
    inset: 0.4vh;
    z-index: 1;
    background-color: rgb(6, 23, 56);
    clip-path: polygon(
        10% 0,
        90% 0,
        100% 10%,
        100% 90%,
        90% 100%,
        10% 100%,
        0 90%,
        0 10%
    );
    pointer-events: none;
}


#settings.open {
    top: 50%;
}

#settings h1 {
    position: relative;
    text-align: center;
    font-size: 3vh;
    letter-spacing: 0.8vh;
    color: white;
}

#settings h2 {
    position: relative;
    margin: 11% 0 1% 0;
    font-size: 2.1vh;
    letter-spacing: 0.2vh;
    color: white;
}

#settings h3 {
    position: relative;
    margin-bottom: 2%;
    font-size: 1.8vh;
    letter-spacing: 0.2;
    color: white;
    text-align: center;
}

#settings .line {
    background-color: rgba(68, 105, 179, 0.6);
    border-radius: 50%;
    height: 0.4%;
    width: 100%;
    margin-bottom: 6%;
}

#settings #audioUI {
    height: 25%;
    margin: 0 auto 8% auto;
    display: grid;
    grid-template-rows: 1fr 1fr;
    row-gap: 1vh;
}

#settings #audioUI > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.2vh;
}

#settings #audioUI .audioIcon {
    width: 4.6vh;
    height: 4.6vh;
    flex: 0 0 4.6vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#settings #audioUI .audioIcon svg {
    width: 100%;
    height: 100%;
    display: block;
}

#settings #audioUI .audioLabel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 2.1vh;
    letter-spacing: 0.2vh;
    padding-left: 1vh;
}

#settings .slider {
    position: absolute;
    right: 3%;
    width: 47%;
    height: 7%;
    border-radius: 1vh;
    background-color: #8accff;
    touch-action: none;
    cursor: pointer;
}

#settings .slider .sliderKnob {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 2.3vh;
    height: 2.3vh;
    border-radius: 50%;
    border: 0.2vh solid #0f3f63;
    background: #b6dfff;
}

#settings #closeSettings {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3vh;
    width: 18vh;
    height: 5.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2vh;
    letter-spacing: 0.2vh;
    cursor: pointer;
    user-select: none;
    transition: bottom 0.1s ease;
}

#settings #closeSettings::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    clip-path: polygon(
        1.5vh 0,
        calc(100% - 1.5vh) 0,
        100% 1.5vh,
        100% calc(100% - 1.5vh),
        calc(100% - 1.5vh) 100%,
        1.5vh 100%,
        0 calc(100% - 1.5vh),
        0 1.5vh
    );
    background: linear-gradient(to right, rgb(40, 78, 153) 0%, rgb(11, 38, 88) 100%);
    pointer-events: none;
    
}

#settings #closeSettings:hover {
    bottom: 3.5vh;
}