@font-face {
  font-display: swap;
  font-family: 'Aboreto';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/aboreto-v2-latin-regular.eot); /* IE9 Compat Modes */
  src: url(fonts/aboreto-v2-latin-regular.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
       url(fonts/aboreto-v2-latin-regular.woff2) format('woff2'), /* Super Modern Browsers */
       url(fonts/aboreto-v2-latin-regular.woff) format('woff'), /* Modern Browsers */
       url(fonts/aboreto-v2-latin-regular.ttf) format('truetype'), /* Safari, Android, iOS */
       url(fonts/aboreto-v2-latin-regular.svg#Aboreto) format('svg'); /* Legacy iOS */
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/inter-v12-latin-regular.eot); /* IE9 Compat Modes */
  src: url(fonts/inter-v12-latin-regular.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
       url(fonts/inter-v12-latin-regular.woff2) format('woff2'), /* Super Modern Browsers */
       url(fonts/inter-v12-latin-regular.woff) format('woff'), /* Modern Browsers */
       url(fonts/inter-v12-latin-regular.ttf) format('truetype'), /* Safari, Android, iOS */
       url(fonts/inter-v12-latin-regular.svg#Inter) format('svg'); /* Legacy iOS */
}

@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url(fonts/inter-v12-latin-800.eot); /* IE9 Compat Modes */
  src: url(fonts/inter-v12-latin-800.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
       url(fonts/inter-v12-latin-800.woff2) format('woff2'), /* Super Modern Browsers */
       url(fonts/inter-v12-latin-800.woff) format('woff'), /* Modern Browsers */
       url(fonts/inter-v12-latin-800.ttf) format('truetype'), /* Safari, Android, iOS */
       url(fonts/inter-v12-latin-800.svg#Inter) format('svg'); /* Legacy iOS */
}

.title-picture, .asking-parents, .sad-one, .sad-two, .sad-three, .sad-four, .snack-not-sad, .read, .get-to-bed, .spot-goose, .rascal, .be-quiet, .caught, .parents-geese-one, .parents-geese-two, .gets-cookie, .happy-family, .statement {
  position: relative;
  min-height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
} 

.title-picture {
  background-image: url("images/title-picture.jpg");
}

.asking-parents {
  background-image: url("images/asking-parents.jpg");
} 

.sad-one {
 background-image: url("images/sad-one.jpg");
}

.sad-two {
  background-image: url("images/sad-two.jpg");
}

.sad-three {
  background-image: url("images/sad-three.jpg");
}

.sad-four {
  background-image: url("images/sad-four.jpg");
}

.snack-not-sad {
  background-image: url("images/snack-not-sad.jpg");
}

.read {
 background-image: url("images/read.jpg");
}

.get-to-bed {
 background-image: url("images/get-to-bed.jpg");
}

.spot-goose {
 background-image: url("images/spot-goose.jpg");
}

.rascal {
 background-image: url("images/rascal.jpg");
}

.be-quiet {
 background-image: url("images/be-quiet.jpg");
}

.caught {
  background-image: url("images/caught.jpg");
}

.parents-geese-one {
 background-image: url("images/parents-geese-one.jpg");
}

.parents-geese-two {
 background-image: url("images/parents-geese-two.jpg");
}

.gets-cookie {
 background-image: url("images/gets-cookie.jpg");
}

.happy-family {
  background-image: url("images/happy-family.jpg");
}

.statement {
  background-image: url("images/statement.jpg");
}

body, html {
 height: 100%;
 margin: 0;
 font-family: 'Inter', sans-serif;
 font-style: normal;
 font-weight: 400;
 font-size: 15px;
 line-height: 1.8;
 color: #777;
 scroll-behavior: smooth;
}

p {
  border-radius: 5px;
}

#start, h3 {
  font-family: 'Aboreto', sans-serif;
  font-style: normal;
  font-weight: 400;
}

/*This button activates the scrolling sound function*/

.button {
  display: block;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  text-decoration: none;
  position: absolute;
  justify-content: center;
  top: 5rem;
  left: 46%;
  font-size: 12px;
  text-decoration: none;
  padding: .5rem;
  margin: 0 auto;
}

.caption {
  position: absolute;
  left: 0;
  top: 25%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: white;
  color: black;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

.indent {
  text-indent: 25px;
}

.Sybil-1 {
  position: absolute;
  right: 10%;
  top: 5%;
  width: 25%;
  padding: 0 1rem;
  background-color: white;
}

.parents-1 {
  position: absolute;
  left: 7%;
  top: 20%;
  width: 27%;
  padding: 0 1rem;
  background-color: white;
}

.Sybil-2 {
  position: absolute;
  right: 20%;
  top: 72%;
  width: 41%;
  text-align: justify;
  padding: 0 1rem;
  background-color: white;
}

.parents-2 {
  position: absolute;
  left: 13%;
  top: 85%;
  width: 34%;
  text-align: center;
  background-color: white;
}

.Sybil-3 {
  position: absolute;
  left: 20px;
  top: 5%;
  width: 40%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;
  border-radius: 5px;
}

.Sybil-4 {
  position: absolute;
  right: 20px;
  top: 5%;
  width: 50%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;
  border-radius: 5px;
}

.Sybil-5 {
  font-size: 50px;
}

.Sybil-6 {
  position: absolute;
  right: 4%;
  top: 65%;
  width: 45%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;
  border-radius: 5px;
}

.Sybil-7 {
  position: absolute;
  right: 8%;
  top: 15%;
  width: 33%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;  
  border-radius: 5px;
}

.Sybil-8 {
  position: absolute;
  right: 29%;
  top: 20%;
  width: 25%;
  text-align: justify;
  padding: 0 1rem;  
  background-color: white;    
}

/* I positioned .geese-1 and .honking to look as though it was one section because 
I thought it looked sleek and will help viewers know what sound the clip will play */

.geese-1 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 800;
  position: absolute;
  left: 28%;
  top: 64%;
  width: 14%;
  text-align: justify;
  padding: 0 1rem;  
  background-color: white;
  font-size: 34px;  
}

.honking {
  position: absolute;
  left: 28%;
  top: 75%;
  width: 14%;
  text-align: justify;
  padding: 1rem;  
  background-color: white;
  border-radius: 5px;
  font-size: 34px;
}

.Sybil-9 {
  position: absolute;
  right: 11%;
  top: 84%;
  width: 37%;
  text-align: center;
  background-color: white;
}

.parents-3 {
  position: absolute;
  right: 20%;
  top: 20%;
  width: 26%;
  text-align: justify;
  padding: 0 1rem;  
  background-color: white;  
}

.Sybil-10 {
  position: absolute;
  right: 3%;
  top: 6%;
  width: 34%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;
}

.parents-4 {
  position: absolute;
  right: 3%;
  top: 39%;
  width: 32%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;
}

.parents-5 {
  position: absolute;
  right: 6%;
  top: 7%;
  width: 34%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;
}

.parents-6 {
  position: absolute;
  right: 6%;
  top: 40%;
  width: 27%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;
}

.Sybil-11 {
  position: absolute;
  right: 30%;
  top: 3%;
  width: 35%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;
}

.Sybil-12 {
  position: absolute;
  right: 14%;
  top: 24%;
  width: 29%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;
}

h3 {
  text-align: center;
}

/* I made the credits and project statement separate boxes because I thought 
it looked strange in one box due to extra white space */

.ending {
  font-size: 15px;
  text-indent: 25px;
  position: absolute;
  left: 17%;
  top: 9%;
  width: 27%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;
  border-radius: 5px;
  text-align: center;
}

.ending-2 {
  font-size: 15px;
  text-indent: 25px;
  position: absolute;
  left: 5%;
  top: 35%;
  width: 50%;
  text-align: justify;
  background-color: white;
  padding: 0 1rem;
  border-radius: 5px;
}