:root{
  --text:#f8fbff;
  --glass:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.2);
  --glow:0 0 12px rgba(255,255,255,.3);
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  padding:20px;
  overflow-x:hidden;

  font-family:"MS PGothic",sans-serif;
  color:var(--text);

  background:
    linear-gradient(rgba(190,220,255,.15),rgba(255,255,255,.05)),
    url("https://i.pinimg.com/736x/ff/48/b5/ff48b55868fbf29cf4189d50e91721c0.jpg")
    center/cover fixed;

  animation:hue 18s infinite alternate;
}

/* fog */

body::before{
  content:"";
  position:fixed;
  inset:0;

  background:
    radial-gradient(circle at top,
    rgba(255,255,255,.15),
    transparent 40%);

  backdrop-filter:blur(3px);
  pointer-events:none;
}

/* static */

body::after{
  content:"";
  position:fixed;
  inset:0;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03),
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 3px
    );

  opacity:.35;
  pointer-events:none;
}

.container{
  max-width:950px;
  margin:auto;

  display:grid;
  grid-template-columns:260px 1fr;
  gap:14px;

  padding:14px;

  border:1px solid var(--line);
  border-radius:18px;

  background:rgba(200,220,255,.08);
  backdrop-filter:blur(10px);

  box-shadow:
    0 0 30px rgba(255,255,255,.1);
}

header{
  grid-column:1/-1;
  height:200px;

  position:relative;
  overflow:hidden;
  border-radius:16px;

  background:
    linear-gradient(rgba(180,220,255,.2),rgba(255,255,255,.03));

  border:1px solid var(--line);
}

header span{
  position:absolute;
  bottom:18px;
  right:20px;

  font-size:2.5rem;
  letter-spacing:4px;

  text-shadow:
    0 0 8px white,
    0 0 25px #d8f0ff;
}

main{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.box{
  padding:14px;
  border-radius:14px;

  background:var(--glass);
  border:1px solid var(--line);

  backdrop-filter:blur(8px);

  box-shadow:
    inset 0 0 15px rgba(255,255,255,.05);
}

h1,h2{
  margin-top:0;
  text-shadow:var(--glow);
  letter-spacing:2px;
}

h1{
  font-size:1.7rem;
}

p{
  line-height:1.7;
}

a{
  display:block;

  margin:8px 0;
  padding:8px 10px;

  border-radius:10px;

  color:white;
  text-decoration:none;

  background:rgba(255,255,255,.06);

  transition:.3s;
}

a:hover{
  transform:translateX(5px);
  background:rgba(255,255,255,.14);
}

.moths{
  text-align:center;
}

.moths img{
  width:85px;
  margin:6px;

  image-rendering:pixelated;

  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.4));

  transition:.4s;
}

.moths img:hover{
  transform:
    translateY(-4px)
    rotate(-2deg)
    scale(1.05);
}

.terminal{
  padding:14px;

  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.1);

  font-family:monospace;
  line-height:1.8;

  color:#d5f6ff;
}

.loadingBar{
  height:20px;
  overflow:hidden;

  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
}

.loadingInside{
  height:100%;
  width:40%;

  background:
    linear-gradient(to right,#dff6ff,#ffd6f8);

  animation:load 8s infinite;
}

.warning{
  position:fixed;
  bottom:10px;
  width:100%;

  text-align:center;

  font-size:11px;
  letter-spacing:4px;

  color:rgba(255,255,255,.35);

  animation:flicker 4s infinite;
  pointer-events:none;
}

.plant,
.eyes{
  position:fixed;
  z-index:-1;
  opacity:.6;
  pointer-events:none;
}

.plant{
  width:220px;
  left:-20px;
  bottom:-10px;
}

.eyes{
  width:240px;
  right:20px;
  top:40px;
}

@keyframes load{
  0%{width:5%}
  50%{width:75%}
  100%{width:30%}
}

@keyframes flicker{
  0%{opacity:.1}
  50%{opacity:.55}
  100%{opacity:.1}
}

@keyframes hue{
  from{filter:hue-rotate(0deg)}
  to{filter:hue-rotate(8deg)}
}

@media(max-width:700px){

  .container{
    grid-template-columns:1fr;
  }

  header{
    height:160px;
  }

  header span{
    font-size:1.7rem;
  }

  .eyes{
    width:150px;
  }

  .plant{
    width:140px;
  }
}