@import 'fonts.css';
#UI {
    z-index:            20;
    position:           fixed;
    width:              96vw;
    height:             96vh;
    margin:             0;
    box-sizing:         border-box;

    display:            flex;
    flex-direction:     column;

    top:                2vh;
    left:               2vw;

    border:             0.2cqw solid red;
    border-image:       linear-gradient(20deg, white 20%, rgba(255, 255, 255, 0.3), white 80%) 1;

    padding:            0.5%;
    gap:                0.5%;

    box-shadow:         0 0 4px 40vW rgba(0, 0, 0, 0.6);
    font-family:        mono;
    pointer-events:     none;
}
#UI > ul {
    display:            flex;
    flex-direction:     row;
    justify-content:    space-between;

    height:             2%;
    min-height:         1.2cqw;

    margin:             0;

    background:         linear-gradient(10deg, white, rgba(255, 255, 255, 0.8), white 80%);
    color:              black;
}
#UI > ul > li {
    display:            block;
    width:              32%;
    font-size:          0.8cqw;
    pointer-events:     all;
    text-align:         center;

    cursor:             pointer;
    transition:         color 0.3 ease;
}
#UI > ul > li:hover     {
    color:              rgb(168, 0, 42);
}
uidivider {
    flex-grow:          1;
    border:             0.1cqw solid rgba(255, 255, 255, 0.05);
}
uihead {
    text-shadow:        0 0 10px black;
    background-color:   rgba(22, 21, 21, 0.4);
    width:              fit-content;
    cursor:             pointer;
    font-size:          1cqw;
    pointer-events:     all;
}
#popupf11 {
  font-size:      1cqw;
  position:       absolute;
  top:              0;
  right:            0;     
  animation-name: popupych;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes popupych{
    from{color:transparent;}
    25%{color:white;}
    75%{color:white;}
    to{display:none;color:transparent}
}