@import url('https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Montaga&display=swap');

/* *,
* {
    margin: 0;
    padding: 0;
} */

body {
    text-align: center;
    /* animation: 3s animatebottom 3s linear forwards; */
    background-color: #101216;
    background-image: url("https://www.transparenttextures.com/patterns/black-linen.png");
}

/* #loader {
    /* position: absolute; */
    /* min-width: 1920px;
    min-height: 100%;
    background-color: #2c1515;
    background-image: url(./images/svgid.svg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
} */ 


/* Add animation to "page content" */

.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }
    to {
        bottom: 0px;
        opacity: 1;
    }
}

@keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}

#myDiv {
    display: none;
    text-align: center;
}

.header {
    position: relative;
    width: 100%;
    height: 10%;
    font-size: 150% !important;
    padding-top: 4%;
    color: #ffffff;
    text-align:right;
    text-decoration: none;
    background-color: #000000;
    
text-decoration-line: none; 
    z-index: 2;
    box-shadow: 0px 25px 20px 15px rgba(0, 0, 0, 0.6);
}

header a::after , a::before, a:visited {
    color: #ffffff;
}
textarea {
    width: 17.7%;
    min-height: 200px;
    border: 0 none white;
    overflow: hidden;
    padding: .4%;
    margin: .4%;
    left: 0;
    border: 3px solid #000000;
    outline: 1px solid #03cdff;
    color: rgba(255, 255, 255, 10000);
    background: #111111;
    -moz-transition: width .3s;
    -webkit-transition: width .3s;
    transition: width .3s;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 2);
    z-index: 1;
}

iframe {
    bottom: 0;
    position: relative;
    width: 97%;
    color: #ffffff;
    height: 50em;
    margin-left: 5px;
    background-color: #111111;
    border: 3px solid #000000;
    outline: 1px solid #333333;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 2);
    z-index: -1;
}

title {
    margin-top: 0px;
    width: 100%;
    height: 5%;
    display: block;
    position: relative;
    float: left;
    font-family: 'Montaga', serif;
    font-size: 16px;
    color: #ffffff;
    background-color: #050505;
    border-bottom: 2px #ffffff solid;
    padding: 5px;
    z-index: 3;
}
.container::before, .container::after {
    content:"";
    display:table;
}
.container::after {
    clear:both;
}
.container {
    zoom:1; 
}
/* For IE 6/7 (trigger hasLayout) */


::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background: transparent;
    border-radius: 3ex;
}

::-webkit-scrollbar:hover {
    background: #e6e6e6;
}

::-webkit-scrollbar-track {
    display: none;
}

::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 1pxz;
    border: 2px solid #000000;
}

::-webkit-scrollbar-thumb:hover {
    background: #7a7a7a;
    border: none;
}

::-webkit-scrollbar:hover {
    background: #414141;
    border: none;
}

textarea:invalid:hover {
    border: 2px dashed red;
}

textarea {
    border: 3px solid #000000;
    outline: 1px solid #333333;
}