:root{
  --black: #262730; /*Charcoal black*/
  --grey: #7D8491; /*Stone grey*/
  --offwhite: #F9F9ED; /*Off-white*/
  --white: #FFFFFF; /*Pure white*/
  --red: #E88873; /*Pastel brick red*/
  --green: #73e886; /*pastel leaf green */
  --nav: #F9F9ED; /*Off-white*/
}

@font-face{
	font-family: 'abel';
	src: url('../media/fonts/abel.ttf') format('truetype'),
       url('../media/fonts/abel.otf') format('truetype'),
       url('../media/fonts/abel.woff') format('woff');
}

@font-face{
	font-family: 'montserrat';
	src: url('../media/fonts/montserrat.otf') format('truetype'),
       url('../media/fonts/montserrat.ttf') format('truetype'),
       url('../mdeia/fonts/montserrat.woff') format('woff');
}

/* SCROLL BAR */
::-webkit-scrollbar{
	border-radius: 5%;
  height: 5px;
  width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
  background: var(--white);
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--grey);
  transition: 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{
	height: 100%;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
}
body{
  background-size: cover;
  color: var(--black);
  font-family: 'abel', sans-serif;
	height: inherit;
  overflow-x: hidden;
}
#smooth-scroll-wrapper{
  height: inherit;
}
main{
  background-color: var(--white);
  height: inherit;
}
h1, h4, h5{
  color: var(--black);
  font-family: 'montserrat', serif;
  margin-bottom: 1em;
}
h2, h3{
  color: var(--black);
  font-family: 'montserrat', serif;
}
h6{
  color: var(--grey);
  font-weight: bold;
}

/* LOADING */
#loading-container{
  background-color: var(--offwhite);
  height: 100%;
  padding: 15%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
#loading{
  background-color: var(--offwhite);
  height: 12em;
  margin: 0 auto;
}

/* HOME PAGE */
#hero-background{
  height: 100vh;
}
#hero-background img{
  height: 100%;
  object-fit: cover;
  width: 100%;
}
#hero-background video{
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.hero-video-controls{
  height: 0.6em;
  position: absolute;
  right: 8em;
  top: 88vh;
  width: 0.6em;
}
#play{
  display: none;
  height: 0.8em;
  width: 0.8em;
}
#play-svg g{
  fill: var(--offwhite);
  transition: 0.2s ease-in-out;
}
#play:hover #play-svg g{
  fill: var(--red);
}
#pause-svg g{
  fill: none;
  stroke: var(--offwhite);
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-width:8px;
  transition: 0.2s ease-in-out;
}
#pause:hover #pause-svg g{
  stroke: var(--red);
}
.hero-audio-controls{
  height: 1.3em;
  position: absolute;
  right: 10em;
  top: 88vh;
  width: 1.3em;
}
#mute-svg g, #unmute-svg g{
  fill: var(--offwhite);
  transition: 0.2s ease-in-out;
}
#mute:hover #mute-svg g{
  fill: var(--red);
}
#unmute:hover #unmute-svg g{
  fill: var(--red);
}
#unmute{
  display: none;
}
#scroll-down-indicator{
  bottom: 5em;
  color: var(--offwhite);
  font-size: 110%;
  position: relative;
  text-align: center;
}
.content-home{
  background-color: var(--white);
  box-shadow: 0px 5px 75px var(--black);
  padding: 10%;
}
#intro-guitar{
  height: 8em;
  margin-top: 25%;
  text-align: center;
}
#intro-svg{
  height: 100%;
}
#intro-svg g{
  fill: none;
  stroke: var(--red);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
  stroke-width:20px;
  transition: 0.2s ease-in-out;
}
#intro-text{
  font-size: 120%;
  margin-bottom: 25%;
  padding: 10%;
  text-align: center;
}
.content-home-item{
  margin-bottom: 15%;
}
.home-page-button{
  margin-top: 4em;
}
.home-page-button a{
  border: 2px solid var(--black);
  color: var(--black);
  padding: 1em 2em;
  transition: 0.2s ease-in-out;
}
.home-page-button a:hover{
  color: var(--red);
  border: 2px solid var(--red);
  text-decoration: none;
}
#available-button{
  text-align: right;
}


/* ABOUT PAGE */
.content-about{
  padding: 10%;
}
.bottom-margin{
  margin-bottom: 15%;
}
.contain-img{
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  width: 100%;
}
#proc1-container{
  margin-bottom: 1em;
}
#proc2-container{
  margin-top: 4em;
}
#proc3-container{
  margin-top: 15%;
  width: 80%;
}
#proc4-container{
  margin-top: 4em;
  margin-left: 4em;
  width: 80%;
}

/* NOTE: PRODUCTS PAGE HAS SEPARATE CSS FILE */

/* CONTACT PAGE */
.content-contact{
  height: 100vh;
  padding: 18%;
  padding-top: 10%;
}
.contact-page-link{
  color: var(--black);
}
.contact-page-link:hover{
  color: var(--red);
}
.social-media-logo{
  display: inline-block;
  margin-right: 3%;
  margin-top: 7%;
  width: 1.5em;
}
.logo-svg g{
  fill: var(--black);
  transition: 0.2s;
}
.logo-svg:hover g{
  fill: var(--red);
}