html {
    background-color: #EEFCFF;
  }
  
  html, body {margin: 0; height: 100%; overflow: hidden}



  input[type="text"] {
    font-size:1rem;
}
  
  #container {
    max-width: 768px;
    min-width: 300px;
    height: 100vh;
    background-image: url(/assets/bkg-light.png);
    background-repeat: repeat-y;
    background-position: center;
    background-size: contain;
    position: relative;
    margin: auto;
    overflow-y: hidden;
  
  }
  
  #header{
     text-align: center;
  }
  
  #title {
    width: 100%;
  
  }
  
  

  .blue-txt{
    color: #000AEA;
    font-weight: bold;
  }


  .nextIcon{
    position: relative;
    left: 3px;
    top: 1px;
    width: 11%;
  }
  
  /* ----- Landing Page ----- */
  
  #landingPage{
    background-color: #ffffff;
    opacity: .9;
  }
  
  #landingPage.fadeOut{
      animation: fadeOut .5s linear forwards;
  }
  
  #exampleImgContainer{
      display: flex;
      justify-content: center;
      max-width: 768px;
      height: 12rem;
      text-align: center;
      position: relative;
      margin-top: 2rem;
      
  }
  
  #blurredImg{
      position: absolute;
      width: 195px;
      bottom: 0;
      
  
  }
  
  #AIRibbon{
    position: absolute;
    width: 35%;
    bottom: -15px;
    right: 21%;
  }

 #imgContainer{
 
    margin-bottom: -2rem;
 }
  
  #beginCTA{
    height: auto;
    
    padding: 30px;    
    padding-bottom: 0px !important;

    margin-top: 1rem;
  }
  
  #beginCTA p {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      line-height: 1.5rem;
     
  }

  .red{
    color: red !important;
  }

  #finalBanner{
    background-color: #070020;
    width: 100%;
    margin: auto;
    text-align: center;
    position: relative;
  }

  footer{
    position: fixed;
    margin-top: 2rem;
    bottom: 0;
  }


  #finalCTA{
    height: auto;
    background-color: #ffffff;
    padding: 30px;
    opacity: .9;
    font-size: 15px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 5rem;
  }

  #finalCTA p{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    line-height: 1.5rem;
    text-align: left;
    margin: 0;
  }



  #cheersTxt{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #ffffff;
    font-size: 18px;
    margin: 0;
    padding: .5rem;
  }

  #choices{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #ffffff;
    font-size: 10px;
    margin: 0;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  footer img{
      width: 100%;
      bottom: -4px;
      position: fixed;
  
  
  
  }
  #cheersTxtContainer{
    height: auto;
    text-align: center;
    background-color: #070020;

  }

  #choicesTxtContainer{
    height: 2rem;
    text-align: center;
    background-color: #070020;

  }

  #loadingTxtContainer{
    height: 100px;
    text-align: center;
  }

  #loadingTxtContainer p {
font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
    font-style: italic;
  }

  #footerContainer{
    position: absolute;
  }
  
  #btnContainer{
      display: flex;
      justify-content: center;
     padding-top: 1rem;
    
      padding-bottom: 2.75rem;
      
  }
  
  
  .button {
      border-radius: 11px;
      background-color: #EA3524;
      outline: 1px solid #ffffff;
      border: none;
      padding: 11px;
      padding-left: 20px;
      padding-right: 20px;
      color: #ffffff;
      width: 7rem;
      
  }
  
  .button span { 
      color: #ffffff;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
  }
  
  
   /* ----- Carousel Section ----- */
  
   #carousel.fadeIn {
      animation: fadeIn .5s linear forwards;
   }
  
   .slider-wrapper {
      margin: 1rem;
      position: relative;
      overflow: hidden;
    }
    
    .slides-container {
      height: 15rem;
      overflow-x: hidden;
      width: 100%;
      display: flex;
     
      scroll-behavior: smooth;
      list-style: none;
      margin: 0;
      padding: 0;
      margin-top: 3rem;
    }
    
    .slide-arrow {
      position: absolute;
      display: flex;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 4rem;
      background-color: white;
      border: none;
      width: 2rem;
      font-size: 3rem;
      padding: 0;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 100ms;
    }
    
    .slide-arrow:hover,
    .slide-arrow:focus {
      opacity: 1;
    }
    
    #slide-arrow-prev {
      left: 0;
      padding-left: 0.25rem;
      border-radius: 0 2rem 2rem 0;
    }
    
    #slide-arrow-next {
      right: 0;
      padding-left: 0.75rem;
      border-radius: 2rem 0 0 2rem;
    }
    
    .slide {
      width: 100%;
      height: 100%;
      flex: 1 0 100%;
    
    }
    
    .slide:nth-child(1) {
      background-color: #FF0000;
    }
    
    .slide:nth-child(2) {
      background-color: #FF0000;
    }
    
    .slide:nth-child(3) {
      background-color: #FF0000;
      margin: 0;
    }
  
    .slideFlex{
      display: flex;
      align-items: center; 
      overflow-x: hidden;
      justify-content: center; 
      flex-direction: column; 
      height: 100%;
   
   
  
    }
  #animalTxt{
      text-align: center;
      
  }
  
  #animalPrompt{
      padding-right: 0px !important;
  }
  
    .slide-arrow{
      z-index: 2;
    }
  
    .promptTxt{
      color: #ffffff;
      text-align: center;
      font-weight: lighter;
      line-height: 1.8rem;
      font-size: 23px;
      font-family: Arial, Helvetica, sans-serif;
      
      padding: 20px;
    }
  
    .promptInputField{
  
  
      font-size: 2rem;
      font-family: Arial, Helvetica, sans-serif;
      padding: 20px;    padding-top: 0px !important;
    }
  
    .promptInputField input {
      height: 37px;
      margin-right: 1rem;
      width: 200px;
    }
    
    .slideFlexChild{
        text-align: center;
    }
    #blueLine{
        height: 1px;
        border-top: 1px solid #2C10FF;
        margin-top: .25rem;
        padding-bottom: .25rem;

    }


    #blueTxtP{
        color: #2C10FF;
        font-size: 13px;
    }

    #tryAgainBtn{
        width: 11rem;
    }


   /* ----- Loading Screen ----- */

  #loadingIconContainer{
    display: flex;
    position: relative;
    justify-content: center;
    margin-top: 20px;
  }

  #finalImg{
    width: 100%;
  }

  #final{
    text-align: center;
  }

  #snowFlake{
    height: 150px;
    margin: auto;

    -webkit-animation: rotating 2s linear infinite;
  }

  
  

  /* ----- Media Queries  ----- */
  

  
  @media all and (min-width: 450px){
    #beginCTA{
        height: auto;
        background-color: #ffffff;
        padding: 30px;
        opacity: .9;
        margin-top: 4rem;
      }
  #title{
      width: 62%
  }

  #finalImg {
    width: 40%;
    margin-top: 3rem;
}

#AIRibbon {
    position: absolute;
    width: 21.5%;
    margin-top: 11.5%;
    margin-left: 3%;
}

#container {

    background-repeat: repeat-x;

}
  }
  
  
  
  
  
  /* ----- Keyframes for animations ----- */
  
  @keyframes fadeOut {
      0% { opacity:1; }
      50% { opacity:.5; } 
      100% { opacity:0; } 
  }
  
  @keyframes fadeIn {
      0% { opacity:0; }
      50% { opacity:.5; } 
      100% { opacity:1; } 
  }

  @keyframes rotating {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}