html {
	background: url(layered-waves-haikei.svg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 550px;
	width: 100%;
  }
  @font-face {
	font-family: 'Hobo Std';
	src: url("https://github.com/AidanG1/snackRice/blob/6b3dbdae63ee387a98c40c930a2b3018c792d26f/templates/staticSite/HoboStd.otf") format("opentype");
  }
  
  .header {
	background: linear-gradient(to bottom right, rgba(248, 173, 158), rgba(255, 243, 191));
	background-attachment: fixed;
	padding: 72px;
	margin: -10px;
	
  }
  
  @media (min-width: 900px) {
	.logo {
	  position: absolute;
	  right: 5vw;
	  top: -2vw;
	  max-width: 30vw;
	}
	
	h3 {
	  color: rgba(102, 0, 0);
	  font-size: 400%;
	  padding-left: 72px;
	  margin: 0px;
	  font-family: 'Raleway', sans-serif;
	  overflow: hidden;
	  text-align: left;
	}
	
	h4 {
	  color: rgba(74, 3, 0);
	  font-size: 600%;
	  padding-left: 72px;
	  margin: 0px;
	  overflow: hidden;
	  font-family: 'Hobo Std';
	  text-align: left;
	}
	
	h5 {
	  color: rgba(102, 0, 0);
	  font-size: 300%;
	  padding-left: 72px;
	  margin: 0px;
	  overflow: hidden;
	  text-align: left;
	  font-family: 'Raleway', sans-serif;
	}
  }
  
  @media (max-width: 899px) {
	.logo {
	  position: relative;
	  max-width: 100%;
	  height: auto;
	}
	
	h3 {
	  color: rgba(102, 0, 0);
	  font-size: 10vw;
	  margin: auto;
	  font-family: 'Raleway', sans-serif;
	  overflow: hidden;
	  text-align: center;
	}
	
	h4 {
	  color: rgba(74, 3, 0);
	  font-size: 20vw;
	  margin: auto;
	  overflow: hidden;
	  font-family: 'Hobo Std';
	  text-align: center;
	}
	h5 {
	  color: rgba(102, 0, 0);
	  font-size: 4vw;
	  margin: auto;
	  overflow: hidden;
	  text-align: center;
	  font-family: 'Raleway', sans-serif;
	}
  }
  
  
  h1 {
	color: whitesmoke;
	font-family: 'Raleway', sans-serif;
  }
  h2 {
	color: whitesmoke;
	font-family: 'Raleway', sans-serif;
  }
  div {
	justify-content: center;
	text-align: center;
	margin: auto;
	overflow: hidden;
  }
  .container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }
  .responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
  }
  .gallery {
	margin: -10px;
	display: grid;
	grid-column-gap: 0px;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	overflow: hidden;
  }
  .box {
	width: 100%;
	height: 0;
	padding-bottom: 80%;
	object-fit: cover;
	display: block;
	position: relative;
	filter: brightness(80%);
	margin: -10px;
  }
  
  .box:hover {
	filter: brightness(100%);
  }
  
  .centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Raleway', sans-serif;
	font-size: 300%;
	color: #fff;
	-webkit-text-stroke-width: 0.5px;
	-webkit-text-stroke-color: black;
	margin: auto;
  }