/*
TABLE OF CONTENTS
- Font Imports
- Variables
- General Styles
- Utilities
- Animations
- Overlay
- Reset Button
- Audio Buttons
- Slide Buttons
- Slide Layout
- Slide Background Image Setup
- Directions Slide
- Audio Slide
- Finish Slide
- Media Queries
*/

/*
FONT IMPORTS
*/
@import url('https://fonts.googleapis.com/css2?family=Mali:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

/*
VARIABLES
*/
:root {
  --orange-text: #f1a83c; /* Orange decorative text - also controls 'Begin' button color and border color for download */
  --blue-text: #a1ccec; /* Blue decorative text */
  --brown-text: #67361d; /* Brown decorative text */
  --background-color: #f9e58e; /* Body background color */
  --light-yellow-background: #fcf0ba; /* Interactive background color */
}

/*
GENERAL 
*/
* {
  outline: 0px;
}

body {
  width: 100vw;
  height: 100vh;
  padding: 20px;
  font-family: 'Nunito', sans-serif;
  color: #67361d;
  background-color: var(--background-color);
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/body-comb.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
}

h3 {
  font-family: 'Mali', cursive;
}

main.container {
  width: 100%;
  max-width: 800px;
}

.orange-text {
  color: var(--orange-text);
  -webkit-text-stroke: 0px;
}

.blue-text {
  color: var(--blue-text);
  -webkit-text-stroke: 0px;
}

.brown-text {
  color: var(--brown-text);
  -webkit-text-stroke: 0px;
}

.carousel {
  width: 100%;
  background: var(--light-yellow-background);
  position: relative;
  box-shadow: 0px 5px 35px rgba(241, 168, 60, 0.7);
}

/*
UTILITIES
*/
.center-xs {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.middle-xs {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/*
ANIMATIONS
*/
@-webkit-keyframes hovering {
  0% {
    transform: translateY(1px);
  }
  50% {
    transform: translateY(4px);
  }
  100% {
    transform: translateY(1px);
  }
}

@keyframes hovering {
  0% {
    transform: translateY(1px);
  }
  50% {
    transform: translateY(4px);
  }
  100% {
    transform: translateY(1px);
  }
}

@-webkit-keyframes hovering-hang-sink {
  100% {
    transform: translateY(1px);
  }
}

@keyframes hovering-hang-sink {
  100% {
    transform: translateY(1px);
  }
}

.carousel .hovering {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-animation-name: hovering-hang-sink, hovering;
  animation-name: hovering-hang-sink, hovering;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

/*
OVERLAY 
*/
.carousel .spelling-overlay {
  display: flex;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: var(--light-yellow-background);
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
}

.carousel .title-screen-top-comb {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/finish-slide-top-comb.png');
  width: 583px;
  height: 255px;
  top: -95px;
  left: -180px;
}

.carousel .title-screen-bottom-comb {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/finish-slide-bottom-comb.png');
  width: 584px;
  height: 254px;
  bottom: -100px;
  right: -100px;
}

.carousel .title-screen-queen-bee {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/bee-with-trail.png');
  width: 200px;
  height: 170px;
  top: 0px;
  right: 120px;
}

.carousel .title-screen-three-bees {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/three-bees.png');
  width: 93px;
  height: 94px;
  bottom: 200px;
  left: 100px;
}

/*
RESET 
*/
.reset-spelling-test-btn {
  background-color: var(--brown-text);
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-text-stroke: 0px;
}

.reset-spelling-test-btn.disabled {
  cursor: not-allowed;
}

.reset-spelling-test-btn:hover,
.reset-spelling-test-btn.disabled:hover,
.reset-spelling-test-btn:focus,
.reset-spelling-test-btn.disabled:focus,
.reset-spelling-test-btn:active,
.reset-spelling-test-btn.disabled:active {
  color: var(--orange-text);
}

/*
AUDIO BUTTONS 
*/
.carousel .click-to-play-audio {
  border: none;
  background-color: transparent;
}

.carousel .audio-slide-directions {
  margin-top: -20px;
}

/*
SLIDE BUTTONS 
*/
.carousel .next-slide-btn,
.carousel .prev-slide-btn {
  background-color: var(--orange-text);
  width: 250px;
  filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.08));
  -webkit-filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.08));
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-text-stroke: 0px;
}

.carousel .next-slide-btn:hover,
.carousel .prev-slide-btn:hover,
.carousel .next-slide-btn:focus,
.carousel .prev-slide-btn:focus,
.carousel .next-slide-btn:active,
.carousel .prev-slide-btn:active {
  filter: drop-shadow(0px 5px 17px rgba(241, 168, 60, 0.5));
  -webkit-filter: drop-shadow(0px 5px 17px rgba(241, 168, 60, 0.5));
  color: var(--brown-text);
}

/*
SLIDE LAYOUT 
*/
.carousel .carousel-inner {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 55px;
  padding-bottom: 55px;
}

.carousel .spelling-content {
  width: 85%;
  margin: 0 auto;
}

/*
SLIDE BACKGROUND IMAGE SETUP
*/
.carousel .comb-image {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

/*
DIRECTIONS SLIDE
*/
/* Directions Slide Background */
.carousel .directions-top-comb {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/directions-top-comb.png');
  width: 169px;
  height: 194px;
  top: -130px;
  left: -80px;
}

.carousel .directions-bottom-comb {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/directions-bottom-comb.png');
  width: 202px;
  height: 194px;
  bottom: -120px;
  right: -80px;
}

/* Spelling Test Image */
.carousel .spelling-test-thumbnail {
  transform: rotate(4deg);
  margin-left: -5px;
  border-color: var(--orange-text);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.08));
  -webkit-filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.08));
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -o-transform: rotate(4deg);
}

.carousel .spelling-test-thumbnail:hover,
.carousel .spelling-test-thumbnail:focus,
.carousel .spelling-test-thumbnail:active {
  filter: drop-shadow(0px 5px 7px rgba(241, 168, 60, 0.5));
  -webkit-filter: drop-shadow(0px 5px 7px rgba(241, 168, 60, 0.5));
}

.carousel .click-to-download {
  text-decoration: none;
}

.carousel .click-to-download p {
  color: var(--orange-text);
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.carousel .click-to-download:hover p,
.carousel .click-to-download:active p,
.carousel .click-to-download:focus p {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}

.carousel .start-test-btn {
  margin-bottom: -13px;
}

/*
AUDIO SLIDE
*/
/* Audio Slide Background */
.carousel .audio-slide-top-comb {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/audio-slide-top-comb.png');
  width: 205px;
  height: 194px;
  top: -160px;
  right: -40px;
}

.carousel .audio-slide-bottom-comb {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/audio-slide-bottom-comb.png');
  width: 134px;
  height: 74px;
  bottom: -80px;
  left: -20px;
}

/* Audio Slider */
.carousel .audio-slider-container {
  width: 75%;
  margin: 0 auto;
  margin-bottom: -13px;
  background: rgb(241, 205, 70);
  background: radial-gradient(
    circle,
    rgba(241, 205, 70, 1) 0%,
    rgba(218, 157, 55, 1) 80%,
    rgba(226, 176, 61, 1) 100%
  );
  border: 2px solid #67361d;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.carousel .practicePages {
  width: 100%;
  margin: 0 auto;
}

.carousel .practicePage {
  margin: 0 auto;
  width: 100%;
  display: none;
}

.carousel .current {
  display: block;
}

.imgAudioLoader {
  display: none;
}

.imgAudioClick {
  cursor: pointer;
}

.carousel .audio-slider-btn {
  background: transparent;
  border: none;
}

.carousel .audio-slider-btn i {
  font-size: 2.5em;
  color: #f8db63;
  -webkit-text-stroke: 2px #67361d;
}

.carousel button.imgAudioClick {
  background: transparent;
  border: none;
}

.carousel .bee-cage {
  overflow: hidden;
}

.carousel .bee-click {
  filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.08));
  -webkit-filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.08));
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.carousel .bee-click:hover,
.carousel .bee-click:focus,
.carousel .bee-click:active {
  filter: drop-shadow(0px 5px 17px rgba(206, 127, 9, 0.5));
  -webkit-filter: drop-shadow(0px 5px 17px rgba(206, 127, 9, 0.5));
  transform: scale(1.02);
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -ms-transform: scale(1.02);
  -o-transform: scale(1.02);
}

/*
FINISH SLIDE
*/
/* Finish Slide Background */
.carousel .finish-slide-top-comb {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/finish-slide-top-comb.png');
  width: 583px;
  height: 255px;
  top: -230px;
  left: -100px;
}

.carousel .finish-slide-bottom-comb {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/finish-slide-bottom-comb.png');
  width: 584px;
  height: 254px;
  bottom: -230px;
  right: -100px;
}

.carousel .queen-bee {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/bee-with-trail.png');
  width: 200px;
  height: 170px;
  top: -100px;
  right: 100px;
}

.carousel .three-bees {
  background-image: url('https://s3.amazonaws.com/content.accelerate-ed.com/Elementary/docs/Elementary-Spelling-Test/img/three-bees.png');
  width: 93px;
  height: 94px;
  bottom: -10px;
  left: 90px;
}

/*
MEDIA QUERIES
*/
@media all and (max-width: 767px) {
  /* Overlay */
  .carousel .title-screen-three-bees {
    bottom: 180px;
    left: 10%;
  }
  .carousel .title-screen-queen-bee {
    right: 40%;
  }
  /* Audio Slide */
  .carousel #btn_previous i,
  .carousel #btn_next i {
    font-size: 4em;
  }
  .carousel .bee-click {
    width: 70%;
  }
  /* Finish Slide */
  .carousel .queen-bee {
    top: -125px;
    right: 100px;
  }

  .carousel .three-bees {
    bottom: -10px;
    left: 40px;
  }
}

@media all and (max-width: 575px) {
  /* Overlay */
  .carousel .title-screen-queen-bee {
    top: 20%;
    right: 40%;
  }

  .carousel .title-screen-three-bees {
    bottom: 25%;
    left: 40%;
  }
  /* Directions */
  .carousel .spelling-test-thumbnail {
    width: 70%;
    margin: 0 auto;
  }
  /* Audio Slide */
  .carousel .bee-click {
    width: 100%;
  }
  /* Finish Slide */
  .carousel .queen-bee {
    right: 40%;
  }

  .carousel .three-bees {
    bottom: -25px;
    left: 25px;
  }
}