@font-face {
    font-family: 'hack';
    src: url('hack.ttf');
}

@keyframes fade {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

* {
    margin: 0 auto;
    padding: 0;
}

body {
    background-color: #26272f;
    font-family: 'hack';
    padding:20px;
    font-size:12pt;
}

.title {
    font-size:20pt;
    color: #ffffff;
}

.backtitle {
    font-size:16pt;
    color: #ffffff;
}

.files {
    color: #ffffff;
    font-size: 20pt;
    padding:10px;
    margin-top:10px;
    background-color:#1d1e25;
}

a {
    color:#ffffff;
    transition: all .1s ease;
}

a:hover {
    color:#55ff8e;
}

.logout {
    color: #ff5c5c;
    transition: all .1s ease;
}

.logout:hover {
    color:#ff9999;
}

span {
    color:#ffffff;
}

video {
    width: 80vmax;
    margin: auto;
    position:absolute;
    display:block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    max-height:80vh;
    max-width:60vw;
    border:2px #55ff8e solid;
    background:black;
}

input {
    background-color: #2b2b3f;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 5px;
    padding: 10px;
    font-size: 16pt;
    margin-top:10px;
}

input[type="submit"] {
    background-color: #2b2b3f;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 5px;
    padding: 10px;
    font-size: 16pt;
    margin-top:10px;
    transition: all .1s ease;
}
input[type="submit"]:hover {
    background-color: #7575ff;
    color: #000000;
    border: 1px solid #ffffff;
    border-radius: 5px;
    padding: 10px;
    font-size: 16pt;
    margin-top:10px;
    cursor:pointer;
}

.error-fade {
    animation-name:fade;
    animation-duration:1s;
    animation-fill-mode:forwards;
}

.maintitle {
    font-size:20pt;
    color: #ffffff;
    text-align:center;
}

@media only screen and (max-width:600px) {
    video {
        max-height: 70vh;
        max-width: 90vw;
    }
    .maintitle {
        text-align:right;
        font-size:13pt;
    }
}