body {
    background-color: black; 
    margin: auto;
    overflow-x: hidden;
    font-family: "Monaco", monospace;
    color: yellow;
    scrollbar-color: yellow;
    scrollbar-width: thin;
  }

@media only screen and (max-width: 960px) {
body {
    width: 960px;  
    margin: auto;
    }
}

@font-face {
    font-family: 'BlankJazzRhino'; /*a name to be used later*/
    src: url('assets/fonts/BlankJazzRhino.ttf'); /*URL to font*/
}

/* Content Shit */

.content {
    width: 960px; /* Could be anything, but 75% works here. */
    margin: auto; /* This is what center the content div itself. */
    margin-top: 40px;
 }
 
 p {
     text-align: center; /* This will center the text inside the paragraph tag */
 }
 
.header {
 font-family: 'BlankJazzRhino';
 word-spacing: 5px;
 letter-spacing: 3px;
 margin-left: 13%;
 display: flex;
 gap: 70px;
 }
 
 .counter {
    height:50px;
 }
 .container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row-reverse;
  }

 iframe { 
  max-width: 100%;
  max-height: 100%;
  width: 500px;
  height: 700px;
  border-style: dotted;
  border-color: yellow;
  margin: auto;
  margin-right: 18%;
}

#side {
    width: 150px;
    height: 170px;
    margin-left: 12%;
    }
    
#nav {
    background: yellow;
    padding: 5px;
    font-size: 20px;
    margin-bottom: 5%;
    color: black;
    }
    
#nav2 {
    background: black;
    padding: 0px;
    margin-bottom: 5%;
    }
  
footer {
    width: 500px;
    height: 20px;
    text-align: right;
    float: right;
    margin: auto;
    position: relative;
    color: yellow;
    margin-top:1%;
    margin-right:180px;
    }