body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

.frameStyle {
  position: fixed;
  /* border: 1px black solid; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fullStyle {
  /* position: fixed; */
  /* border: 1px black solid; */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.bgSpace {
  background: rgb(11,13,35);
  background: linear-gradient(0deg, rgba(11,13,35,1) 0%, rgba(15,18,52,1) 50%, rgba(11,13,35,1) 100%);
  opacity: 0;
}

.bgEarth {
  background: rgb(229,229,229);
  background: radial-gradient(circle, rgba(229,229,229,1) 0%, rgba(217,217,217,1) 50%, rgba(229,229,229,1) 100%);
}

.fullBg {
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}

#sotu {
  width: 100vw;
  height: 100vh;
}

#startBtn {
  /* text-align: center; */
  /* line-height: 100%; */
  width: 250px; 
  padding: 10px;
  font-size: 24px;
  color: #E9F1F7;
  background-color: #5C7AFF;
  right: 25px !important;
  bottom: 25px !important;
  position: absolute;
  /* font-size: 48px; */
  border-radius: 40px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.25);
}

#supportEmail {
  left: 25px !important;
  bottom: 40px !important;
  position: absolute;
  font-size: .8rem;
  color: #4f4f4f;
}

#iosLink {
  left: 25px !important;
  bottom: 25px !important;
  position: absolute;
  font-size: .8rem;
  color: #4f4f4f;
}

.backarrow {
  position: absolute;
  font-family: 'roboto', sans-serif;
  top: 15px;
  left: 25px;
  font-size: 12px;
  color: #333;
}


dialog {
  background-color: var(--bg);
  color: var(--text-color);
  text-align: center;
  border: none;
  padding: 2rem;
  border-radius: 6px;
  box-shadow: 0 0 40px rgba(0,0,0,0.1), 0 0 10px rgba(0,0,0,0.25);
  width: 650px !important;
  top: 10vh;
  height: 425px !important;
}

#supportEmail2 {
  left: 25px !important;
  bottom: 10px !important;
  position: absolute;
  font-size: .8rem;
  color: #4f4f4f;
}

dialog[open] {
  animation: appear .15s cubic-bezier(0, 1.8, 1, 1.8);
}

#google{
  position:absolute;
  bottom:0px;
  left: 50%;
  width: 728px;
  height: 91px !important;
  margin-left: -364px; /* Half the width of the leaderboard ad. */
  z-index: 1000;
}

#startGrid {
  display: grid;
  height: 150px;
  left: 10%;
  grid-template-columns: 50% 50%;
  grid-gap: 3%;
}


/* dialog::backdrop {
  background: linear-gradient(45deg, rgba(0,143,104,.5), rgba(250,224,66,.5));
} */

dialog .actions {
  display: flex;
  justify-content: space-around;
}

@keyframes appear {
  from {
    opacity: 0;
    transform: translateX(-3rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

body {
  margin: 40px;
}

#credits {
  right: 25px;
  top: 15px;
  position: absolute;
  text-align: right;
  font-size: .8rem;
  line-height: .4;
}

.wrapper {
  display: grid;
  /* grid-template-columns: 20% 20% 20% 20%; */
  grid-gap: 10px;
  color: #444;
  padding-top: 10%;
  height: 80%
}

#startWrapper {
  padding-top: 10%
}

.tutBox {
  background-color: rgb(168, 168, 168, 0);
  color: rgb(0, 0, 0);
  border-radius: 5px;
  font-size: 12px;
  padding: 30px;
  height: 30%;
}

.nw {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  height: 20%
}
.ne {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  height: 20%

}
.sw {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 4;
  height: 20%

}
.se {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
  height: 20%
}

.box {
  background-color: rgb(168, 168, 168, 0);
  /* color: rgb(0, 0, 0); */
  border-radius: 5px;
  padding: 20px;
  font-size: 100%;
  box-shadow: 0 0 20px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.25);
  border: 0px;
  height: 100%;
}


.box:hover {
  background-color: rgb(168, 168, 168, .2);
}

    .a {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    .b {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    .c {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    .d {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    .e {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .f {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .g {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .h {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .i {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    .j {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    .k {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    .l {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    .m {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 5;
    }
    .n {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 4;
        grid-row-end: 5;
    }
    .o {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 4;
        grid-row-end: 5;
    }
    .p {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 4;
        grid-row-end: 5;
    }
    .q {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 5;
        grid-row-end: 6;
    }
    .r {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 5;
        grid-row-end: 6;
    }
    .s {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 5;
        grid-row-end: 6;
    }
    .t {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 5;
        grid-row-end: 6;
    }



    .speaker {
      height: 30px;
      width: 30px;
      text-align: center;
      font-family: arial, sans-sarif;
      position: relative !important;
      overflow: hidden;
      display: inline-block;
   }
    .speaker span {
      display: block;
      width: 8px;
      height: 8px;
      background:#333;
      margin: 11px 0 0 2px;
   }
    .speaker span:after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent #333 transparent transparent;
      border-width: 10px 14px 10px 15px;
      left: -13px;
      top: 5px;
   }
    .speaker span:before {
      transform: rotate(45deg);
      border-radius: 0 50px 0 0;
      content: '';
      position: absolute;
      width: 5px;
      height: 5px;
      border-style: double;
      border-color: #333;
      border-width: 7px 7px 0 0;
      left: 18px;
      top: 9px;
      transition: all 0.2s ease-out;
   }
    .speaker:hover span:before {
      transform: scale(.8) translate(-3px,0) rotate(42deg);
   }
    .speaker.mute span:before {
      transform: scale(.5) translate(-15px,0) rotate(36deg);
      opacity: 0;
   }

  
    
   .lang {
      width: 20px;
      height: 20px;
      position: absolute;
      left: calc(100% - 110px);
      top: 25px;
      z-index: 5;
      color: #333;
   }

   #muteToggle {
      width: 30px;
      height: 30px;
      position: absolute;
      left: calc(100% - 85px);
      top: 20px;
      /* z-index: 5; */
   }

   .hd {
    margin: 50px auto;
  width: 70px;
  height: 50px;
  position: absolute;
  position: absolute;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  -webkit-text-stroke: 1px #333;
  text-stroke: 1.5px #333;
  color: transparent;
  font-size: 24px;
  font-style: italic;
  /* letter-spacing: -10px; */
  background: linear-gradient(
    to bottom,  
    transparent 0%,
    transparent 49%,
    #333 50%,
    #333 100%
  );
  background-size: 100% 205%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background .75s;
  cursor: pointer;
   right: -5px;
   top: -30px;
    z-index: 5;
  }
  
  .hd-click {
    background-position: 100% 100%;
  }

  .hd-click:hover {
    background-position: 100% 75%;
  }


    input:before, input:after {
      content: '';
      position: absolute;
      cursor: pointer;
   }
    input:before {
      height: 0;
      width: 0;
      border-right: solid 20px #34495e;
      border-top: solid 20px transparent;
      border-bottom: solid 20px transparent;
      border-left: solid 20px transparent;
      border-radius: 4px;
      left: -8px;
      top: -9px;
   }
    input:after {
      width: 18px;
      height: 16px;
      border-radius: 3px;
      background: #34495e;
   }

    /* input[type="checkbox"]:checked ~ span {
      transform: rotate(-45deg) translateY(4px);
      left: 45px;
      height: 26px;
      background: #e74c3c;
   }
    input[type="checkbox"]:checked + span {
      transform: rotate(45deg) translateY(-4px);
   }
    span {
      width: 5px;
      background: #34495e;
      position: absolute;
      transition: all 0.3s ease-in-out;
      border-radius: 5px;
   }
    span.first {
      height: 20px;
      left: 37px;
   }
    span.second {
      height: 32px;
      left: 46px;
      top: -6px;
   } */