html
{
    height: 100%
}

body
{
    height: 100%;
    overflow: hidden;
    filter: invert(0);
}

#warningcontainer
{
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
}

#warningbox
{
    border: 4px solid white;
    background-color: black;
    position: relative;
    width: fit-content;
    height: fit-content;
}

#warningclose
{
    position: absolute;
    border: 4px solid white;
    background-color: black;
    display: flex;
    width: 44px;
    height: 44px;
    cursor: pointer;
    top: 8px;
    right: 8px;
}

#warningclose:hover {background-color: red;}

#warning
{
    margin: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 27px;
    user-select: none;
}

.icon
{
    position: absolute;
    width: 70px;
    height: 70px;
    margin: 20px;
    user-select: none;
}

.icon span
{
    display: flex;
    width: 100%;
    height: 100%;
}

#back
{
    left: 0;
}

#about
{
    right: 0;
}

#aboutbutton
{
    width: 100%;
    height: 100%;
}

#memorybanksupercontainer
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#memorybankcontainer
{
    display: flex;
    justify-content: center;
    align-items: end;
}

#machineregion
{
    background-image: url(../images/memorybank/machine.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    width: 600px;
    height: 400px;
    display: flex;
    justify-content: end;
    align-items: end;
}

#machinebody
{
    width: 440px;
    height: 290px;
    display: flex;
}

.machinetextcontainer
{
    width: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.machinetextmarquee
{
    width: 28px;
    height: 240px;
    font-family: IBM;
    font-size: 16px;
    border: 4px solid white;
    display: flex;
    writing-mode: vertical-lr;
    margin-top: 6px;
    overflow: hidden;
    user-select: none;
}

.machinetextmarqueecontent
{
    white-space: nowrap;
    animation: vertical-scroll 4s linear infinite;
    position: relative;
    min-width: 100%;
    display: flex;
    margin-left: -1px;
}

.machinetextmarqueecontent.fast
{
    animation: vertical-scroll 1s linear infinite;
}

@keyframes vertical-scroll {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-100%);
    }
}


.inverted
{
    rotate: 180deg;
}

#machineinterface
{
    width: 100px;
    display: flex;
    flex-direction: column;
}

#machineinterfacetop
{
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: end;
}

#leverspace
{
    width: 92px;
    height: 162px;
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 4px;
}

#leverimg
{
    width: 92px;
    user-select: none;
}

#reallever
{
    height: 100%;
    width: 70px;
    position: absolute;
    right: 0;
}

#machineinterfacebottom
{
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: start;
}

#output
{
    width: 76px;
    height: 24px;
}

#chairregion
{
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    user-select: none;
}

#meguy
{
    display: flex;
    margin-bottom: 16px;
}

#aboutbox
{
    width: 500px;
    position: absolute;
    top: 120px;
    right: 20px;
    border: 4px solid white;
    background-color: black;
    padding: 0 20px 20px;
    visibility: hidden;
}
#aboutbox.open
{
    animation: about-drop-in 0.2s ease-out;
    visibility: visible;
}
#aboutbox.closed
{
    animation: about-drop-out 0.2s ease-out;
}

#aboutowow
{
    display: none;
}

@keyframes about-drop-out {
    from {
      visibility: visible;
      right: 20px;
      opacity: 1;
    }
    to {
      visibility: hidden;
      right: -510px;
      opacity: 0;
    }
}

@keyframes about-drop-in {
    from {
      visibility: hidden;
      right: -510px;
      opacity: 0;
    }
    to {
      visibility: visible;
      right: 20px;
      opacity: 1;
    }
}

/* stuff that doesn't initially exist */

#outputcontainer
{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
    top: 0;
}

#outputbackground
{
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.6;
    animation: fade-in 1s ease-out;
}

#outputcard
{
    display: flex;
    border: 4px solid white;
    background-color: black;
    position: absolute;   
    top: 50%;   
    left: 50%;  
    transform: translate(-50%, -50%);
    z-index: 100;
    animation: drop-fade-in 1s ease-out;
    cursor: pointer;
}

@keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.6;
    }
}

@keyframes drop-fade-in {
    from {
      top: 60%;
      opacity: 0;
    }
    to {
      top: 50%;
      opacity: 1;
    }
}

#outputtext
{
    width: 800px;
    font-size: 27px;
    margin: 20px;
    user-select: none;
}