html, body {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#screensaver {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
}
#logout-button {
    float: right;
    margin-right: 20px;
}

#forum-img
{
	display:flex;
	transform:translate(95%,-15%);
	align-items:center;
}

#header {
    background: gray;
    width: 100%;
    height: 150px;
    color: white;
}
#footer {
    background: gray;
    width: 100%;
    height: 100px;
    position: absolute;
    color: white;
}
#loading-spinner {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50vw - 50px);
    top: calc(50vh - 50px);
    animation: loadingSpin 2s infinite linear;
}
.loading-close {
    display: block !important;
    animation-name: loadingClose;
    animation-duration: 1s;
}
.loading-open {
    display: none !important;
    animation-name: loadingOpen !important;
    animation-duration: 1s;
}
#error-container {
    background: rgba(255, 0, 0, 0.8);
    width: 600px;
    height: 150px;
    position: absolute;
    left: calc(50vw - 300px);
    top: calc(50vh - 75px);
    color: white;
    text-align: center;
    display: none;
}
.error-visible {
    animation-name: errorVisible;
    animation-duration: 1s;
    display: block !important;
}
#door-left, #door-right {
    position: absolute;
    background: rgb(85, 85, 85);
    width: 50vw;
    height: 100vh;
}
#door-left:not(.door-left-open) {
    left: 0vw;
}
#door-right:not(.door-right-open) {
    left: 50vw;
}
.door-left-open {
    left:  -50vw;
    animation-name: doorLeftOpen;
    animation-duration: 1s;
}
.door-right-open {
    left: 100vw;
    animation-name: doorRightOpen;
    animation-duration: 1s;
}
.door-left-close {
    left:  0vw;
    animation-name: doorLeftClose;
    animation-duration: 1s;
}
.door-right-close {
    left: 50vw;
    animation-name: doorRightClose;
    animation-duration: 1s;
}
.door-left-prank {
    left: 0vw;
    animation: doorLeftClose 5s linear;
    background-image: url(../assets/diamond_tread.jpg) !important;
}
.door-right-prank {
    left: 50vw;
    animation: doorRightClose 5s linear;
    background-image: url(../assets/diamond_tread.jpg) !important;
}
#content, #content-area {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100vh;
}

@keyframes loadingOpen {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes loadingClose {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes loadingSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes errorVisible {
    0% {
        opacity: 0.0;
        width: 900px;
        height: 225px;
        left: calc(50vw - 450px);
        top: calc(50vh - 112px);
    }
    100% {
        opacity: 0.9;
        width: 600px;
        height: 150px;
        left: calc(50vw - 300px);
        top: calc(50vh - 75px);
    }
}
@keyframes doorLeftOpen {
    0% {
        left: 0vw;
    }
    100% {
        left: -50vw;
    }
}
@keyframes doorLeftClose {
    0% {
        left: -50vw;
    }
    100% {
        left: 0vw;
    }
}
@keyframes doorRightOpen {
    0% {
        left: 50vw;
    }
    100% {
        left: 100vw;
    }
}
@keyframes doorRightClose {
    0% {
        left: 100vw;
    }
    100% {
        left: 50vw;
    }
}