#modal_backing {
    height:100vh;
    width:100%;
    background:rgba(0, 0, 0, 0.479);
    position:fixed;
    top:0px;
    left:0px;
    z-index: 4000;
    text-align: center;
}
#log_in {
    width:450px;
    background:#393939;
    border-radius: 5px;
    padding:40px;
    box-sizing: border-box;
    color:rgb(9, 219, 247);
}
#login input {
    width:100%;
    box-sizing: border-box;
    padding:10px;
    margin: 10px 0px;
    font-family: scifi;
}
#login button {
    width: 100%;
    padding:10px;
    font-family:scifi;
    font-size:20px;
    cursor:pointer;
    transition-duration: 0.2s;
    margin-top:20px;
    background-color:rgb(9, 219, 247);
    color:rgba(0, 0, 255, 0.422);
    border:none;
    border-radius: 5px;
}
#login button:hover {
    transform:translateY(-5px);
    transition-duration: 0.2s;
    background:rgb(7, 172, 193);
}
#log_in h1 {
    margin-top:0px;
}
.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Loader */
.loader {
    position: fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:rgb(0,27,38);
    transition:opacity 0.75s, visibility 0.75s;
    z-index: 5000;
}

.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

.loader::after {
    content:"";
    width:75px;
    height:75px;
    border:15px solid white;
    border-top-color: rgb(7, 172, 193);
    border-radius:50%;
    animation: loading 0.75s ease infinite;
}

@keyframes loading {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}