* {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
}

.header {
  position: relative;
  text-align: center;
  padding: 50px 0;
}

.title-row,
.misc {
    position: relative;
    z-index: 2;
}

.gallery {
  position: relative;
  top: 25px;
  width: 40%;
  max-width: 280px;
}

.misc {
  top: -20px;
  font-size: 3.5vw;
  text-shadow: 5px 5px 5px #C252FF;
  font-family: "Courier New"
}

.cloud {
  position: absolute;
  top: 50%;
  left: 50%;    
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none; 
  width: 90%;
  max-width: 600px;
  height: auto;
}

.bat {
    width: 30%;
    max-width: 170px;
    height: auto;
}

body {
  background-image: url("https://louse.neocities.org/BACKGROUNDS/star.jpg");
  background-size: 100px;
  background-repeat: round;
  background-attachment: fixed;
}

.everything {
  display: flex; 
  width: 80%;
  margin: auto;
  background: black;
  padding: 10px;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0 0 15px 15px black;
  font-family: "Courier New";
  font-size: 12px;
}

.frame #ween {
  border-width: 10px; 
  border-style: solid;
  border-image: url("https://i.imgur.com/I7i5Udr.png") 35 fill round;        
}

.column {
  flex: 1;
}

.img {
  width: 100%;
  padding: 7px;
}

.img img {
  width: 100%;
  display: block;
  cursor: pointer;
}

.description {
  display: none;
  background: #15004A;
  color: yellow;
  padding: 10px;
  background-clip: padding-box;
  border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAABKklEQVR4AZTUS67CQBBD0ZAZ+18sQ+C05JZpEj5P76pdLpdhxL49/+637d48rZ//+452uBOX63ZpeJbBHOJ5eX1H88Y3TYBBZ0nzzMHMb3iIN0sZDnvJC2e+vTtvmKXrIgH+WWF29nRudgMzmC29vGgzvcIHX54e35QIloEn2PCy9x7tRqnlGUqazik82s1SgaaPj7SsQjsaNEYpQ6DhCXxDLne0/CglwAT9D+vNS6lP/KdM1g3oMEqZPg10lp9eOfmG52aUEgzQgtHmM2Sa5GapoiCYgDd+Xt4nRqmwotAH606Gt2Z44M+fPgMT9Aof/C7mmYN5fFNBQy94K/Zyq29uf5auC3OjsOdofhfyZ6klmA3PUTDbe3nRZhpvP32CHRAyB3PgyTe8BwAAAP//N3DwGQAAAAZJREFUAwDQ3yviLpfexwAAAABJRU5ErkJggg==") 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid;
  border-radius: 5px 5px 5px 5px;
}

.description.show {
  display: block;
}

.description-image {
  width: 100%;
  margin-bottom: 10px;
}

.glow {
    color: white;
    text-decoration: none;
    transition: 0.3s ease;
}

.glow:hover {
    color: white;
    text-shadow:
        0 0 5px #00ffff,
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px #00ffff;
}

@media screen and (max-width: 600px) {
  .everything {
    flex-direction: column;
  }
}