/* basic formatting for the entire page */
html, body
{
  height: 100%;
  width: 100%;
  margin: 0;
}

/* font styling */ 
p {
  font-family: handwriting;
  font-size: 13px;
}

h1 {
  font-size: 40px;
  color: blue;
}

h2 {
  font-family: voicecrack;
  font-size: 35px;
  text-align: center;
  text-transform: uppercase;
}

h3 {
  font-family: flipside;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
}

.caption {
  font-family: handwriting;
  font-size: 10px;
}

@font-face {
  font-family: handwriting;
  src: url(fonts/handwriting.otf)
}

@font-face {
  font-family: voicecrack;
  src: url(fonts/voicecrack.ttf)
}

@font-face {
  font-family: flipside;
  src: url(fonts/flipside.ttf)
}

/* end font styling */

/* flexbox to hold the main page content */
.main {
  display: flex;
  background-color: black;
  position: fixed;
  bottom: 0;
  left: 10;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

/* styling for the main two columns */
.main .skeleton {
  background-color: white;
  margin: 5px;
  padding: 20px;
  overflow-x: hidden;
  display: inline-block;
  overflow-y: hidden;
  
}

/* makes the left column wider than the right one, excludes grid children */
.main .skeleton:nth-child(1):not(.one) {
  width: 70%;
}

.main .skeleton:nth-child(2):not(.two) {
  width: 30%;
}

/* grid */
 .grid-container {
  height: 95%;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  padding: 40px;
  background-color: black;
  
}

/* styles divs inside the grid container */
.grid-container > div {
  background-color: gray;
  padding: 10px;
  overflow-y: hidden;
  overflow-x: hidden;
  min-width: 30vh;
   max-height: 50vh;
}

/* first container ("who runs this thing anyway?") */
.grid-container .one {
  transform: rotate(-2deg);
  grid-area: 1 / 1 / span 1 / span 3;
  min-height: 40vh;
  max-width: 80vh;
  max-height: 40vh;

}

/* second container ("about the site") */
.grid-container .two {
  transform: rotate(1deg);
  grid-area: 2 / 2 / span 1 / span 3;
  max-width: 80vh;
  max-height: 40vh;
}

/* snapshot of old site in 'history' section */
iframe {
  width: 100%;
}

/* button styling */
button {
  background-color: black;
  color: white;
  font-size: 10px;
  margin: auto;
  display: block;
}

/* places the back button at the top left corner of the screen, also places it in front of everything */
.backbutton {
  position: relative;
  top: 0;
  left: 0;
  z-index: 100;
}

/* flex container to go inside grid containers */
.innerflex {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.innerflex > .innerflexitem {
  background-color: transparent;
  width: 100%;
}

.innerflexitem:nth-child(2) {
  max-height: 30vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* quiz results box */
.quizresults {
  width: 90%;
  height: 30vh;
  border: 2px solid black;
  overflow-x: hidden;
  overflow-y: scroll;
}

/* cliques and fanlistings box */

.cliques {
  width: 90%;
  height: 30vh;
  border: 2px solid black;
  overflow-x: hidden;
  overflow-y: scroll;
  text-align: center;
}

/* mobile accessibility */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 1000px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 5px;
    }
    
    .one { grid-area: 1 / 1 / 2 / 2; }
    .two { grid-area: 2 / 1 / 3 / 2; }
    .three { grid-area: 3 / 1 / 4 / 2; }
    .four { grid-area: 4 / 1 / 5 / 2; } 
    
    .grid-container > div {
      min-width: 20vh;
      max-height: 70vh;
}
    
    .winamp-container {display: none;}
    
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}