@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');
}

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

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

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

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

@font-face {
    font-family: 'silkscreenb';
    src: url('silkscreenb.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;
    /* background-color: #e5e5f7; */
    /* opacity: 0.8; */
    background-image: linear-gradient(45deg, #181e31 50%, #1a2034 50%);
    background-size: 100px 100px;
    color: #d2ddff;
}

.header {
    font-family: 'silkscreen';
    font-size:50pt;
    line-height:1.1;
    text-align: center;
    margin-top:20px;
    margin-left:70px;
    margin-right:70px;
    margin-bottom:20px;
}
.subheader {
    font-family: 'nunito';
    font-size:22pt;
    text-align: center;
    margin-bottom:20px;
    border-top:5px white solid;
    padding:20px;
    padding-top:30px;
    line-height:1;
}
.container {
    /* background-color: #3b4976; */
    background-image:  linear-gradient(#547cff 2px, transparent 2px), linear-gradient(to right, #6c8eff 2px, #4361c4 2px);
    background-size: 20px 20px;
    /* background-position: 0 0, 0 0, 20px 36px, 20px 36px, 0 0, 20px 36px; */
    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;
    transition: all .2s ease-in-out;
}

.container-inner {
    background-color:#000000c0;
    padding-top:10px;
    padding-bottom:10px;
}

.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;
}

.checkbox-custom {
    background-color:#4361c4;
    float:right;
    margin-top:13px;
    margin-right:10px;
}

.checkbox-text {
    float:right;
    margin-top:12px;
    margin-right:20px;
    font-family: 'hack';
    font-size:10pt;
}

.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:30px;
    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 - 126px );
    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::placeholder {
    color: #5a6cb3;
}

#name::placeholder {
    color: #3A4773;
}

/* #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;
} */

#editor {
    cursor: auto;
    overflow:auto;
    text-align: justify;
    font-family: 'hack';
}

#editor::-webkit-scrollbar {
    background-color:#181d30;
    width: 10px;
    border:0px white solid;
    border-radius:10px;
    margin-bottom:10px;
    margin-top:10px;
}
#editor::-webkit-scrollbar-track-piece {
    background-color:#1f2641;
    width: 10px;
    border:0px white solid;
    border-radius:10px;
    margin-bottom:10px;
    margin-top:10px;
}
#editor::-webkit-scrollbar-thumb {
    background-color:#252d4b;
    border:0px white solid;
    border-radius:10px;
    width: 8px;
    transition: background-color .2s ease-in-out;
}
#editor::-webkit-scrollbar-thumb:hover {
    background-color:#333f6a;
    border:0px white solid;
    border-radius:10px;
    width: 8px;
}
#editor::-webkit-scrollbar-corner {
    margin-bottom:10px;
    margin-top:10px;
}

/* material design */

.material-button-toggle {
    border: 0px white solid;
    border-radius:10px;
    background-color: #3A4773;
    color: white;
    transition: all .2s ease-in-out;
    width:fit-content;
    margin:0;
    padding:20px;
    padding-top:10px;
    padding-bottom:10px;
    cursor:pointer;
    /* width:22pt; */
    /* height:22pt; */
    display:inline-block;
    font-family: 'hack';
    font-size:10pt;
}
.material-button-toggle-on {
    border: 0px white solid;
    border-radius:10px;
    background-color: #819DFF;
    color: black;
    transition: all .2s ease-in-out;
    width:fit-content;
    margin:0;
    padding:20px;
    padding-top:10px;
    padding-bottom:10px;
    cursor:pointer;
    /* width:22pt; */
    /* height:22pt; */
    display:inline-block;
    font-family: 'hack';
    font-size:10pt;
}

.material-button-toggle-on-force {
    border: 0px white solid;
    border-radius:10px;
    background-color: #fff;
    color: black;
    transition: all .2s ease-in-out;
    width:fit-content;
    margin:0;
    padding:20px;
    padding-top:10px;
    padding-bottom:10px;
    cursor:not-allowed;
    /* width:22pt; */
    /* height:22pt; */
    display:inline-block;
    font-family: 'hack';
    font-size:10pt;
}

.material-button-toggle:hover {
    background-color: #819DFF;
    color: black;
}
.material-button-toggle > i {
    display:inline-block;
    margin:auto;
    text-align: center;
    margin-right:10px;
}
.material-button-toggle-on > i {
    display:inline-block;
    margin:auto;
    text-align: center;
    margin-right:10px;
}
.material-button-toggle-on-force > i {
    display:inline-block;
    margin:auto;
    text-align: center;
    margin-right:10px;
}
.material-editor-box {
    background-color: #161C2E;
    height:calc(100vh - 80px);
    margin: 30px;
    padding-bottom:10px;
    border: 0px white solid;
    border-radius:10px;
}
.material-editor-topbar {
    background-color: #1B2338;
    padding:10px;
    border: 0px white solid;
    border-radius:10px;
}
.material-editor-name {
    background-color: #1B2338;
    border: 2px #819DFF solid;
    border-radius:10px;
    padding:20px;
    padding-top:8px;
    padding-bottom:8px;
    padding-left:36px;
    font-family: 'hack';
    font-size:10pt;
    color:#819DFF;
    width:300px;
    transition: all .2s ease-in-out;
    outline: none;
}
.material-editor-name:focus {
    /* outline: 2px solid #819DFF; */
    background-color:#819DFF;
    color:black;
}

.material-editor-name-force {
    background-color: #1B2338;
    border: 2px #819DFF solid;
    border-radius:10px;
    padding:20px;
    padding-top:8px;
    padding-bottom:8px;
    padding-left:36px;
    font-family: 'hack';
    font-size:10pt;
    color:#819DFF;
    width:300px;
    transition: all .2s ease-in-out;
    outline: none;
}
.material-editor-name-force:hover {
    /* outline: 2px solid #819DFF; */
    background-color:#819DFF;
    color:black;
}

.material-editor-textbox {
    margin-top:20px;
}
.material-editor-textbox > #editor {
    padding:20px;
    margin:auto;
    display:block;
    width:calc(100% - 80px);
    height: calc(100vh - 210px);
    resize:none;
    border:0px white solid;
    border-radius:10px;
    background: #161C2E;
    color:#819DFF;
    font-size:12pt;
    outline: 2px solid #161C2E;
    transition:all .2s ease-in-out;
}
.material-editor-textbox > #editor:focus {
    outline: 2px solid #819DFF;
}

.material-editor-name-div {
    max-width: fit-content;
    float:left;
    margin-right: 5px;
}

.material-editor-name-div > i {
    position:absolute;
    color: #3A4773;
    margin-top:10px;
    margin-left:15px;
}

.material-editor-textbox > #editor > a {
    color: #819DFF;
    /* font-size:10pt; */
    /* font-family: 'hack'; */
    text-decoration: underline;
    /* display:block; */
}

.error {
    background-color: #252d4b;
    padding:10px;
    font-size:16pt;
    color:white;
    font-family:'hack';
    margin:10px;
}

/* responsive design */

@media only screen and (max-width:860px) {
    .container {
        /* background-color: #3b4976; */
        background-image:  linear-gradient(#547cff 2px, transparent 2px), linear-gradient(to right, #6c8eff 2px, #4361c4 2px);
        background-size: 20px 20px;
        /* background-position: 0 0, 0 0, 20px 36px, 20px 36px, 0 0, 20px 36px; */
        border: 5px #87a5ff solid;
        border-radius: 0px;
        max-width:600px;
        width:600px;
        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;
    }
    .header {
        font-size:26pt;
        margin-left:20px;
        margin-right:20px;
    }
    .button {
        font-size:12pt;
    }
    .button:hover {
        background-color: #4b5c99;
        border: 2px #87a5ff solid;
        cursor:pointer;
        padding-left:30px;
        padding-right:30px;
        padding-top:13px;
        padding-bottom:10px;
    }
    .subheader {
        font-size:16pt;
    }
    .credits {
        font-family: 'pasti';
        font-size:10pt;
        text-align: left;
        margin:5px;
        position:absolute;
        font-style:italic;
    }
    .alert {
        font-size:10pt;
    }
    @keyframes slidein {
        0% {
            transform: translateY(500%);
        }
        10% {
            transform: translateY(-100%);
        }
        90% {
            transform: translateY(-100%);
        }
        100% {
            transform: translateY(500%);
        }
    }
}

@media only screen and (max-width:790px) {
    .container {
        /* background-color: #3b4976; */
        background-image:  linear-gradient(#547cff 2px, transparent 2px), linear-gradient(to right, #6c8eff 2px, #4361c4 2px);
        background-size: 20px 20px;
        /* background-position: 0 0, 0 0, 20px 36px, 20px 36px, 0 0, 20px 36px; */
        border: 5px #87a5ff solid;
        border-radius: 0px;
        max-width:300px;
        width:300px;
        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;
    }
    .header {
        font-size:26pt;
        margin-left:20px;
        margin-right:20px;
    }
    .button {
        font-size:12pt;
    }
    .button:hover {
        background-color: #4b5c99;
        border: 2px #87a5ff solid;
        cursor:pointer;
        padding-left:30px;
        padding-right:30px;
        padding-top:13px;
        padding-bottom:10px;
    }
    .subheader {
        font-size:16pt;
    }
    .credits {
        font-family: 'pasti';
        font-size:10pt;
        text-align: left;
        margin:5px;
        position:absolute;
        font-style:italic;
    }
    .alert {
        font-size:10pt;
    }
    @keyframes slidein {
        0% {
            transform: translateY(500%);
        }
        10% {
            transform: translateY(-100%);
        }
        90% {
            transform: translateY(-100%);
        }
        100% {
            transform: translateY(500%);
        }
    }
}
@media only screen and (max-height:600px) {
    .header {
        max-width:800px;
    }
    .container {
        transform: scale( 0.75 );
        margin-top:-30px;
        margin-bottom:0px;
    }
}