.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.crt {
  animation: textShadow 1.6s infinite;
}
html {
  font-family: 'Syne Mono', sans-serif;
  font-size: 20px;
  line-height: 1.00;
}
.container {
        position: relative;
        width: 0;
        height: 0;
}      
.overlay {
        position: absolute;
        left: 380px;
        top: 500px;
        transform: rotate(1deg);
}
.overlay:hover {
    filter: grayscale(100%);
    cursor: pointer;
}
.overlay2 {
    position: absolute;
    left: 650px;
    top: 20px;
    z-index: 1;
}
.overlay3 {
    position:absolute;
    left: -100px;
    top: 650px;
    color: #ffffff;
    rotate: 10deg;
    z-index: 1;
}
#wrapper {
  margin-left: 100px;
  margin-right: auto;
  width: 900px;
}
/*links*/
a {
    color:#f3740d;
    text-decoration: none;
}
a:hover {
    color:#455496;
}
.nav a:hover {
  filter: drop-shadow(5px 5px 5px rgb(0, 0, 0));
}
/*MAIN CONTENT*/
body {
  background-image: url(../images/june-bg.gif);
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-blend-mode:soft-light;
  background-color: #70493d;
  image-rendering: pixelated;
}
main {
    width: 500px;
    height: 600px;
    position: absolute;
    top: 50px;
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    border-style:ridge;
    border-color:#85826b5d;
    font-size: 18px;
    background-color: antiquewhite;
    color:#582c1e;
    box-shadow: 5px 5px 10px #1f140a;
    rotate: calc(-2deg);
}
.mainabout {
    width: 500px;
    height: 600px;
    position: absolute;
    top: 50px;
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    border-style:ridge;
    border-color:#85826b5d;
    font-size: 18px;
    background-color: antiquewhite;
    color:#582c1e;
    box-shadow: 5px 5px 10px #1f140a;
    rotate: calc(-2deg);
}
.textarea {
    padding: 2%;
    color:#582c1e;
}
.imagecontainer {
    width: auto;
    height: auto;
    position: absolute;
    left: 420px;
    z-index: 2;
    image-rendering: auto;
}
.gallery {
    position: absolute;
    width: 800px;
    height: 850px;
    top: 25px;
    left: 800px;
    bottom: 25px;
    padding: 20px;
    font-size: 15px;
    border-style: dashed;
    border-color: #f3740d;
    display: inline-block;
    overflow: auto;
    image-rendering: auto;
    background-color: #485274cc;
    color: #ffffff;
}
figure {
  padding-right: 20px;
  margin: auto;
  float: left;
}
figcaption {
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
footer {
   position: relative;
   width:300px;
   top: 800px;
   left: 20px;
   max-width: 20ch;
   background-color: #1f1f1f;
   color:#ffffff
}
footer * {
  font-size: 0.9rem;
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width:thin;
    scrollbar-color: #315ba8 #ffffff00;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 5px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff00;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #c6752f00;
    border-radius: 10px;
    border: 3px solid #ffffff00;
  }