html, body { height: 96%; }
header { width: 97%; margin: 0 auto; height: 7.5%; }
@font-face { font-family: Staatliches; src: url('../../../fonts/Staatliches/Staatliches-Regular.ttf'); }
@font-face { font-family: Heebo; src: url('../../../fonts/Heebo/Heebo-Regular.ttf'); }
.font03 { font-family: Heebo; }
.font01 { font-family: Staatliches; }
.login-top-title { font-size: 2.5em; position: relative; top: -15px; left: 1px; opacity: 0.8; }
#top-title { position: absolute; top: 20px; left: 28px; opacity: 0.80; display: flex; justify-content: space-between; }
#login-panel { width: 300px; height: 245px; background-color: rgba(255,255,255,0.825); border-radius: 0.2rem; position: relative; top: 50%; left: 50%; transform: translateX(-50%); }
#login-panel form { height: 100%; padding: 7.5% 7.5% 5% 7.5%; }
div.checkbox { font-size: 0.9em; margin-left: 10px; }
/* background-image === base.html.twig */
#backgroundImage { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; z-index: -1; }
#backgroundImage img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; }
button.btn { width: 100%; font-size: 1em; }
h4.font01 { text-align: center; margin-bottom: 5%; letter-spacing: 1.5px; }
div #signup { display: flex; justify-content: center; margin-top: 5%; }
.fewAnimated{ -webkit-animation-duration: 1000ms; -moz-animation-duration: 1000ms; animation-duration: 1000ms; }