/* Fonts */


header {
 text-align: center;
 border: 2px solid #033869;
 border-radius: 5px;
box-shadow: 3px 3px #2b2f77;
background: #CBDEF3;
padding-right: 6px;
padding-left: 6px;
}

#hheader1 {
 font-size:48px;
 font-family: 'Love Ya Like A Sister', serif;
 color: #033869;
 margin-bottom: 3px;
}

#htext1 {
  font-size: 16px;
  font-family: "VT-100", fixedsys, System, monospace;
  padding-right: 6px;
  padding-left: 6px;
}

body {
 background-image: url("window.png");
 background-attachment: fixed;
 background-position: center;
 font-family: "VT-100", fixedsys, System, monospace;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 4px 5px 5px;
  justify-content: center;
  gap: 16px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0px 8px;
  box-sizing: border-box;
}


.worm-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.wormkin {
  display: block;
  margin-top: 8px;
  width: 100%;
  border: 2px solid #033869;
  height: auto; /* keeps aspect ratio */
  max-width: 100%; /* prevents overflow */
}

.wormkin img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #033869;
  box-sizing: border-box;
}


.hov {
  opacity: 0;
  position: absolute;
  height: 99%;
  width: 100%;
  top: 1px;
  left: 0;
  transition: opacity 0.6s ease;
  z-index: 2;
}

.caption {
  position: absolute;
  padding: 10px;
  background: white;
  line-height: 20px;
  max-height: 50%;
  width: 80%;
  overflow: auto;
  top: 25%;
  border-radius: 20px;
  border: 2px dotted #88d49e;
  left: 10%;
}

.worm-container:hover .hov {
  opacity: 1;}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}