@font-face {
  font-family: 'LifeisMessy'; 
  src: url("/Graphics/KGLifeisMessy.ttf"); 
}


@font-face {
  font-family: 'Muffaroo'; 
  src: url("Muffaroo.ttf"); 
}

body {
  background-color: black;
  position: relative;
  overflow-x: hidden;
  background-image: url('/Graphics/black-felt.png');
}

main {
  z-index: -2;
  margin: auto;
  text-align: center;
  width: 1000px;
  overflow-x: hidden;
}

.frame {
  position: absolute;
  z-index: 3;
  visibility: visible;
}

.frame img {
  z-index: 3;
    width: 1000px;
}

.content {
  z-index: 4;
  position: absolute;
  width: 620px;
  margin: 170px 190px 0px 190px;
  border-radius: 50px 50px 0px 0px;
  height: 360px;
  overflow-y: scroll;
  overflow-x: hidden;
  color: white;
}

.text {margin: 0px 20px;}

.overlaytext {
  position: absolute;
  background-color: white;
  background-image: url('/Graphics/cardboard.png');
  color: black;
  width: 100%;
  margin-top: 100px;
}

.overlaytext h1, .overlaytext p{margin: 0px}

.nav{
background-color: #6F9291;
background-image: url('/Graphics/cardboard.png');
width: 100%;
text-align: center;
padding: 0px 0px;
}

.nav li::before {content: "☞";}
.nav li::after {content: "☜";}

.nav a:hover{
  padding: 10px;
  transition-duration: 250ms;
  color: white;
}
 
.nav ul{
margin: 0;
padding: 10px;
text-align: center;
}
 
.nav li{
list-style-type: none;
display: inline;
font-size: 1.5em;
padding: 0px 10px;
font-family: 'LifeisMessy', sans-serif;
}

h1, h2 {font-family: 'Muffaroo', sans-serif;}
  
  
@media screen and (max-width: 1000px) {
.frame{
  visibility: hidden;
}

main {
  width: 80%;
  margin: auto;
}

.content {
  width: 100%;
  margin: 100px 0px;
  position: relative;
  height: 100%;
}

}