html,
body {
    background-color: dimgray;

}

.main-container {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
  
}

.swiper-container {
    width: 100%;
    height: 100%;
    
}

.swiper-slide {
    background-color: #fff;
    background-size: 100% 100%;
    background-position: 100%;
    /*    display: flex;*/
    background-repeat: no-repeat;
    align-items: center;
    background-position: center top;
    justify-content: center;
    /*    flex-direction: column;*/
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 4em;
    bottom: 0px;
    margin-bottom: 0px;
}

body {
    /*  display: flex;*/
    height: 100vh;
    width: 100%;
    font-family: "San Francisco Display Semibold";
}

@font-face {
    font-family: "San Francisco Display Semibold";
    font-style: normal;
    font-weight: 400;
    src: url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.eot?#iefix) format("embedded-opentype"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff2) format("woff2"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff) format("woff"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.ttf) format("truetype"), url("fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.svg#San Francisco Display Semibold") format("svg");
}

.BG{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

  #switch-1
  {
   
    position: absolute;
    top: 30%;
    right: 23.5%;
    width: 53%;
    height: 40%;
    /* background-color: antiquewhite; */
  }
  #switch-2,
  #switch-3,
  #switch-4,
  #switch-5,
  #switch-6
   {
    position: absolute;
    top: 40%;
    right: 42.5%;
    width: 10%;
    height: 100px;
    background: url(../images/switch.png) no-repeat top/contain;
    background-position: left top;
  }
  #switch-7
   {
    position: absolute;
    top: 45%;
    right: 49.5%;
    width: 10%;
    height: 100px;
  }
 #switch
 
   {
    position: absolute;
    top: 40%;
    right: 50.5%;
    width: 10%;
    height: 100px;
    background: url(../images/switch.png) no-repeat top/contain;
    background-position: left top;
  }
  
  .congrate{
   display: flex;
    font-size: 10rem;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: aliceblue;
    /* background: url(../images/congrate1.jpg) no-repeat top/contain; */

  }

  .error{
      display: none;
    font-size: 6rem;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: #ffffff;
    width: 100%;
    height: 70%;
    position: absolute;
    left: 0%;
    top: 14%;
    background-color: #6967bf;
    z-index: 999999;
  }
.close{
    float: right;
    font-size: 4.5rem;
    padding: 1%;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    opacity: 1;

}

.playAgain{
  display: flex;
  font-size: 4rem;
  justify-content: center;
  text-align: center;
  align-items: center;
  color: aliceblue;
  top: 20%;
}
.playBtn{
  background: antiquewhite;
  color: #000000;
  padding: 1% 2%;
  border: 3px solid;
  border-radius: 36px;
}
button {
  border-radius: 40px;
}