TheBin/static/style.css

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

@font-face {
    font-family: 'charger';
    src: url('charger.otf');
}

@font-face {
    font-family: 'pasti';
    src: url('pasti.otf');
}

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

@keyframes flash {
    0% {
        color: #c1d1ff;
    }
    50% {
        color: #5f87ff;
    }
    100% {
        color: #c1d1ff;
    }
}

@keyframes slidein {
    0% {
        transform: translateY(500%);
    }
    10% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(500%);
    }
}

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

body {
    background-color: #1a2034;
    color: #d2ddff;
}

.header {
    font-family: 'newspaper';
    font-size:70pt;
    text-align: center;
    margin-top:20px;
}
.subheader {
    font-family: 'charger';
    font-size:25pt;
    text-align: center;
    margin-bottom:20px;
    border-top:5px white solid;
    padding:20px;
    padding-top:30px;
}
.container {
    background-color: #242d4a;
    border: 5px #87a5ff solid;
    border-radius: 0px;
    max-width:800px;
    width:800px;
    display:block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 10px rgba(210,221,255,1);
    -webkit-box-shadow: 10px 10px rgba(210,221,255,1);
    -moz-box-shadow: 10px 10px rgba(210,221,255,1);
    margin-bottom:80px;
}
.container-middle {
    display: table-cell;
    vertical-align: middle;
    height:min-content;
}
.container-external {
    display: table;
    width: 100%;
    height:100%;
    position: absolute;
}
.button {
    background-color: #2e395f;
    border: 2px #87a5ff solid;
    border-radius: 5px;
    padding-left:10px;
    padding-right:10px;
    padding-top:13px;
    padding-bottom:10px;
    display:block;
    transition: all .2s ease-in-out;
    width: fit-content;
    margin-bottom:20px;
    margin-top:-20px;
    font-family:'pasti';
    font-size:20pt;
    color:#d2ddff;
    font-style:normal;
    text-decoration: none;
}
.button:hover {
    background-color: #4b5c99;
    border: 2px #87a5ff solid;
    cursor:pointer;
    padding-left:30px;
    padding-right:30px;
    padding-top:13px;
    padding-bottom:10px;
}

.button-custom {
    background-color: #2e395f;
    border: 2px #87a5ff solid;
    border-radius: 5px;
    padding-left:20px;
    padding-right:20px;
    padding-top:2px;
    display:block;
    transition: all .2s ease-in-out;
    width: fit-content;
    font-family:'pasti';
    font-size:12pt;
    color:#d2ddff;
    height:min-content;
    margin-top:8px;
    float:right;
    margin-right:20px;
    margin-left:0px;
}
.button-custom:hover {
    background-color: #4b5c99;
    border: 2px #87a5ff solid;
    cursor:pointer;
    padding-left:30px;
    padding-right:30px;
    margin-right:10px;
    margin-left:-10px;
}

.button-custom-box {
    position:relative;
    display:block;
}

.credits {
    font-family: 'pasti';
    font-size:12pt;
    text-align: left;
    margin:5px;
    position:absolute;
    font-style:italic;
}
.editor-box {
    margin:10px;
    border: 2px #87a5ff solid;
    max-height:100%;
    border-radius:10px;
    background-color:#181d30;
}
.editor > textarea {
    width:max-content;
    resize: none;
    background-color:#181d30;
    border:none;
    color:#d2ddff;
    font-family:'hack';
    font-size:11pt;
    display: block;
    height:calc( 100vh - 86px );
    overflow-y:scroll;
    width:calc( 100% - 40px );
    padding:10px;
}

.editor > textarea:focus {
    outline:none;
}

.editor > textarea::selection {
    background-color:#5a6db7;
}
::-moz-selection {
    background-color:#5a6db7;
}
.editor-header {
    font-family:'pasti';
    font-size:12pt;
    max-height:40px;
    height:40px;
    border-bottom: 2px #87a5ff solid;
    background-color:#2a3253;
    border-radius:10px 10px 0px 0px;
}

.name-box > input {
    background-color:#2a3253;
    border: 1px #87a5ff solid;
    outline:none;
    font-size:12pt;
    margin-left:10px;
    margin-top:5px;
    border-radius:10px;
    padding:5px;
    color: #87a5ff;
    font-family: 'hack';
    width:50%;
    max-width:500px;
    min-width:100px;
    font-style:italic;
}

.id-box {
    float: right;
    margin-top:12px;
    margin-right:15px;
    font-size:10pt;
    font-family: 'hack';
}

#editor {
    scrollbar-base-color: #ffffff #ffffff;
}

.alert {
    background-color:#5f87ff;
    color: black;
    padding:10px;
    padding-left:20px;
    padding-right:20px;
    font-family: 'hack';
    font-size:12pt;
    text-align: center;
    margin-bottom:20px;
    border: 0px white solid;
    border-radius:10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absolute;
    z-index:10;
    bottom:0px;
    left:0px;
    right:0px;
    width:fit-content;
    pointer-events: none;
    animation-name: slidein;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-direction: normal;
}

/* #editor {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
} */

/* #editor::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom:10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-color: #0026ff;
    border-radius: 10px;
    z-index: 1000;
} */