/* Fonts */
/* Pixel Operator by Jayvee Enaguas (downloaded from dafont.com) */
@font-face {
    font-family: 'Pixel Operator', sans-serif;
    src: url('assets/pixel_operator/PixelOperator-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Pixel Operator', sans-serif;
    src: url('assets/pixel_operator/PixelOperator.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pixel Operator SC', sans-serif;
    src: url('assets/pixel_operator/PixelOperatorSC-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Pixel Operator SC', sans-serif;
    src: url('assets/pixel_operator/PixelOperatorSC.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VCR OSD Mono', monospace;
    src: url('assets/pixel_operator/VCR-OSD-Mono_1.001.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
  background-color: #441f9b; 
  font-family: 'Pixel Operator', sans-serif;
  margin-left: 20%;
  margin-right: 20%;
  margin-bottom: 5%;
}



h1 {
 font-family: 'Pixel Operator', sans-serif;
 font-weight: bold;
}

h2 {
 font-family: 'VCR OSD Mono', monospace;
 font-weight: normal;
}


header.nav, section.directory, nav, article, footer, aside {
  background-color: #8087A3;
}

header {
  color: white;
}

header.nav {
  padding: 10px;
  font-size: 1.5vw;
  color: black;
}

header.nav p {
  margin-left: 10px;
}

/* //////FIRST SECTION ////// */
section.main {
  display: flex;
  margin-bottom: 20px;
  margin-top: 20px;
}

section.directory {
  display: block;
  margin: auto;
  font-size: 28px;
  padding: 5px;
}

section.directory ul {
  list-style-image: url(https://win98icons.alexmeub.com/icons/png/magnifying_glass_4-0.png);
}


.main nav {
  display: block;
  height: auto;
  float: left;
  overflow: auto;
  width: 20%;
  font-size: 1.5vw;
}

/* fun fact: the three different levels of media screen code where originally just for this nav menu */
/* the image used here for the list is just a cropped version of this -> https://win98icons.alexmeub.com/icons/png/help_question_mark-1.png */
nav ul {
  color: black;
  list-style-image: url(https://cdn.glitch.global/9be267d1-d0f5-4522-9dcb-1f95cd31e453/help_question_mark.png?v=1749576928732);
  margin: auto;
  margin-top: 20px;
}

section.main article {
  display: block;
  height: auto;
  width: 80%;
  margin-left: 20px; 
  font-size: 1.5vw;
  padding: 20px;
}


/* //////SECOND SECTION/////// */
.second {
    display: flex;
    margin-bottom: 20px;
}

.second article {
    display: block;
    height: auto;
    width: 60%;
    font-size: 1.5vw;
    padding: 20px;
}

.second nav {
    width: 40%;
    height: auto;
    display: block;
}

.second img {
    width: auto;
    height: 700px;
}

.second iframe {
    width: auto;
    height: 700px;
}


/* //////FOOTER/////// */
footer {
  padding: 1px;
  display: block;
  text-align: left;
  height: 10%;
  width: auto;
  font-size: 24px;
}

footer img {
  vertical-align: sub;
  margin-left: 15px;
  width: auto;
  height: 24px;
}





/*
/////////////////////////////////////////
Tablets, phones turned horizontally, etc. 
/////////////////////////////////////////
*/
@media screen and (max-width: 1500px) {
  
 body {
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 0%;
  font-size: 18px;
} 
  
 header.nav {
  padding: 5px;
   font-size: 2vw;
}
  
 section.main {
  margin-top: 15px;
  margin-bottom: 15px;
  }

 nav {
  width: 20%;
  padding: 0px;
}
 
 nav ul {
  font-size: 2.5vw;
  line-height: 28px;
  margin-top: 15px;
}

 article {
  padding: 15px;
  margin-left: 10px;
  width: 80%;
  font-size: 2vw;
}
  
  footer {
    font-size: 18px;
  }
  
  footer img {
    height: 18px;
  }
} 


/* 
///////////////////
mobile phones, etc. 
///////////////////
*/
@media screen and (max-width: 700px) {
  
  header.nav {
    font-size: 4vw;
  }
  
  nav {
    width: 30%
  }
  
  nav ul {
    font-size: 3.5vw;
    line-height: 28px;
    padding: 0px;
    margin-left: 35%;
    margin-top: 15px;
  }
  
  article {
    width: 70%;
    margin-left: 10px;
    font-size: 3.5vw;
    padding: 10px;
  }
  
  footer {
    font-size: 14px;
  }
  
  footer img {
    height: 14px;
  }
  
}