@font-face { font-family: 'Header'; src: url('headerFont.ttf');}
@font-face { font-family: 'Tahoma'; src: url('tahoma.ttf');}
@font-face { font-family: 'DIGIT'; src: url('DIGIT.ttf');}
* {box-sizing: border-box; font-family: 'Tahoma', Arial;}
html, body {font-size: 62.5%; padding: 0; margin: 0; overflow: clip; background: #000;}
body {display: grid; width: 100vw; align-items: stretch; justify-items: stretch; font-size: 2.1rem;}
#matrixCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; background: #000;   }
.hidden { display: none !important; }
.zoomIn {animation: zoomIn .6s normal cubic-bezier(0.68,-0.55,0.27,1.55) forwards; }
.zoomOut {animation: zoomOut .6s normal cubic-bezier(0.68,-0.55,0.27,1.55) forwards;}

header {position: relative; width: 100%; display: inline-flex; justify-content: space-between; align-items: center; color: #e2ad00;}
#logo  {font-family: 'Header'; background: #000; border-radius: 15px;}

nav {position: relative; width: 100%; display: inline-flex; align-items: center; padding-inline: 1.5rem; gap: 1.5rem;}

nav a, .controls > button {position: relative; display: inline-flex; height: 90%; padding-inline: 1.5rem; align-items: center; background: #000000ad; color: #e2ad00;
        text-decoration: none; border-radius: 15px; border: 2px solid #e2ad00; transition: all .2s linear; }

main {position: relative; background-color: #000000b0; color: #e2ad00; overflow-x: clip; overflow-y: scroll;}

aside {position: relative; height: 100%; padding: 1rem .5rem; display: flex; flex-direction: column; align-items: center;}

footer {position: fixed; display: flex; flex-direction: column; justify-content: center; background-color: #000; color: #e2ad00;}
footer > * {position: relative; display: inline-flex; justify-content: space-evenly; align-items: center;}
/*  ##############################################################                  STYLES      */

h1, h2, h3, h4, h5, h6 {position: relative; margin: .6rem 0; font-family: 'Header'; font-weight: 400; border-radius: 25px; background: #000; 
    border-radius: 0 0 15px 0; border-bottom: 1px solid #e2ad00; padding-right: 1rem; }

hr {height: 2px; width: 100%; margin: 1rem 0; border:none; background-color: #e2ad00;}
time {position: relative;}

p {background: #000;}

#asideBtn   {display: none;}
#logoutBtn  {border: none;}
#endGame {background-image: url('../img/close.svg'); background-size: contain; aspect-ratio: 1/1;}

article > div:first-child {width: 100%; display: inline-flex; align-items: center; justify-content: space-between;}

#visits, .userInfo {width: 60%; padding: .5rem; display: grid; justify-items: center; grid-template-columns: 1fr 1fr; border: 1px solid #e2ad00; color: #e2ad00;
         font-size: 1.7rem; border-radius: 10px;}
#visits {margin: auto auto 1em auto;}
.twoCols {grid-column: 1 / -1; justify-self: center;}

/*  ##############################################################                  *   ::BEFORE-ELEMENTS      */

h1::before, h2::before, footer::before {
    position: absolute; top:0; left:0;width:100%;height:100%; content:''; background-image: url(../img/bg.svg); background-color: #e2ad00; 
    animation: navBg 60s infinite linear;}

/*  ##############################################################                  FORMS | INPUTS | BUTTONS      */

input {padding: .2rem 1rem;}
input[type="checkbox"] {display: none;}
input, button, select { display: inline-flex; min-width: 35px; min-height: 35px; color: #e2ad00; background: #000;
    outline: none; border-radius: 10px; border: 1px solid #e2ad00; }

a, button, label {display: inline-flex; align-items: center; gap: 1em; color: #e2ad00;}

.switch {position: relative; display: inline-block; width: 70px; height: 34px; border-radius: 17px; border: 1px solid #e2ad00; }
.toggle {position: absolute; top: 0; background-size: cover; width: 32px; height: 32px; border-radius: 50%; animation: toggleOFF .6s cubic-bezier(0.68,-0.55,0.27,1.55) forwards;}
input[type="checkbox"]:checked ~ .switch > .toggle {animation: toggleON .6s cubic-bezier(0.68,-0.55,0.27,1.55) forwards;}

form {display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 1rem;}
form:invalid > input[type="submit"],form:invalid > button {color: #808080; border: 1px solid #808080;}

@keyframes navBg {
    from {background-position: 0vw 50%;}
    to   {background-position: 100vw 50%;}
}

@keyframes zoomIn {         /*       animation-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55);     */
  0% { display: none;}
  1% { transform: scale(.3); opacity: 0;}
  100% { transform: scale(1); opacity: 1; }
}

@keyframes zoomOut {      /*      animation-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55);      */
  0% { transform: scale(1); opacity: 1; }
  99% { transform: scale(.3); opacity: 0; }
  100% { display: none;}
}

@keyframes toggleOFF {
  0% {left: 35px; transform: scale(1); opacity: 1; background-image: url('../img/correct.svg');}
  100%   {left: 2px; transform: scale(1); opacity: 1; background-image: url('../img/wrong.svg');}
}

@keyframes toggleON {
  0%   {left: 2px; transform: scale(1); background-image: url('../img/wrong.svg');}
  100% {left: 35px; transform: scale(1); opacity: 1; background-image: url('../img/correct.svg');}
}