* {
margin: 0;
padding: 0;
}
body {
    background-image: url('/imgs/home-back.jpg');
    background-color: black; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    min-height: 100vh; 
    margin: 0;
}

header {
    position: absolute;
    left:25%;
    top: 3%;
    width:60%;
}
header span{
    animation: blinker 500ms infinite;
    color:#39ff14; 
    display: inline-block; 
    font-size: 50px;
    background-color: black; 
    position:absolute; 
    top: 20%;
    font-family: 'VT323', 'Courier New', 'monospace';
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
header img {
    display: inline; 
    height: 100px; 
}
.misa-img {
    position: absolute;
    left:80%;
}


.light1  {
    position: absolute;
    left:33%;
    top:20%;
}
.light2  {
    position: absolute;
    left:33%;
    top:48%;
}
.gate-container {
    position: absolute;
    left: 43%;
    top: 25%;
    width: min(16vw, 220px);
}

.gate-container a {
    display: block;
    position: relative;
    width: 100%;
}

.gate {
    display: block;
    width: 100%;
    height: auto;
}

.enter {
    display: none;
    position: absolute;
    width: 30%;
    height: auto;

    /* Position relative to the gate */
    left: 51%;
    top: 18%;

    transform: translateX(-50%)
               rotateX(10deg)
               rotateY(50deg)
               rotateZ(9deg);

    pointer-events: none;
}

.gate-container:hover .enter {
    display: block;
}

.warning-container {
    position: absolute;
    left: 35%;
    top: 60%;
}
.warning-container img {
    position: relative;
    left: 40%;
}
.warning-container p {
    animation: blinker 3000ms infinite;
    color: red;
    font-size: large;
    font-weight: 700;
    background-color: black;
}