/* ------------------------------ Polices ------------------------------ */

@font-face {
    font-family: "OCRAEXT";
    src: url("OCRAEXT.TTF");
}

/* ------------------------------ Général ------------------------------ */

html {
    font:100%/1 "OCRAEXT","Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    background-color: black;
    color:#00ff00;
    text-align:center;
    font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
    text-shadow: 3px 3px 6px #607d23;
}

body {
    text-align:center;
    vertical-align:middle;
    min-height: 100%;
    margin-left: 10%;
    margin-right: 10%;
}

div:not(#content_mail) div{
    margin:3vh auto;
}

a {
    color:white;
}

button {
    display: block;
    margin: auto;
    font:100%/1 "OCRAEXT","Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    color: #0f0;
    background-color: #000;
    border: 1px solid #0f0;
    text-shadow: 3px 3px 6px #607d23;
    margin-top:2vh;
    padding:25px;
    width:600px;
    height: 80px;
}

#button_mail {
    margin:2vh auto !important;
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    text-shadow: 3px 3px 6px #607d23;
    width:auto;
    height: auto;
}

button:hover {
    color:#000 !important;
    background-color:#0f0;
    cursor: pointer;
}

button:disabled {
    color:#007d00 !important;
    background-color:#000;
    border: 1px solid #007d00;
}

table button {
    background-color : black;
    font-size:1em;
    border-color: #0f0;
    color:#0f0;
    margin-top:0;
    padding:25px;
    width:100%;
    height: 100%;
}
/* ------------------------------ Logos ------------------------------ */

#logo_delta {
    height:30vh;
    margin: 2vh;
    -webkit-animation: flicker-in-1 2s linear both;
  	animation: flicker-in-1 2s linear both;
}

#logo_brigitte {
  font-size:6vw;
  color: #0F0;
  text-shadow: 0 0 1vh #0F0, 0 0 2vh #0F0;
}

/* ------------------------------ Inputs ------------------------------ */

#formulaire_brigitte input[type="text"] {
    background-color : black;
    font:2em "OCRAEXT","Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    border-color: #0F0;
    color:#0F0;
    text-transform: uppercase;
    height:10vh;
    line-height:10vh;
    text-align:center;
    margin:15px;
    width: 80vw;
}

#formulaire_brigitte textarea {
    background-color : black;
    font:0.7em "OCRAEXT","Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    border-color: #0F0;
    color:#0F0;
    text-align:left;
    margin:15px;
    width: 80%;
    min-height: 250px;
    outline: none;
    resize: none;
}

#formulaire_nest input[type="text"], #formulaire_nest input[type="date"] {
    font:100%/1 "OCRAEXT","Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    color: #0f0 !important;
    background-color: #000;
    border: 1px solid #0f0;
    margin:2vh auto;
    padding: calc(3px + (10 - 3) * ((100vw - 300px) / (1600 - 300)));
    text-shadow: 3px 3px 6px #607d23;
    text-transform: uppercase;
}

#formulaire_mail input[type="text"],#formulaire_mail input[type="password"] {
    font:100%/1 "OCRAEXT","Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    color: #0f0 !important;
    background-color: #000;
    border: 1px solid #0f0;
    margin:2vh auto;
    padding: calc(3px + (10 - 3) * ((100vw - 300px) / (1600 - 300)));
    font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
    text-shadow: 3px 3px 6px #607d23;
}

#formulaire_mail .input-group {
    text-align:right;
}

input[type="text"]:focus,input[type="date"]:focus {
    outline: 1px groove #8F8;
}

input[type="text"]::placeholder {
    font:100%/1 "OCRAEXT","Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    color: #aaffaa !important;
    height:10vh;
    line-height:10vh;
}

input[required] {
    border-color: #0f0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

select {
    font:100%/1 "OCRAEXT","Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    background-color: #000;
    color: #0f0;
    border: 1px solid #0f0;
    text-shadow: 3px 3px 6px #607d23;
}

/* ------------------------------ Divers ------------------------------ */

.reponse {
    background-color : black;
    border: 1px solid #0f0;
    font-size:15pt;
    width: 70vw;
    text-align: left;
    margin:auto;
    padding:15px;
}

.historique {
    background-color : black;
    border: 1px solid #0f0;
    font-size:15pt;
    width: 40vw;
    text-align: left;
    margin: 40px auto;
    padding:10px;
    border-style: dashed;
}

#retour {
    float:left;
    font-size: calc(20px + (40 - 20) * ((100vw - 300px) / (1600 - 300)));
    text-decoration:none;
    color : #0f0;
}

#fullscreen {
    float:right !important;
    font-size: calc(20px + (40 - 20) * ((100vw - 300px) / (1600 - 300)));
    text-decoration:none;
    color : #0f0;
    cursor: pointer;
}

#content_mail {
    max-width:40vw;
    min-height:20vh;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

fieldset {
    border-color: #0f0;
}

table, th, td {
    border: 1px solid #0f0;
    background-color:black;
    color:#0f0;
    margin:auto;
    text-align:center;
    text-shadow:none;
}

#accessgranted {
    background-color : black;
    border: 1px solid #0f0;
    font-size:15pt;
    width: 30vw;
    text-align: center;
    margin:auto;
    padding:15px;
}

.photos_ryan {
    width: auto;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.photo_erreur {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color : black;
    border: 1px solid #0f0;
    font-size:15pt;
    width: 30vw;
    text-align: center;
    margin:auto;
    padding:15px;
}


/* ------------------------------ @media ------------------------------ */

@media screen and (max-width: 900px) {
    button {
        font-size:20px;
        margin-top:20px;
        padding:15px;
        width:300px;
        height: 100px;
    }
    #logo_delta {
        height:20vh;
        margin: 2vh;
        -webkit-animation: flicker-in-1 2s linear both;
      	animation: flicker-in-1 2s linear both;
    }
}

/* ------------------------------ Animations ------------------------------ */

/* ----------------------------------------------
 * Generated by Animista on 2021-3-31 11:17:30
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * @animation flicker-in-1
 * ----------------------------------------
 */
@-webkit-keyframes flicker-in-1 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  10.1% {
    opacity: 0.1;
  }
  10.2% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  20.1% {
    opacity: 0.2;
  }
  20.6% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  30.1% {
    opacity: 0.3;
  }
  30.5% {
    opacity: 0.3;
  }
  30.6% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  45.1% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.5;
  }
  55% {
    opacity: 0.5;
  }
  55.1% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  57.1% {
    opacity: 0.6;
  }
  60% {
    opacity: 0.6;
  }
  60.1% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  65.1% {
    opacity: 0.7;
  }
  75% {
    opacity: 0.7;
  }
  75.1% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  77.1% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.8;
  }
  85.1% {
    opacity: 0;
  }
  86% {
    opacity: 0;
  }
  86.1% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flicker-in-1 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  10.1% {
    opacity: 0.1;
  }
  10.2% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  20.1% {
    opacity: 0.2;
  }
  20.6% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  30.1% {
    opacity: 0.3;
  }
  30.5% {
    opacity: 0.3;
  }
  30.6% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  45.1% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.5;
  }
  55% {
    opacity: 0.5;
  }
  55.1% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  57.1% {
    opacity: 0.6;
  }
  60% {
    opacity: 0.6;
  }
  60.1% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  65.1% {
    opacity: 0.7;
  }
  75% {
    opacity: 0.7;
  }
  75.1% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  77.1% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.8;
  }
  85.1% {
    opacity: 0;
  }
  86% {
    opacity: 0;
  }
  86.1% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}