* {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}

body {
  font-size: 20px;
  background: url(img/background.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top center;
}

h1 {
  padding: 120px 0 250px 0;
  color: white;
  font-size: 26px;  
}

.header-btn {
  background: transparent;
  border: none;
}

p.hi {
  font-weight: bold;
  font-size: 26px;
  margin-block-end: 5px;
}

p.intro-blurb {
  font-size: 18px;
  margin-block-start: 0;
  margin-block-end: 5px;
}

.menu-section {
  padding-top: 100px;
}

.menu-btn {
  background-color: #e5e5e5;
  border: 0.05em solid #e5e5e5;
  padding: 17px 10px;
  font-size: 18px;
  width: 100%;
  margin: 3px 0 3px 0;
}

h2 {
  font-size: 22px;  
}

.category-section {
  padding-top: 40px;
}

.bold {
  font-weight: bold;
}

.semibold {
  font-weight: 500;
}

.italic {
  font-style: italic;
}

.work-title {
  font-size: 18px;
  margin-block-start: 5px;
  margin-block-end: 30px;
}

.category-guides {
  font-size: 20px;
}

@media only screen and (min-width: 375px) {
  .intro-section {
    padding-top: 4%;
  }  
}

@media only screen and (min-width: 400px) {
  .intro-section {
    padding-top: 10%;
  }  
}

@media only screen and (min-width: 415px) {
  .intro-section {
    padding-top: 18%;
  }  
}

@media only screen and (min-width: 480px) {
  .intro-section {
    padding-top: 25%;
  }  
}

@media only screen and (min-width: 525px) {
  .intro-section {
    padding-top: 40%;
  }  
}

@media only screen and (min-width: 600px) {
  .intro-section {
    padding-top: 50%;
  }  
}

@media only screen and (min-width: 700px) {
  .intro-section {
    padding-top: 55%;
  }  
}