@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marmelad&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

* {
  padding: 0;
  margin: 0;
  font-family: 'Bubblegum Sans', cursive;  
  font-family: 'Bai Jamjuree', sans-serif;
  font-family: 'Marmelad', sans-serif;
}

body {
  background-color: rgba(231, 218, 218, 0.7);
}

#party-js-container {
  display: block;
  height: 100vh!important;
} 

.confettiButton {
  position: fixed;
  left: 0;
  top: 100px;
  width: 100%;
  height: 200px;
  z-index: -100;
}

.videoAddScreen {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  z-index: 1000;
}

@media screen and (max-width: 600px) {
  .banner {
    position: fixed;
    top: 255px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 20px);
    height: 300px;
    margin: 0 0 10px 0;
    z-index: 200;
  }

  .loginScreen {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(50, 50, 70, .4), rgba(50, 50, 70, .5)), url('images/main_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .logoBlock {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: calc(100% - 20px);
    margin: 30px 0 0 0;
    height: 80px;
  }

  .gameLogotype {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 280px;
    height: 80px;
    border-radius: 6px;
    color: #155b9c;
    background-image: url('images/logotype.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 40px;
  }

  .hintsBlock {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 90%;
    height: 60px;
    margin: 10px 0;
    font-size: 18px;
    font-family: 'Bai Jamjuree';
  }
  
  .oneHint {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-family: 'Bai Jamjuree', sans-serif;
    opacity: 0;  
  }
  
  .oneHint[data-shown="true"] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-family: 'Bai Jamjuree', sans-serif;
    z-index: 5;
    animation: textFadeIn 10s infinite;
  }
  
  @keyframes textFadeIn {
    0%   {opacity: 0;}
    10%  {opacity: 0;}
    20%  {opacity: 1;}
    30%  {opacity: 1;}
    40%  {opacity: 1;}
    50%  {opacity: 1;}
    60%  {opacity: 1;}
    70%  {opacity: 1;}
    80%  {opacity: 1;}
    90%  {opacity: 0;}
    100% {opacity: 0;}  
  }

  .gameStartButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 40px;
    line-height: 40px;
    letter-spacing: 2px;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Source Sans Pro', sans-serif;  
    border: 3px solid #ffffff;
    border-radius: 25px;
    color:#ffffff;
    background-color: #15b32a;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: .3s;
  }
  
  .gameStartButton:hover {
    color: #ffffff;
    transition: .3s;
  }

  .loadingScreen {
    position: fixed;
    flex-direction: column;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(50, 50, 70, .4), rgba(50, 50, 70, .5)), url('images/main_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .loadingScaleBlock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 256px;
    height: 30px;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, .5);
  }

  .loadingText {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 10px 0;
    color: #ffffff;
    font-size: 1.4rem;
  }

  .loadingScaleWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 250px;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
  }

  .loadingScale_1, .loadingScale_2, .loadingScale_3, .loadingScale_4, .loadingScale_5 {
    display: block;
    width: 250px;
    height: 24px;
    border-radius: 12px;
    background-color: rgb(255, 211, 0);
    box-shadow: inset -3px -3px 3px 1px rgb(199, 166, 0),
                inset 3px 3px 3px 1px rgb(255, 233, 120);
  }

  .loadingScale_1 {
    animation: moveScale_1 linear 6s forwards;
  }

  .loadingScale_2 {
    animation: moveScale_2 linear 6s forwards;
  }

  .loadingScale_3 {
    animation: moveScale_3 linear 6s forwards;
  }

  .loadingScale_4 {
    animation: moveScale_4 linear 6s forwards;
  }

  .loadingScale_5 {
    animation: moveScale_5 linear 6s forwards;
  }

  @keyframes moveScale_1 {
    0%   {width: 5%;}
    10%  {width: 5%;}
    20%  {width: 5%;}
    30%  {width: 25%;}
    40%  {width: 25%;}
    50%  {width: 25%;}
    60%  {width: 75%;}
    70%  {width: 75%;}
    80%  {width: 75%;}
    90%  {width: 100%;}
    100% {width: 100%;}
  }

  @keyframes moveScale_2 {
    0%   {width: 5%;}
    10%  {width: 5%;}
    20%  {width: 5%;}
    30%  {width: 10%;}
    40%  {width: 10%;}
    50%  {width: 10%;}
    60%  {width: 55%;}
    70%  {width: 55%;}
    80%  {width: 55%;}
    90%  {width: 100%;}
    100% {width: 100%;}
  }

  @keyframes moveScale_3 {
    0%   {width: 5%;}
    10%  {width: 5%;}
    20%  {width: 5%;}
    30%  {width: 70%;}
    40%  {width: 70%;}
    50%  {width: 70%;}
    60%  {width: 90%;}
    70%  {width: 90%;}
    80%  {width: 90%;}
    90%  {width: 100%;}
    100% {width: 100%;}
  }

  @keyframes moveScale_4 {
    0%   {width: 5%;}
    10%  {width: 5%;}
    20%  {width: 5%;}
    30%  {width: 50%;}
    40%  {width: 50%;}
    50%  {width: 50%;}
    60%  {width: 60%;}
    70%  {width: 60%;}
    80%  {width: 60%;}
    90%  {width: 100%;}
    100% {width: 100%;}
  }

  @keyframes moveScale_5 {
    0%   {width: 5%;}
    10%  {width: 5%;}
    20%  {width: 5%;}
    30%  {width: 15%;}
    40%  {width: 15%;}
    50%  {width: 15%;}
    60%  {width: 25%;}
    70%  {width: 25%;}
    80%  {width: 25%;}
    90%  {width: 100%;}
    100% {width: 100%;}
  }

  .levelCompletedScreen {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(50, 50, 70, .4), rgba(50, 50, 70, .5)), url('images/main_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .levelCompletedText {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    height: 60px;
    margin: 10px 0;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: bold;
    font-family: 'Bai Jamjuree', sans-serif;
  }

  .continueButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 40px;
    line-height: 40px;
    letter-spacing: 2px;
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Source Sans Pro', sans-serif;
    border: none;
    border: 3px solid #ffffff;
    border-radius: 25px;
    color: #ffffff;
    background-color: #15b32a;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: .3s;
  }

  .noticeScreen, .noticeScreen[data-show='false'] {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(50, 50, 70, .4), rgba(50, 50, 70, .5)), url('images/main_bg.png');
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
  }

  .noticeScreen[data-show='true'] {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(50, 50, 70, .4), rgba(50, 50, 70, .5)), url('images/main_bg.png');
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
  }

  .notice[data-show='false'] {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    min-height: 80px;
    height: auto;
    border-radius: 20px;
    z-index: 120;
  }

  .notice[data-show='true'] {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    min-height: 80px;
    height: auto;
    border-radius: 20px;
    z-index: 120;
  }

  @keyframes showNotice {
    0%   {transform: scale(0)}
    100% {transform: scale(1)}
  }

  .notice {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    min-height: 80px;
    height: auto;
    color: #ffffff;
    font-size: 1rem;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, .9);
    z-index: 120;
  }

  .noticeText {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 15px 0 0 0;
  }

  .buyButtonsBlock {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .buyButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 30px;
    margin: 15px 5px;
    border: none;
    border-radius: 8px;
    color: rgb(24, 77, 31);
    font-size: 1rem;
    background-color: rgb(39, 138, 48);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .7), 
                inset -2px -2px 3px 1px rgb(24, 77, 31),
                inset 2px 2px 3px 1px rgb(127, 190, 125);
    cursor: pointer;
    transition: .5s;
  }

  .cancelButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 30px;
    margin: 15px 5px;
    border: none;
    border-radius: 8px;
    color: rgb(179, 32, 32);
    font-size: 1rem;
    background-color: rgb(238, 84, 84);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .7), 
                inset -2px -2px 3px 1px rgb(179, 32, 32),
                inset 2px 2px 3px 1px rgb(253, 139, 139);
    cursor: pointer;
    transition: .5s;
  }

  .buyButton:hover {
    color: #ffffff;
    box-shadow: 0 0 5px 3px rgba(255, 255, 255, 1), 
                inset -2px -2px 3px 1px rgb(24, 77, 31),
                inset 2px 2px 3px 1px rgb(127, 190, 125); 
    transition: .5s;
  }

  .cancelButton:hover {
    color: #ffffff;
    box-shadow: 0 0 5px 3px rgba(255, 255, 255, 1), 
                inset -2px -2px 3px 1px rgb(179, 32, 32),
                inset 2px 2px 3px 1px rgb(253, 139, 139); 
    transition: .5s;
  }

  .gameScreen {
    position: fixed;
    display: none;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100vh;
  }

  .gameContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .topPanel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 90%;
    height: auto;
    margin: 20px 0 0 0;
  }

  .playerNick {
    display: flex;
    align-items: center;
    white-space: nowrap;
    max-width: 60%;
    height: 24px;
    padding: 0 15px;
    color: #ffffff;
    font-size: 1rem;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, .5);
    overflow: hidden;
  }

  .bonusBlock {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 15px 0;
    height: 24px;
  }

  .bonusStar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 24px;
  }

  .bonusStarImage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .movingStar_1 {
    position: fixed;
    display: flex;
    width: 24px;
    height: 24px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000;
    animation: moveStar1 .5s forwards;
  }

  .movingStar_2 {
    position: fixed;
    display: flex;
    width: 24px;
    height: 24px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000;
    animation: moveStar2 .5s forwards;
  }

  .movingStar_3 {
    position: fixed;
    display: flex;
    width: 24px;
    height: 24px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000;
    animation: moveStar3 .5s forwards;
  }

  .movingStar_4 {
    position: fixed;
    display: flex;
    width: 24px;
    height: 24px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000;
    animation: moveStar4 .5s forwards;
  }

  .movingStar_5 {
    position: fixed;
    display: flex;
    width: 24px;
    height: 24px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000;
    animation: moveStar5 .5s forwards;
  }

  @keyframes moveStar1 {
    0%   {transform: scale(2) translate(-75px, 75px);
          opacity: 1;}
    100% {transform: scale(1) translate(0);
        opacity: 1;}
  }

  @keyframes moveStar2 {
    0%   {transform: scale(2) translate(-100px, 0);
          opacity: 1;}
    100% {transform: scale(1) translate(0);
        opacity: 1;}
  }

  @keyframes moveStar3 {
    0%   {transform: scale(2) translate(0, 100px);
          opacity: 1;}
    100% {transform: scale(1) translate(0);
        opacity: 1;}
  }

  @keyframes moveStar4 {
    0%   {transform: scale(2) translate(75px, 75px);
          opacity: 1;}
    100% {transform: scale(1) translate(0);
        opacity: 1;}
  }

  @keyframes moveStar5 {
    0%   {transform: scale(2) translate(100px, 0);
          opacity: 1;}
    100% {transform: scale(1) translate(0);
        opacity: 1;}
  }

  .bonusStarCount {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 5px;
    width: 70px;
    height: 24px;
    color: #ffffff;
    font-size: 1rem;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, .5);
  }

  .skipLevelButton {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 15px;
    line-height: 24px;
    /* letter-spacing: 2px; */
    margin: 0 0 0 10px;
    font-size: 0.9rem;
    font-family: 'Source Sans Pro', sans-serif;
    border: none;
    /* border: 3px solid #ffffff; */
    border-radius: 12px;
    color: #ffffff;
    background-color: #FF8D14;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  .taskBlock {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 90%;
    height: 12%;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    background-image: url('images/pattern.png');
    background-repeat: repeat;
  }

  .task {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #ffffff;
    font-size: 1.2rem;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
  }

  .levelNumber {
    position: absolute;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    line-height: 30px;
    justify-content: center;
    font-size: 1rem;
    border-radius: 20px;
    color: #ffffff;
    background-color: rgb(71, 71, 71);
  }

  .wordsBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 35%;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgba(0, 0, 0, .7);
  }
  
  .oneWord {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: 30px;
    color: #ffffff;
  }

  @media screen and (max-height: 600px) {
    .wordsBlock {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 90%;
      height: auto;
      padding: 5px 0;
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      background-color: rgba(0, 0, 0, .7);
    }

    .oneWord {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: auto;
      height: 20px;
      margin: 2px 0;
      color: #ffffff;
    }
  } 

  .wordNumber {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px 0 0;
    width: 20px;
    height: 100%;
    color: #ffffff;
    font-size: 1rem;
  }

  .word {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 230px;
    height: 100%;
    color: #ffffff;
    font-size: 1rem;
  }

  .word[data-open='false'] {
    color: rgba(255, 255, 255, .7);
    font-size: 1rem;
    letter-spacing: 2px;
  }

  .word[data-open='true'] {
    font-size: 1rem;
    animation: .5s textEmmersion
  }

  @keyframes textEmmersion {
    0%   {transform: scale(0);}
    50%  {transform: scale(1.5, 2);}
    100% {transform: scale(1, 1);}
  }

  .wordStatus {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 5px;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, .3);
  }

  .completedImage {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url('images/checkmark.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: .15s checkMark forwards;
  }

  @keyframes checkMark {
    0%   {transform: scale(15);
          opacity: 0;}
    100% {transform: scale(1.2);
          opacity: 1;}
  }

  .inputBlock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 10px 0;  
    padding: 0 3px;
    border: none;
    border-radius: 35px;
    background-color: rgba(0, 0, 0, .8);
  }

  .hintLetterButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: rgb(139, 119, 29);
    font-size: 1.2rem;
    border: none;
    border-radius: 35px;
    background-color: rgb(255, 211, 0);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .7), 
                inset -2px -2px 3px 1px rgb(199, 166, 0),
                inset 2px 2px 3px 1px rgb(255, 233, 120);
    cursor: pointer;
    transition: .5s;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  .checkWordButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 35px;
    color: rgb(24, 77, 31);
    font-size: 1.2rem;
    background-color: rgb(39, 138, 48);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .7), 
                inset -2px -2px 3px 1px rgb(24, 77, 31),
                inset 2px 2px 3px 1px rgb(127, 190, 125);
    cursor: pointer;
    transition: .5s;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  .hintLetterButton i, .checkWordButton i {
    font-size: 1.4rem;
  }

  .textInputWrapper {
    display: flex;
    align-items: center;
    margin: 0 10px;
    width: calc(100% - 44px * 2 - 10px * 2);
    height: 50px;
    overflow: hidden;
  }

  .textInput, .textInput[data-wrong='false'] {
    display: flex;
    align-items: center;
    width: auto;
    height: 50px;
    color: #ffffff;
    font-size: 1.5rem;
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
  }

  .textInput[data-wrong='true'] {
    display: flex;
    align-items: center;
    width: auto;
    height: 50px;
    color: rgb(245, 68, 68);
    font-size: 1.5rem;
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    animation: shakeWord .6s forwards;
  }

  @keyframes shakeWord {
    0%   {transform: translateX(0) scale(1);}
    10%  {transform: translateX(-5px) scale(1);}
    20%  {transform: translateX(5px) scale(1);}
    30%  {transform: translateX(-5px) scale(1);}
    40%  {transform: translateX(5px) scale(1);}
    50%  {transform: translateX(0) scale(1);}
    55%  {transform: scale(1);}
    100% {transform: scale(0);}
  }

  .textInputMark {
    display: flex;
    width: 1px;
    height: 30px;
    background-color: #ffffff;
    animation: markShine 1.4s infinite;
  }

  @keyframes markShine {
    0%   {opacity: 1;}
    50%  {opacity: 1;}
    51%  {opacity: 0;}
    100% {opacity: 0;}
  }

  .keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 98%;
    height: 22%;
  }

  @media screen and (max-height: 600px) {
    .keyboard {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 98%;
      height: 18%;
    }
  }

  .line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 25%;
  }

  .delButton {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px;
    width: 7%;
    height: calc(100% - 6px);
    color: rgba(255, 255, 255, 1);
    font-size: .8rem;
    background-color: rgba(70, 90, 160, 1);
    border-radius: 8px;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
  }

  .letterButton[data-active='false'], .delButton[data-active='false'] {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    margin: 1px;
    width: 7%;
    height: calc(100% - 6px);
    color: rgb(27, 41, 92);
    font-size: 1rem;
    border-radius: 8px;
    background-color: rgba(70, 90, 160, .4);
    transition: .3s;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent; 
  }


  .letterButton[data-active='true'] {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    margin: 1px;
    width: 7%;
    height: calc(100% - 6px);
    color: rgba(255, 255, 255, 1);
    font-size: 1rem; 
    border-radius: 8px;
    background-color: rgba(70, 90, 160, 1);
    box-shadow: inset -2px -2px 3px 1px rgb(45, 55, 94),
                inset 2px 2px 3px 1px rgb(128, 151, 238);
    transition: .3s; 
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
  }

  .delButton[data-active='true'] {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    margin: 1px;
    width: 7%;
    height: calc(100% - 6px);
    color: rgba(255, 255, 255, 1);
    font-size: 1rem; 
    border-radius: 8px;
    background-color: rgb(231, 176, 25);
    box-shadow: inset -2px -2px 3px 1px rgb(211, 138, 4),
                inset 2px 2px 3px 1px rgb(251, 209, 116);
    transition: .3s; 
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
  }

  @media screen and (max-height: 600px) {
    .delButton {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 1px;
      width: 7%;
      height: calc(100% - 6px);
      color: rgba(255, 255, 255, 1);
      font-size: .6rem;
      background-color: rgba(70, 90, 160, 1);
      border-radius: 5px;
      outline: none;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      -webkit-tap-highlight-color: transparent;
    }
  
    .letterButton[data-active='false'], .delButton[data-active='false'] {
      display: flex;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
      margin: 1px;
      width: 7%;
      height: calc(100% - 6px);
      color: rgb(27, 41, 92);
      font-size: .6rem;
      border-radius: 5px;
      background-color: rgba(70, 90, 160, .4);
      transition: .3s;
      outline: none;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      -webkit-tap-highlight-color: transparent; 
    }
  
  
    .letterButton[data-active='true'] {
      display: flex;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
      margin: 1px;
      width: 7%;
      height: calc(100% - 6px);
      color: rgba(255, 255, 255, 1);
      font-size: .6rem; 
      border-radius: 5px;
      background-color: rgba(70, 90, 160, 1);
      box-shadow: inset -2px -2px 3px 1px rgb(45, 55, 94),
                  inset 2px 2px 3px 1px rgb(128, 151, 238);
      transition: .3s; 
      cursor: pointer;
      outline: none;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      -webkit-tap-highlight-color: transparent;
    }
  
    .delButton[data-active='true'] {
      display: flex;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
      margin: 1px;
      width: 7%;
      height: calc(100% - 6px);
      color: rgba(255, 255, 255, 1);
      font-size: .6rem; 
      border-radius: 5px;
      background-color: rgb(231, 176, 25);
      box-shadow: inset -2px -2px 3px 1px rgb(211, 138, 4),
                  inset 2px 2px 3px 1px rgb(251, 209, 116);
      transition: .3s; 
      cursor: pointer;
      outline: none;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      -webkit-tap-highlight-color: transparent;
    }   
  }


  .letterButton[data-active='false']:hover,  .delButton[data-active='false']:hover {
    cursor: default;
  }

  .letterButton[data-space='true'] {
    width: 250px;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
  }

  .letterButton[data-active='true'][data-space='true']:hover {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
  }

  .fadeScreen {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    background-color: rgb(58, 58, 58);
    z-index: -1000;
  }

  .onboardingScreen {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .8);
    z-index: -1200;
  }

  .onboarding {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% - 20px);
    padding: 50px 0;
    border-radius: 15px;    
    background-image: linear-gradient(rgb(0, 205, 90), rgb(22, 175, 150));
  }

  .onboardingLogo {
    display: flex;
    width: 175px;
    height: 50px;
    background-image: url('images/logotype.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .onboardingText {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 30px 10px;
    color: #ffffff;
    font-size: 1.2rem;
  }

  .obviousButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 40px;
    line-height: 40px;
    letter-spacing: 2px;
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Source Sans Pro', sans-serif;
    border: none;
    border: 3px solid #ffffff;
    border-radius: 25px;
    color: #ffffff;
    background-color: #dabe25;
    cursor: pointer;
    outline: none;
    animation: puls 1.6s infinite;
  }

  @keyframes puls {
    0%   {transform: scale(1);}
    50%  {transform: scale(1.05);}
    100% {transform: scale(1);}
  }
}



@media screen and (min-width: 601px) {
  .banner {
    position: fixed;
    top: 295px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 20px);
    height: 300px;
    margin: 0 0 10px 0;
    color: #ffffff;
    z-index: 200;
  }

  .loginScreen {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(50, 50, 70, .4), rgba(50, 50, 70, .5)), url('images/main_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .logoBlock {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: calc(100% - 20px);
    height: 100px;
    margin: 40px 0 0 0;
  }

  .gameLogotype {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 350px;
    height: 100px;
    border-radius: 6px;
    color: #155b9c;
    background-image: url('images/logotype.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 40px;
  }

  .hintsBlock {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 700px;
    height: 40px;
    margin: 20px 0;
    font-size: 18px;
  }
  
  .oneHint {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    margin: 0 0 20px 0;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-family: 'Bai Jamjuree', sans-serif;
    opacity: 0;  
  }
  
  .oneHint[data-shown="true"] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-family: 'Bai Jamjuree', sans-serif;
    z-index: 5;
    animation: textFadeIn 10s infinite;
  }
  
  @keyframes textFadeIn {
    0%   {opacity: 0;}
    10%  {opacity: 0;}
    20%  {opacity: 1;}
    30%  {opacity: 1;}
    40%  {opacity: 1;}
    50%  {opacity: 1;}
    60%  {opacity: 1;}
    70%  {opacity: 1;}
    80%  {opacity: 1;}
    90%  {opacity: 0;}
    100% {opacity: 0;}  
  }
  
  .loginBlock {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 40px;
    margin: 0;
  }
  
  .gameStartButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 50px;
    line-height: 50px;
    letter-spacing: 2px;
    margin: 0 0 0 10px;
    font-weight: bold;
    font-size: 25px;
    font-family: 'Source Sans Pro', sans-serif;
    border: 3px solid #ffffff;
    border-radius: 30px;
    color: #ffffff;
    background-color: #15b32a;
    cursor: pointer;
    outline: none;
    transition: .3s;
  }
  
  .gameStartButton:hover {
    color: #ffffff;
    transition: .3s;
  }

  .loadingScreen {
    position: fixed;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(50, 50, 70, .4), rgba(50, 50, 70, .5)), url('images/main_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .loadingScaleBlock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 506px;
    height: 30px;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, .5);
  }

  .loadingText {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 10px 0;
    color: #ffffff;
    font-size: 1.4rem;
  }

  .loadingScaleWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 500px;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
  }

  .loadingScale_1, .loadingScale_2, .loadingScale_3, .loadingScale_4, .loadingScale_5 {
    display: block;
    width: 500px;
    height: 24px;
    border-radius: 12px;
    background-color: rgb(255, 211, 0);
    box-shadow: inset -3px -3px 3px 1px rgb(199, 166, 0),
                inset 3px 3px 3px 1px rgb(255, 233, 120);
  }

  .loadingScale_1 {
    animation: moveScale_1 linear 6s forwards;
  }

  .loadingScale_2 {
    animation: moveScale_2 linear 6s forwards;
  }

  .loadingScale_3 {
    animation: moveScale_3 linear 6s forwards;
  }

  .loadingScale_4 {
    animation: moveScale_4 linear 6s forwards;
  }

  .loadingScale_5 {
    animation: moveScale_5 linear 6s forwards;
  }

  @keyframes moveScale_1 {
    0%   {width: 5%;}
    10%  {width: 5%;}
    20%  {width: 5%;}
    30%  {width: 25%;}
    40%  {width: 25%;}
    50%  {width: 25%;}
    60%  {width: 75%;}
    70%  {width: 75%;}
    80%  {width: 75%;}
    90%  {width: 100%;}
    100% {width: 100%;}
  }

  @keyframes moveScale_2 {
    0%   {width: 5%;}
    10%  {width: 5%;}
    20%  {width: 5%;}
    30%  {width: 10%;}
    40%  {width: 10%;}
    50%  {width: 10%;}
    60%  {width: 55%;}
    70%  {width: 55%;}
    80%  {width: 55%;}
    90%  {width: 100%;}
    100% {width: 100%;}
  }

  @keyframes moveScale_3 {
    0%   {width: 5%;}
    10%  {width: 5%;}
    20%  {width: 5%;}
    30%  {width: 70%;}
    40%  {width: 70%;}
    50%  {width: 70%;}
    60%  {width: 90%;}
    70%  {width: 90%;}
    80%  {width: 90%;}
    90%  {width: 100%;}
    100% {width: 100%;}
  }

  @keyframes moveScale_4 {
    0%   {width: 5%;}
    10%  {width: 5%;}
    20%  {width: 5%;}
    30%  {width: 50%;}
    40%  {width: 50%;}
    50%  {width: 50%;}
    60%  {width: 60%;}
    70%  {width: 60%;}
    80%  {width: 60%;}
    90%  {width: 100%;}
    100% {width: 100%;}
  }

  @keyframes moveScale_5 {
    0%   {width: 5%;}
    10%  {width: 5%;}
    20%  {width: 5%;}
    30%  {width: 15%;}
    40%  {width: 15%;}
    50%  {width: 15%;}
    60%  {width: 25%;}
    70%  {width: 25%;}
    80%  {width: 25%;}
    90%  {width: 100%;}
    100% {width: 100%;}
  }

  .levelCompletedScreen {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(50, 50, 70, .4), rgba(50, 50, 70, .5)), url('images/main_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .levelCompletedText {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    height: 40px;
    margin: 20px 0;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: bold;
    font-family: 'Bai Jamjuree', sans-serif;
  }

  .continueButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 50px;
    line-height: 50px;
    letter-spacing: 2px;
    margin: 0 0 0 10px;
    font-weight: bold;
    font-size: 25px;
    font-family: 'Source Sans Pro', sans-serif;
    border: 3px solid #ffffff;
    border-radius: 30px;
    color: #ffffff;
    background-color: #15b32a;
    cursor: pointer;
    outline: none;
    transition: .3s;
  }

  .noticeScreen, .noticeScreen[data-show='false'] {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .8);
    background-image: linear-gradient(rgba(50, 50, 70, .4), rgba(50, 50, 70, .5)), url('images/main_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .noticeScreen[data-show='true'] {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .8);
    background-image: linear-gradient(rgba(50, 50, 70, .4), rgba(50, 50, 70, .5)), url('images/main_bg.png');
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
  }

  .notice, .notice[data-show='false'] {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 460px;
    min-height: 80px;
    height: auto;
    border-radius: 20px;
    z-index: 120;
  }

  .notice[data-show='true'] {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 460px;
    min-height: 80px;
    height: auto;
    border-radius: 20px;
    z-index: 120;
  }

  @keyframes showNotice {
    0%   {transform: scale(0)}
    100% {transform: scale(1)}
  }

  .notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 460px;
    min-height: 80px;
    height: auto;
    color: #ffffff;
    font-size: 2rem;
    border-radius: 18px;
    background-color: rgba(0, 0, 0, .9);
  }

  .buyButtonsBlock {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .noticeText {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 15px 0 0 0;
  }

  .buyButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 40px;
    margin: 15px 5px;
    border: none;
    border-radius: 10px;
    color: rgb(24, 77, 31);
    font-size: 1.4rem;
    background-color: rgb(39, 138, 48);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .7), 
                inset -2px -2px 3px 1px rgb(24, 77, 31),
                inset 2px 2px 3px 1px rgb(127, 190, 125);
    cursor: pointer;
    transition: .5s;
  }

  .cancelButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 40px;
    margin: 15px 5px;
    border: none;
    border-radius: 10px;
    color: rgb(179, 32, 32);
    font-size: 1.4rem;
    background-color: rgb(238, 84, 84);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .7), 
                inset -2px -2px 3px 1px rgb(179, 32, 32),
                inset 2px 2px 3px 1px rgb(253, 139, 139);
    cursor: pointer;
    transition: .5s;
  }

  .buyButton:hover {
    color: #ffffff;
    box-shadow: 0 0 5px 3px rgba(255, 255, 255, 1), 
                inset -2px -2px 3px 1px rgb(24, 77, 31),
                inset 2px 2px 3px 1px rgb(127, 190, 125); 
    transition: .5s;
  }

  .cancelButton:hover {
    color: #ffffff;
    box-shadow: 0 0 5px 3px rgba(255, 255, 255, 1), 
                inset -2px -2px 3px 1px rgb(179, 32, 32),
                inset 2px 2px 3px 1px rgb(253, 139, 139); 
    transition: .5s;
  }

  .gameScreen {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
  }

  .gameContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .topPanel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 80%;
    height: auto;
  }

  .playerNick {
    display: flex;
    align-items: center;
    white-space: nowrap;
    max-width: 60%;
    height: 40px;
    padding: 0 25px;
    color: #ffffff;
    font-size: 1.6rem;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, .5);
    overflow: hidden;
  }

  .bonusBlock {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 15px 0;
    height: 40px;
  }

  .bonusStar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 40px;
  }

  .bonusStarImage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .movingStar_1 {
    position: fixed;
    display: flex;
    width: 40px;
    height: 40px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000;
    animation: moveStar1 .5s forwards;
  }

  .movingStar_2 {
    position: fixed;
    display: flex;
    width: 40px;
    height: 40px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000;
    animation: moveStar2 .5s forwards;
  }

  .movingStar_3 {
    position: fixed;
    display: flex;
    width: 40px;
    height: 40px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000;
    animation: moveStar3 .5s forwards;
  }

  .movingStar_4 {
    position: fixed;
    display: flex;
    width: 40px;
    height: 40px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000;
    animation: moveStar4 .5s forwards;
  }

  .movingStar_5 {
    position: fixed;
    display: flex;
    width: 40px;
    height: 40px;
    background-image: url('images/star4.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000;
    animation: moveStar5 .5s forwards;
  }

  @keyframes moveStar1 {
    0%   {transform: scale(2) translate(-75px, 75px);
          opacity: 1;}
    100% {transform: scale(1) translate(0);
        opacity: 1;}
  }

  @keyframes moveStar2 {
    0%   {transform: scale(2) translate(-100px, 0);
          opacity: 1;}
    100% {transform: scale(1) translate(0);
        opacity: 1;}
  }

  @keyframes moveStar3 {
    0%   {transform: scale(2) translate(0, 100px);
          opacity: 1;}
    100% {transform: scale(1) translate(0);
        opacity: 1;}
  }

  @keyframes moveStar4 {
    0%   {transform: scale(2) translate(75px, 75px);
          opacity: 1;}
    100% {transform: scale(1) translate(0);
        opacity: 1;}
  }

  @keyframes moveStar5 {
    0%   {transform: scale(2) translate(100px, 0);
          opacity: 1;}
    100% {transform: scale(1) translate(0);
        opacity: 1;}
  }

  .bonusStarCount {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 5px;
    width: 110px;
    height: 40px;
    color: #ffffff;
    font-size: 1.6rem;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, .5);
  }

  .skipLevelButton {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    /* letter-spacing: 2px; */
    margin: 0 0 0 10px;
    font-size: 20px;
    font-family: 'Source Sans Pro', sans-serif;
    border: none;
    /* border: 3px solid #ffffff; */
    border-radius: 30px;
    color: #ffffff;
    background-color: #FF8D14;
    cursor: pointer;
    outline: none;
  }


  .taskBlock {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 12%;
    color: #ffffff;
    font-size: 2rem;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    background-image: url('images/pattern.png');
    background-repeat: repeat;
  }

  .task {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #ffffff;
    font-size: 2rem;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
  }

  .levelNumber {
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ffffff;
    background-color: rgb(71, 71, 71);
  }

  .wordsBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 40%;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgba(0, 0, 0, .7);
  }

  .oneWord {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: 34px;
    color: #ffffff;
    font-size: 1.4rem;
  }

  .wordNumber {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px 0 0;
    width: 20px;
    height: 100%;
    color: #ffffff;
    font-size: 1.4rem;
  }

  .word {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 100%;
    color: #ffffff;
    font-size: 1.4rem;
  }

  .word[data-open='false'] {
    color: rgba(255, 255, 255, .7);
    font-size: 1.4rem;
    letter-spacing: 2px;
  }

  .word[data-open='true'] {
    font-size: 1.4rem;
    animation: .5s textEmmersion
  }

  @keyframes textEmmersion {
    0%   {transform: scale(0);}
    50%  {transform: scale(1.1, 2);}
    100% {transform: scale(1, 1);}
  }

  .wordStatus {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 10px;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, .3);
  }

  .completedImage {
    display: block;
    width: 25px;
    height: 25px;
    background-image: url('images/checkmark.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: .15s checkMark forwards;
  }

  @keyframes checkMark {
    0%   {transform: scale(15);
          opacity: 0;}
    100% {transform: scale(1.2);
          opacity: 1;}
  }

  .inputBlock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 10px 0;  
    padding: 0 3px;
    border: none;
    border-radius: 35px;
    background-color: rgba(0, 0, 0, .8);
  }

  .hintLetterButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    color: rgb(139, 119, 29);
    font-size: 1.4rem;
    border: none;
    border-radius: 35px;
    background-color: rgb(255, 211, 0);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .7), 
                inset -2px -2px 3px 1px rgb(199, 166, 0),
                inset 2px 2px 3px 1px rgb(255, 233, 120);
    cursor: pointer;
    transition: .5s;
  }

  .checkWordButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: none;
    border-radius: 35px;
    color: rgb(24, 77, 31);
    font-size: 1.4rem;
    background-color: rgb(39, 138, 48);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .7), 
                inset -2px -2px 3px 1px rgb(24, 77, 31),
                inset 2px 2px 3px 1px rgb(127, 190, 125);
    cursor: pointer;
    transition: .5s;
  }

  .checkWordButton:hover {
    color: #ffffff;
    box-shadow: 0 0 7px 4px rgba(255, 255, 255, 1), 
                inset -2px -2px 3px 1px rgb(24, 77, 31),
                inset 2px 2px 3px 1px rgb(127, 190, 125); 
    transition: .5s;
  }

  .hintLetterButton:hover {
    color: #ffffff;
    box-shadow: 0 0 7px 4px rgba(255, 255, 255, 1), 
                inset -2px -2px 3px 1px rgb(165, 142, 42),
                inset 2px 2px 3px 1px rgb(236, 213, 81); 
    transition: .5s;
  }

  .hintLetterButton i, .checkWordButton i {
    font-size: 1.8rem;
  }

  .textInputWrapper {
    display: flex;
    align-items: center;
    margin: 0 15px;
    width: 400px;
    height: auto;
    overflow: hidden;
  }

  .textInput, .textInput[data-wrong='false'] {
    display: flex;
    align-items: center;
    width: auto;
    height: 70px;
    color: #ffffff;
    font-size: 2rem;
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
  }

  .textInput[data-wrong='true'] {
    display: flex;
    align-items: center;
    width: auto;
    height: 70px;
    color: rgb(245, 68, 68);
    font-size: 2rem;
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    animation: shakeWord .6s forwards;
  }

  @keyframes shakeWord {
    0%   {transform: translateX(0) scale(1);}
    10%  {transform: translateX(-5px) scale(1);}
    20%  {transform: translateX(5px) scale(1);}
    30%  {transform: translateX(-5px) scale(1);}
    40%  {transform: translateX(5px) scale(1);}
    50%  {transform: translateX(0) scale(1);}
    55%  {transform: scale(1);}
    100% {transform: scale(0);}
  }

  .textInputMark {
    display: flex;
    width: 1px;
    height: 50px;
    background-color: #ffffff;
    animation: markShine 1.4s infinite;
  }

  @keyframes markShine {
    0%   {opacity: 1;}
    50%  {opacity: 1;}
    51%  {opacity: 0;}
    100% {opacity: 0;}
  }

  .keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 22%;
  }

  .line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 25%;
  }

  .delButton {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px;
    width: 7%;
    height: calc(100% - 6px);
    color: rgba(255, 255, 255, 1);
    background-color: rgba(70, 90, 160, 1);
    border-radius: 8px;
    outline: none;
  }

  .letterButton[data-active='false'], .delButton[data-active='false'] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px;
    width: 7%;
    height: calc(100% - 6px);
    color: rgb(27, 41, 92);
    font-size: 1.2rem;
    border-radius: 8px;
    background-color: rgba(70, 90, 160, .4);
    transition: .3s; 
    outline: none;
  }


  .letterButton[data-active='true'] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px;
    width: 7%;
    height: calc(100% - 6px);
    color: rgba(255, 255, 255, 1);
    font-size: 1.2rem; 
    border-radius: 8px;
    background-color: rgba(70, 90, 160, 1);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .7), 
                inset -2px -2px 3px 1px rgb(45, 55, 94),
                inset 2px 2px 3px 1px rgb(128, 151, 238);
    transition: .3s; 
    cursor: pointer;
    outline: none;
  }

  .delButton[data-active='true'] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px;
    width: 7%;
    height: calc(100% - 6px);
    color: rgba(255, 255, 255, 1);
    font-size: 1rem; 
    border-radius: 8px;
    background-color: rgb(247, 144, 47);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .7), 
                inset -2px -2px 3px 1px rgb(211, 138, 4),
                inset 2px 2px 3px 1px rgb(251, 209, 116);
    transition: .3s; 
    cursor: pointer;
    outline: none;
  }

  .letterButton[data-active='false']:hover,  .delButton[data-active='false']:hover{
    cursor: default;
  }

  .letterButton[data-active='true']:hover {
    box-shadow: 0 0 7px 3px rgba(255, 255, 255, 1), 
                inset -2px -2px 3px 1px rgb(45, 55, 94),
                inset 2px 2px 3px 1px rgb(128, 151, 238);
    transition: .3s;
    transform: scale(1.2);
    z-index: 10; 
  }

  .delButton[data-active='true']:hover{
    box-shadow: 0 0 7px 3px rgba(255, 255, 255, 1), 
                inset -2px -2px 3px 1px rgb(211, 138, 4),
                inset 2px 2px 3px 1px rgb(251, 209, 116);
    transition: .3s;
    transform: scale(1.2);
    z-index: 10; 
  }

  .letterButton[data-space='true'] {
    width: 250px;
    outline: none;
  }

  .letterButton[data-active='true'][data-space='true']:hover {
    transform: scale(1, 1.2);
  }
  
  .fadeScreen {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    background-color: rgb(58, 58, 58);
    z-index: -1000;
  }

  .onboardingScreen {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .8);
    z-index: -1200;
  }

  .onboarding {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 400px;
    padding: 50px 30px;
    border-radius: 15px;    
    background-image: linear-gradient(rgb(0, 205, 90), rgb(22, 175, 150));
  }

  .onboardingLogo {
    display: flex;
    width: 210px;
    height: 60px;
    background-image: url('images/logotype.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .onboardingText {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    font-size: 1.6rem;
    margin: 30px 0;
  }

  .obviousButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 50px;
    line-height: 50px;
    letter-spacing: 2px;
    margin: 0 0 0 10px;
    font-weight: bold;
    font-size: 25px;
    font-family: 'Source Sans Pro', sans-serif;
    border: 3px solid #ffffff;
    border-radius: 30px;
    color: #ffffff;
    background-color: #dabe25;
    cursor: pointer;
    outline: none;
    animation: puls 1.6s infinite;
  }

  @keyframes puls {
    0%   {transform: scale(1);}
    50%  {transform: scale(1.05);}
    100% {transform: scale(1);}
  }
}