/* Custom Font */

@font-face {
  font-family: 'roundy-rainbows';
  src: url('../fonts/roundy-rainbows.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.roundy-rainbows {
  font-family: "roundy-rainbows", sans-serif;
  font-size: 2.5em;
}

/* Font Colors */

.yellowtext {
  color: #ba9020;
}

.orangetext {
  color: #b85500;
}

.tealtext {
  color: #114d45;
}

/* Text */

.main-title {
  font-size: 7em;
  color: #114d45;
}

.subtitle {
  font-size: 1.5em;
  letter-spacing: 2px;
  font-weight: 300;
  color: black;
}

p {
  line-height: 2rem;
}

.fab, .far {
  padding: 10px;
}

.parallax-container {
  min-height: 380px;
  line-height: 0;
  height: auto;
  color: rgba(255,255,255,.9);
}

.parallax-container .section {
  width: 100%;
  position: absolute;
  top: 20%;
}

#index-banner .section {
  top: 5%;
}

.resume-btn {
  padding-top: 5%;
  padding-bottom: 10%;
}

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
  font-size: inherit;
}

#quote2 {
  top: 25%;
}

/* Footer */

footer.page-footer {
  margin: 0;
  background-color: #114d45;
  padding: 10px;
}

/* Media Queries */

@media only screen and (max-width : 1257px) {
  #quote2 {
    top: 20%;
  }
}

@media only screen and (max-width : 1023px) {
  .main-title {
    font-size: 6em;
  }

  #index-banner .section {
    top: 10%;
  }
}

@media only screen and (max-width : 1007px) {
  #quote1 {
    top: 15%;
  }
}

@media only screen and (max-width : 992px) {
  #quote1 {
    top: 20%;
  }
}

@media only screen and (max-width : 991px) {
  #quote2 {
    top: 25%;
  }
}

@media only screen and (max-width : 967px) {
  .main-title {
    font-size: 5em;
  }
  
  #index-banner .section {
    top: 10%;
  }
}

@media only screen and (max-width : 966px) {
  #quote2 {
    top: 20%;
  }
}

@media only screen and (max-width : 814px) {
  #main-header {
    font-size: 5em;
  }
}

@media only screen and (max-width : 801px) {
  #quote1 {
    top: 15%;
  }
}

@media only screen and (max-width : 739px) {
  #quote2 {
    top: 15%;
  }
}

@media only screen and (max-width : 600px) {
  #quote1 {
    top: 20%;
  }
  
  #quote2 {
    top: 20%;
  }
}

@media only screen and (max-width : 549px) {
  #index-banner .section {
    top: 0;
  }

  .subtitle {
    margin-top: 0px;
  }
}

@media only screen and (max-width : 504px) {
  #quote1 {
    top: 15%;
  }
}

@media only screen and (max-width : 465px) {
  #quote2 {
    top: 15%;
  }
}

@media only screen and (max-width : 419px) {
  .main-title {
    font-size: 5em;
  }

  .subtitle {
    margin-top: 0px;
  }
  
  #index-banner .section {
    top: 0px;
  }
}