/* p for paragraph text, h1 for titles, h2 for subtitles, h6 for captions. all under the class "article" just in case I need to add more one day lol */

/*--- BODIES, MEDIA QUERIES. Basically, this is what determines the spacing of the website and changes for mobile ---*/
@media (max-width: 480px){
  body{
      max-width:90%;
  }
  header h1{
    font-size:40px
    max-width:90%;
  }
}

@media (min-width: 481px) and (max-width: 768px){
  body {
    max-width:80%;
  }
  header h1{
    font-size:48px
  }
}

@media (min-width: 769px){
  body {
   max-width:75%;
  }
  header h1{
    font-size:56px
  }
}
body{
  background-color: white;
  color: black;
  margin:0 auto;
}


/*--- FONTS ---*/

@font-face {
  font-family: "Source-Serif";
  src: url("fonts/SourceSerif4-VariableFont_opsz,wght.ttf")
}

@font-face {
  font-family: "Source-Sans";
  src: url("fonts/SourceSans3-VariableFont_wght.ttf")
}
@font-face {
  font-family: "Permanent-Marker";
  src: url("fonts/PermanentMarker.ttf")
}

/*--- HEADER ---*/
header h1{
  font-family: "Source-Sans";
  font-weight:900;
  color:#ef6a00;
  line-height:1;
  max-width:100%;
  display: flex;
  justify-content: center; 
  text-align:center;
}

#homeTitle{
  font-family: "Permanent-Marker";
}

/*--- BLOG ARTICLE ---*/
.article h2{
  font-family: "Source-Sans";
  font-size:24px;
  color:#ef6a00;
  font-weight:900;
  margin-bottom:-10px;
}

.article{
  font-family: "Source-Serif";
  font-size:18px;
}

.article ul{
    margin-top:-20px;
}