/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: rgb(55,0,20);
  color: white;
  font-family: 'Courier New', monospace;
  overflow: hidden;
}

@font-face {
  font-family: "Frankfurter"; /* set name */
  src: url(/Frankfurter.otf) format("opentype"); /* url of the font */
}

@font-face {
  font-family: "Swing"; /* set name */
  src: url(/Swing.ttf) format("truetype"); /* url of the font */
}

p span { 
    background-color: black; 
}

li span {
    background-color: black;
}

.centerme {
    margin-top: auto;
    margin-bottom: auto;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent; /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

#mydiv {
  position: absolute;
  top: 15px;
  z-index: 9;
  background-color: black;
}

.wrapper {
  display: flex;
  justify-content: space-evenly;
  margin: auto;
}

.wrapper img {
   max-width: 100%;
}

h1 {  
  display: block;  
  font-size: 4em;  
  text-align: center;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 0;
  font-family: "Frankfurter";
}  

h2 {  
  display: block;  
  font-size: 2em;  
  text-align: center;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 10px;
  font-family: "Swing";
}  

.parent {
  display: block;
  margin-left: auto;
  margin-right: auto;
    width: 500px;
}

.image1 {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
    z-index: 1;
}
.image2 {
  position: relative;
        top: -70px;
        left: -90px;
  margin-top: 10px;
  z-index: 2;
}
.image3 {
  position: relative;
        top: -395px;
        left: -20px;
  margin-top: 10px;
  z-index: 2;
  transform: rotate(-15deg);
}

.eyes {
  position: relative;
        top: -965px;
        left: 25px;
  margin-top: 10px;
  z-index: 3;
  transform: rotate(-15deg);
}

text { text-align: left;
}

.ears {
  position: relative;
        top: -543px;
        left: 330px;
  margin-top: 10px;
    z-index: 3;
    transform: rotate(15deg);
}

.scribble {
  position: relative;
        top: -713px;
        left: 58px;
  margin-top: 10px;
  z-index: 3;
  transform: rotate(-10deg);
}

div.scroll-container {
  background-color: transparent;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

div.scroll-container img {
  padding: 10px;
}

 /* unvisited link */
a:link {
  color: rgb(236,0,148);
}

/* visited link */
a:visited {
  color: rgb(236,0,148);
}

/* mouse over link */
a:hover {
  color: rgb(251,0,21);
}

/* selected link */
a:active {
  color: rgb(236,0,148);
} 

.box {
    width: 20%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
    padding: 35px;
    border: 2px solid #fff;
    border-radius: 20px/50px;
    background-clip: padding-box;
    text-align: center;
}

.button {
    font-size: 1em;
    padding: 10px;
    color: #fff;
    border: 2px solid orange;
    border-radius: 20px/50px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.button:hover {
    background: orange;
}

.popup {
    margin: 70px auto;
    padding: 20px;
    background: black;
    width: 500px;
    position: relative;
    z-index:10;
    transition: opacity 500ms;
}

.popup h2 {
    margin-top: 0;
    color: #333;
    font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
    position: absolute;
    top: 1em;
    right: 30px;
    transition: all 200ms;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    color: rgb(236,0,148);
}

.popup .close:hover {
    color: rgb(251,0,21);
}

.popup .content {
    max-height: 30%;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
}

/* These are the rules you are looking for. */
.overlay {
    transition: opacity 500ms;
    opacity: 1;
    pointer-events: all;
}

.overlay:target {
    opacity: 0;
    pointer-events: none;
}