:root{
  --background-colour: #F9F9F9;
  --font-colour: #1A4974;
  --highlight-colour: #870810;
  overflow-x: hidden;
}
body{
  font-family: RobotoSlab;
  background-color: var(--background-colour);
  color: var(--font-colour);
  margin: 0;
}
a{
  text-decoration: none;
}
.home-title-container{
  text-align: center;
}
.etsy-button-container{
  text-align: center;
}
.etsy-button{
  max-width: 20vw;
}
.home-title{
  font-size: 9vw;
  max-width: 100vw;
  width: 100vw;
  margin: 0;
}
.title-heart{
  width: 12vw;
  position: absolute;
  top: 2vw;
  margin-left: 1vw;
  margin-right: 1vw;
}
.header-button{
  position: absolute;
  top: 12.5vw;
  width: 10vw;
  border-radius: 4vw;
  border-width: 0.5vw;
  border-style: solid;
  border-color: var(--highlight-colour);
  box-shadow: 0 1vw 2vw 0 rgba(0, 0, 0, 0.5);
}
.call-button{
  left: 20vw;
}
.etsy-button{
  right: 20vw;
}
.sub-heading{
  font-family: Lobster;
  color: var(--highlight-colour);
  max-width: 80vw;
  width: 80vw;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-top: 2vw;
  font-size: 3vw;
}
.intro-paragraph-container{
  font-size: 2.75vw;
  margin-left: 2vw;
  margin-right: 2vw;
  margin-top: 4vw;
  text-align: justify;
}
.intro-paragraph{
  max-width: 58vw;
  margin-top: 1vw;
  float: left;
}
.bows-homepage{
  width: 30vw;
  margin-right: 2vw;
  margin-left: 4vw;
  margin-bottom: 2vw;
  border-radius: 1vw;
  border-style: solid;
  border-color: var(--highlight-colour);
  box-shadow: 0 1vw 2vw 0 rgba(0, 0, 0, 0.75);
}
.category-container{
  margin-left: 2vw;
  margin-right: 2vw;
  text-align: center;
}
.category-header{
  font-family: Lobster;
  color: var(--highlight-colour);
  font-size: 5vw;
  text-align: center;
}
.category-description{
  font-size: 2vw;
  max-width: 80vw;
  margin-left: 10vw;
}
.shelf{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.product-thumbnail{
  border-radius: 2vw;
  max-width: 30vw;
  border-style: solid;
  border-color: var(--highlight-colour);
  box-shadow: 0 1vw 2vw 0 rgba(0, 0, 0, 0.75);
  margin-top: 1vw;
  margin-bottom: 1vw;
}
.caption-shelf{
  margin-bottom: 4vw;
}
.product-caption{
  font-size: 2vw;
  text-align: center;
  color: var(--font-colour);
}
@media screen and (max-width: 800px){
  .header-button{
    top: 75vw;
    width: 15vw;
  }
  .call-button{
    left: 5vw;
  }
  .etsy-button{
    right: 5vw;
  }
  .sub-heading{
    font-size: 5vw;
  }
  .intro-paragraph-container{
    text-align: center;
  }
  .intro-paragraph{
    max-width: 100%;
    font-size: 4vw;
  }
  .bows-homepage{
    max-width: 50vw;
    width: 50vw;
    box-shadow: 0 1vw 5vw 0 rgba(0, 0, 0, 0.75);
    margin: auto;
    margin-top: 2vw;
    margin-bottom: 4vw;
  }
  .category-header{
    font-size: 6vw;
    margin-top: 0;
  }
  .category-description{
    font-size: 4vw;
  }
  .shelf{
    float: left;
    margin-left: 10vw;
    margin-right: 10vw;
  }
  .column-shelf{
    flex-direction: column;
  }
  .product-thumbnail{
    max-width: 50vw;
  }
  .product-thumbnail-square{
    max-width: 30vw !important;
  }
  .product-caption{
    margin-top: 11vw;
    margin-bottom: 15vw;
    font-size: 5vw;
  }
}
@font-face{
  font-family: OpenSans;
  src: url("../fonts/Open_Sans/OpenSans-Regular.ttf");
}
@font-face{
  font-family: RobotoSlab;
  src: url("../fonts/Roboto_Slab/RobotoSlab.ttf");
}
@font-face{
  font-family: FredokaOne;
  src: url("../fonts/Fredoka_One/FredokaOne-Regular.ttf");
}
@font-face{
  font-family: Lobster;
  src: url("../fonts/Lobster/Lobster-Regular.ttf");
}
::-webkit-scrollbar {
  width: 0.5vw;
}
::-webkit-scrollbar-track {
  background: var(--background-colour);
}
::-webkit-scrollbar-thumb {
  background: var(--font-colour);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--highlight-colour);
}