body{
    /* width: 100vw;
    height: 100vh; */
    background-color: black;
    overflow-x: hidden;
    font-family: "Alumni Sans", sans-serif;
    letter-spacing: .2em;
    font-size: 1.3em;
}

#loadingscreen{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    height: 100%;
}

.fa-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    display: block;
    z-index: 1000;
    animation: spin 2s linear infinite;
    color: white;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


#line1, #line2, #line3{
    position: absolute;
    z-index: 1;
    font-size: 4em;
    color: white;
}

#line1{
    top: 200px;
    left: 200px;
}

#line2{
    top: 300px;
    left: 300px;
}

#line3{
    top: 400px;
    left: 400px;
}

#myVideo{
    width: 100%;
    height: 100%;
    filter: contrast(120%);
}

.fa-expand{
    color: white;
    font-size: 1.5em;
    cursor: pointer;
}

#controls{
    top: 20px;
    right: 20px;
    z-index: 1;
    position: fixed;
    display: flex;
    gap: 24px;
    align-items: center;
}

input{
    width: 200px;
}

label{
    color: white;
}

.jiggle{
    opacity: 1;
    animation: jiggle 10s ease infinite alternate-reverse;
    transition: all ease;
}

@keyframes jiggle {
    0% {
      transform: translate(0);
      filter: blur(0px);
    }
    50% {
      transform: translate(-10px, -12px);
      filter: blur(1px);
    }
    75% {
      transform: translate(10px, 4px);
      filter: blur(0px);
    }
    100% {
      transform: translate(-6px, 8px);
      filter: blur(1px);
    }
}

.showing{
    opacity: 1;
}

.hidden{
    opacity: 0;
}