html {
  height: 100%;
  width: 100%;
}

body {
  /*font-family: Arial, Helvetica, sans-serif;*/
  /*font-family: 'Acme', sans-serif; */
  /*font-family: 'Archivo Black', Arial, Helvetica, sans-serif; 
  font-size: 3vw;  */
  background-color: #ffc304;
}

#welcome-section h1 {
  text-align: center;
  font-size: 9vw;
  font-family: Nosifer, Arial, Helvetica, sans-serif;
  background-image: url("/images/_MG_8548_1000.jpg");
}

#welcome-section {
/*  border: 3px solid red;  */
  background-image: url("/images/_MG_8548_1000.jpg");
  min-height: 100vh;
 /* background-image: url("/images/_MG_8548_1000.jpg");
   */ 
}

/* h1 {
  font-family: Nosifer, Arial, Helvetica, sans-serif;
} */

#projects {
/*  border: 3px solid dodgerblue;  */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /*makes into single row - 3 columns */
  gap: 20px;
  background-image: url("/images/_MG_8548_1000.jpg");
}
 
.project-tile {
  /* border: 3px solid orange;*/
  padding: 20px;
  text-align: center;
}

.project-tile p {
  font-family: 'Archivo Black', Arial, Helvetica, sans-serif; 
  font-size: 3vw;
}

#navbar {
  background-color: #ffc304; 
  position: sticky;
  top: 0px;
  font-family: 'Archivo Black', Arial, Helvetica, sans-serif; 
  font-size: 3vw;
}

#navbar ul {
  list-style-type: none;
  padding: 10px;
  display: flex;
  justify-content: space-evenly;
  margin:0px;
}

.project-tile img {
  width: 100%;
}

.books {
  color: #480048;
  font-size: 13vw;
}

#contact {
/*  border: 3px solid green;   */
  min-height: 10vh;
  /*background-color: #5569ff; */
  background-image: url("/images/_MG_8548_1000.jpg");
  text-align: center;
  padding: 10px;  
}

#contact p {
  font-size: 3vw;
  /*font-family: Nosifer, Arial, Helvetica, sans-serif;*/
  font-family: 'Monoton', sans-serif;
}

#footer {
/*  border: 3px solid grey;    */
  background-color: #ffc304; 
  padding-left: 10px;
  font-family: 'Archivo Black', Arial, Helvetica, sans-serif; 
  font-size: 3vw;
  padding-top: 1px;
}

a:link {
  color: #0314fe;
  text-decoration: none;
}
a:visited {
  color: #e7101c;
  text-decoration: none;
}
a:hover {
  color: #fef001;
}

/*put media quieries at end */
@media (max-width: 500px) {
  #projects {
    /*background-color: yellow;*/
    grid-template-columns: 1fr;
  }
}

/*  makes images sized to parent size
img {
width: 100%;
}
*/

/*
a:link, a:visited {
  text-decoration: none;
}  */

/*   font-family: 'Acme', sans-serif;
font-family: 'Archivo Black', sans-serif;
font-family: 'Monoton', sans-serif;   */