@font-face {
  font-family: "Druk Text LCG";
  font-weight: 900;
  font-style: normal;
  src:  local("Druk Text LCG Heavy"), 
        local("DrukTextLCG-Heavy"),
        url(../fonts/DrukTextLCG-Heavy.woff2) format("woff2"), 
        url(../fonts/DrukTextLCG-Heavy.woff)  format("woff"), 
        url(../fonts/DrukTextLCG-Heavy.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Druk Text LCG";
  font-weight: 900;
  font-style: italic;
  src:  local("Druk Text LCG Heavy Italic"), 
        local("DrukTextLCG-HeavyItalic"),
        url(../fonts/DrukTextLCG-HeavyItalic.woff2) format("woff2"), 
        url(../fonts/DrukTextLCG-HeavyItalic.woff)  format("woff"), 
        url(../fonts/DrukTextLCG-HeavyItalic.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Druk Text LCG";
  font-weight: 500;
  font-style: normal;
  src:  local("Druk Text LCG Medium"), 
        local("DrukTextLCG-Medium"),
        url(../fonts/DrukTextLCG-Medium.woff2) format("woff2"), 
        url(../fonts/DrukTextLCG-Medium.woff)  format("woff"), 
        url(../fonts/DrukTextLCG-Medium.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Druk Text LCG";
  font-weight: 500;
  font-style: italic;
  src:  local("Druk Text LCG Medium Italic"), 
        local("DrukTextLCG-MediumItalic"),
        url(../fonts/DrukTextLCG-MediumItalic.woff2) format("woff2"), 
        url(../fonts/DrukTextLCG-MediumItalic.woff)  format("woff"), 
        url(../fonts/DrukTextLCG-MediumItalic.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Druk Text LCG";
  font-weight: 900;
  font-style: normal;
  src:  local("Druk Text LCG Super"), 
        local("DrukTextLCG-Super"),
        url(../fonts/DrukTextLCG-Super.woff2) format("woff2"), 
        url(../fonts/DrukTextLCG-Super.woff)  format("woff"), 
        url(../fonts/DrukTextLCG-Super.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Druk Text LCG";
  font-weight: 900;
  font-style: italic;
  src:  local("Druk Text LCG Super Italic"), 
        local("DrukTextLCG-SuperItalic"),
        url(../fonts/DrukTextLCG-SuperItalic.woff2) format("woff2"), 
        url(../fonts/DrukTextLCG-SuperItalic.woff)  format("woff"), 
        url(../fonts/DrukTextLCG-SuperItalic.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Druk Text Wide LCG";
  font-weight: 700;
  font-style: italic;
  src:  local("Druk Text Wide LCG Bold Italic"), 
        local("DrukTextWideLCG-BoldItalic"),
        url(..//fonts/DrukTextWideLCG-BoldItalic.woff2) format("woff2"), 
        url(..//fonts/DrukTextWideLCG-BoldItalic.woff)  format("woff"), 
        url(..//fonts/DrukTextWideLCG-BoldItalic.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Druk Text Wide LCG";
  font-weight: 700;
  font-style: italic;
  src:  local("Druk Text Wide LCG Bold Italic"), 
        local("DrukTextWideLCG-BoldItalic"),
        url(..//fonts/DrukTextWideLCG-BoldItalic.woff2) format("woff2"), 
        url(..//fonts/DrukTextWideLCG-BoldItalic.woff)  format("woff"), 
        url(..//fonts/DrukTextWideLCG-BoldItalic.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Druk Text Wide LCG";
  font-weight: 900;
  font-style: italic;
  src:  local("Druk Text Wide LCG Super Italic"), 
        local("DrukTextWideLCG-SuperItalic"),
        url(..//fonts/DrukTextWideLCG-SuperItalic.woff2) format("woff2"), 
        url(..//fonts/DrukTextWideLCG-SuperItalic.woff)  format("woff"), 
        url(..//fonts/DrukTextWideLCG-SuperItalic.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  font-weight: 900;
  font-style: italic;
  src:  local("Gilroy Black Italic"), 
        local("Gilroy-BlackItalic"),
        url(..//fonts/Gilroy-BlackItalic.woff2) format("woff2"), 
        url(..//fonts/Gilroy-BlackItalic.woff)  format("woff"), 
        url(..//fonts/Gilroy-BlackItalic.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  font-weight: 700;
  font-style: italic;
  src:  local("Gilroy Bold Italic"), 
        local("Gilroy-BoldItalic"),
        url(..//fonts/Gilroy-BoldItalic.woff2) format("woff2"), 
        url(..//fonts/Gilroy-BoldItalic.woff)  format("woff"), 
        url(..//fonts/Gilroy-BoldItalic.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  font-weight: 500;
  font-style: italic;
  src:  local("Gilroy Medium Italic"), 
        local("Gilroy-MediumItalic"),
        url(..//fonts/Gilroy-MediumItalic.woff2) format("woff2"), 
        url(..//fonts/Gilroy-MediumItalic.woff)  format("woff"), 
        url(..//fonts/Gilroy-MediumItalic.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  font-weight: 400;
  font-style: normal;
  src:  local("Gilroy Regular"), 
        local("Gilroy-Regular"),
        url(..//fonts/Gilroy-Regular.woff2) format("woff2"), 
        url(..//fonts/Gilroy-Regular.woff)  format("woff"), 
        url(..//fonts/Gilroy-Regular.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  font-weight: 400;
  font-style: italic;
  src:  local("Gilroy Regular Italic"), 
        local("Gilroy-RegularItalic"),
        url(..//fonts/Gilroy-RegularItalic.woff2) format("woff2"), 
        url(..//fonts/Gilroy-RegularItalic.woff)  format("woff"), 
        url(..//fonts/Gilroy-RegularItalic.eot)  format("eot");
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  font-weight: 600;
  font-style: normal;
  src:  local("Gilroy Semi Bold"), 
        local("Gilroy-SemiBold"),
        url(..//fonts/Gilroy-SemiBold.woff2) format("woff2"), 
        url(..//fonts/Gilroy-SemiBold.woff)  format("woff"), 
        url(..//fonts/Gilroy-SemiBold.eot)  format("eot");
  font-display: swap;
}

body, html {
  /* width: 100vw;
  height: 100vh; */
  display: block;
  position: relative;
  justify-content: center;
  overflow-x: hidden;
  height: 100%;
}


h1 {
  /* width: 315px; */
  height: auto;
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 4.32vh;
  line-height: 5.19vh;
  /* line-height: 36px; */
  text-transform: uppercase;
}

p {
  /* width: 311px; */
  height: 9vh;
  /* height: 63px; */
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: 400;
  font-size: 2.59vh;
  /* font-size: 18px; */
  line-height: 3vh;
  /* line-height: 21px; */
}






.header_conteiner {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
.smartLogo {
  justify-self: center;
  margin-top: 7.2vh;
  /* margin-top: 50px; */
  width: 88vw;
}

.flex_minds {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 9.2vh; */
  /* height: 64px; */
  gap: 2.3vw;
  /* gap: 37px; */
  /* border-bottom: 2px solid; */
  /* margin-top: 8vh;
  margin-bottom: 8vh; */
  padding-top: 1vh;
  padding-bottom: 1vh;
}

hr {
  size: 2px;
  margin: 0 auto;
  color: black;
  width: 88vw;
} 
h4 {
  font-family: 'Gilroy';
  font-style: italic;
  font-weight: 500;
  font-size: 1.95vw;
  line-height: 2.26vw;
  /* font-size: 25px;
  line-height: 29px; */
  text-transform: uppercase;
}







.main_conteiner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;
  gap: 2.34vw;
  /* gap: 30px; */
  /* padding: 3.28vw 6.87vw; */
  padding: 3.28vw 6.7vw;
  /* padding: 42px 88px; */
}

.card_one_box {
  grid-column: 1 / 3;
  width: 24.6vw;
  /* height: 607px; */
  display: flex;
  flex-direction: column;
}

.game_one-0 {
  grid-column: 1 / 3;
  width: 24.6vw;
  /* width: 315px; */
  display: flex;
  flex-direction: column;
}
.game_one-resp {
  display: none;
}
.container-game-1 {
  /* width: 24vw; */
  /* width: 315px; */
  /* height: 116vh;
  height: 32vh; */
  /* height: 226px; */
}




.one_text_section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 1.5vh;
  /* gap: 15px; */
  padding-top: 1.44vh;
  /* padding-top: 10px; */
}
.title_topic-1 {
  width: auto;
}
.topic-1 {
  width: auto;
}


.important_topic {
  margin-top: 8.92vh;
  /* margin-top: 6.92vh; */
  /* margin-top: 48px; */
  /* height: 63px; */
  font-family: 'Druk Text Wide LCG';
  font-style: italic;
  font-weight: 900;
  font-size: 2.88vh;
  /* font-size: 20px; */
  line-height: 3.6vh;
  /* line-height: 25px; */
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  background-color: black;
}
.seed {
  font-family: 'Druk Text Wide LCG';
  font-style: italic;
  font-weight: 700;
  font-size: 3.3vh;
  /* font-size: 25px; */
  line-height: 4.6vh;
  /* line-height: 32px; */
  text-transform: uppercase;
  margin-top: 2.3vh;
  /* margin-top: 15px; */
}


.card_two_box {
  grid-column: 3 / 6;
  /* width: 488px;
  height: 607px; */
  display: flex;
  flex-direction: column;
}
.game_two {
  grid-column: 3 / 6;
  display: flex;
  flex-direction: column;
  /* height: 47.3vh; */
  /* height: 432px; */
  background: #84D0E8;
  overflow: hidden;
}
.game_two {
  filter: grayscale(100%);
}
.game_two:hover {
  filter: grayscale(0);
}
.btn:active{
  background-color: rgb(123, 180, 17);
}

.container-btns-1 {
  display: flex;
  justify-content: center;
  margin-right: 0.3vw;
  /* margin-right: 4px; */
}
button {
  padding: 15px 25px;
  background: #898989;
  border-radius: 500px;
  font-family: 'Gilroy';
  /* font-size: 3.6vh; */
  
  font-size: 25px;
  text-transform: uppercase;
  color: #FFFFFF;
  border: none;
}
.fun {
  margin-right: 8px;
  /* padding: 15px 25px; */
  /* width: 162px; */
  width: auto;
  /* background: #898989; */
  /* border-radius: 500px; */
  /* margin-top: 27px; */
  margin-top: 3vh;
  margin-left: 4px;
  font-family: 'Gilroy';
  /* font-size: 2.5vh; */
  text-transform: uppercase;
  color: #FFFFFF;
  border: none;
  /* background-color: #3eadfd; */
}
/* .fun:hover {
  background: #FDDC3E;
} */
.fun:active {
  background-color: #EA3B3B;
}
.fun:after {
  background-color: #EA3B3B;  
}
input:checked ~ butt {
  border-color: green;
}
.philosophical {
  margin-top: 27px;
}
.philosophical:hover {
  background: #FDDC3E;
}
.container-btns-2 {
  display: flex;
  justify-content: center;
  margin-right: 4px;
  margin-top: 5px;
}
.balanced {
  margin-right: 8px;
  margin-left: 42px;
}
.balanced:hover {
  background: #FDDC3E;
}
.mischievous:hover {
  background: #FDDC3E;
}
.container-btns-3 {
  display: flex;
  justify-content: center;
  margin-right: 4px;
  margin-top: 5px;
}
.good {
  margin-right: 8px;
}
.good:hover {
  background: #FDDC3E;
}
.mystical:hover {
  background: #FDDC3E;
}
.container-btns-4 {
  display: flex;
  justify-content: center;
  margin-right: 4px;
  margin-top: 5px;
}
.disturbing {
  margin-right: 8px;
  margin-left: 17px;
}
.cordial:hover {
  background: #FDDC3E;
}
.disturbing:hover {
  background: #FDDC3E;
}
.container-btns-5 {
  display: flex;
  justify-content: center;
  margin-right: 4px;
  margin-top: 5px;
}
.sad {
  margin-right: 8px;
}
.sad:hover {
  background: #FDDC3E;
}
.gloomy:hover {
  background: #FDDC3E;
}
.container-btns-6 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-right: 4px;
  margin-top: 5px;
  /* margin-bottom: 27px; */
  margin-bottom: 3.8vh;
}
.aggressive {
  margin-right: 8px;
}
.aggressive:hover {
  background: #FDDC3E;
}
.lousy:hover {
  background: #FDDC3E;
}
.two_text_section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 15px;
  padding-top: 10px;
}
.title_topic-2 {
  width: auto;
}
.mouse {
  overflow: hidden;
}
.running_mouse {
  width: 227px;
  height: 294px;
  position: sticky;
  animation: running_mouse 4s infinite ease-out;
  overflow-clip-margin: content-box;
  overflow: clip;
}
@keyframes running_mouse {
  0% {transform: translate(100px, -209px)}
  20% {transform: translate(-116px, 56px)}
  40% {transform: translate(-545px, 3px)}
  80% {transform: translate(200px, 180px)}
  100% {transform: translate(264px, -255px);}
  }
  .running_mouse2 {
    width: 353px;
    height: 207px;
    position: sticky;
    animation: running_mouse2 4s infinite ease-out;
    overflow: clip;
  }
  @keyframes running_mouse2 {
    0% {transform: translate(19px, 321px)}
    20% {transform: translate(184px, -352px)}
    40% {transform: translate(-169px, -86px)}
    80% {transform: translate(475px, 413px)}
    100% {transform: translate(-85px, -23px);}   
}
.running_mouse3 {
  width: 256px;
  height: 301px;
  position: sticky;
  animation: running_mouse3 4s infinite ease-out;
  overflow: clip;
}
@keyframes running_mouse3 {
  0% {transform: translate(-331px, -633px)}
  20% {transform: translate(77px, -500px)}
  40% {transform: translate(-45px, -140px)}
  80% {transform: translate(-255px, -103px)}
  100% {transform: translate(-308px, 217px);}   
}


.card_three_box {
  grid-column: 6 / 8;
  /* width: 315px; */
  height: auto;
  display: flex;
  flex-direction: column;
}
.game-three {
  position: relative;
  overflow: hidden;
}
.game-three{
  filter: grayscale(100%);
}
.game-three:hover {
  filter: grayscale(0);
}
.game_three {
  grid-column: 6 / 8;
  width: 315px;
  display: flex;
  flex-direction: column;
}
.game_three-img {
  width: 100%;
  height: auto;
}
.game-three-thing {
  position: absolute;
  top: -50px;
  left: -11px;
  width: 200px;
  height: 200px;
  background: #D9D9D9;
  border-radius: 300px;
  transform: rotate(341deg);
  filter: blur(0);
  transition: all 1.5s ease-out;
  opacity: 0.5;
  background: #84D0E8;
}
.game-three-thing:hover {
  width: 200px;
  top: 4px;
  transform: rotate(348deg);
  filter: blur(10px);
  transition: all 1.5s ease-out;
}
.game-three-thing2 {
  position: absolute;
  top: 61px;
  left: 151px;
  width: 184px;
  height: 184px;
  background: #D9D9D9;
  border-radius: 300px;
  transform: rotate(341deg);
  filter: blur(0);
  transition: all 1.5s ease-out;
  opacity: 0.5;
  background: #84D0E8;
}
.game-three-thing2:hover {
  width: 184px;
  top: 4px;
  transform: rotate(348deg);
  filter: blur(10px);
  transition: all 1.5s ease-out;
}
.game-three-thing3 {
  position: absolute;
  top: 104px;
  left: -12px;
  width: 184px;
  height: 184px;
  background: #D9D9D9;
  border-radius: 300px;
  transform: rotate(341deg);
  filter: blur(0);
  transition: all 1.5s ease-out;
  opacity: 0.5;
  background: #84D0E8;
}
.game-three-thing3:hover {
  width: 184px;
  top: 104px;
  transform: rotate(348deg);
  filter: blur(10px);
  transition: all 1.5s ease-out;
}

.three_text_section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 15px;
  padding-top: 10px;
}
.title_topic-3 {
  width: auto;
}

.qr {
  grid-column: -3 / -1;
  margin-top: 71px;
  animation: qr 0.5s steps(1) infinite;
  margin-top: 10vh;
  animation-play-state: running;
}
@keyframes qr {
  0% {color: #FF4B00;}
  50% {color: white;}
}

/* .color {
  filter: grayscale(100%);
}
.color:hover {
  filter: grayscale(0);
} */

.container-game-1 {
  filter: grayscale(100%);
}
.container-game-1:hover {
  filter: grayscale(0);
}


.section-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;
  gap: 2.34vw;
  padding: 3.28vw 6.7vw;
  /* gap: 30px;
  padding: 7px 88px; */
}
.mouse {
  grid-column: 1 / 3;
  height: 44.4vh;
  /* height: 308px; */
  display: flex;
  flex-direction: column;
  background: #84D0E8;
}
.mouse{
  filter: grayscale(100%);
}
.mouse:hover {
  filter: grayscale(0);
}


.text {
  /* display: flex; */
  grid-column: 3 / 8;
  padding-left: 15px;
  /* flex-direction: column;
  align-items: flex-start;
  padding: 0px; */
  /* gap: 15px;
  padding-top: 10px; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.text{
  filter: grayscale(100%);
}
.text:hover {
  filter: grayscale(0);
}
.go {
  /* grid-column: 3 / 8; */
  display: flex;
  flex-direction: column;
}
.most {
  display: none;
}
.adv {
  display: none;
}
.dont {
  display: none;
}
.now {
  /* grid-column: 3 / 8; */
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.wihout {
  display: none;
}
.look {
  /* grid-column: 3 / 8; */
  display: flex;
  flex-direction: column;
  margin-top: 11px;
}


.section-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;
  gap: 2.34vw;
  padding: 3.28vw 6.7vw;
}
.game-four {
  grid-column: 1 / 6;
  flex-direction: column;
  /* width: 829px; */
  /* height: 825px; */
  display: flex;
  /* width: 315px;
  height: 607px; */
  /* display: flex;
  flex-direction: column; */
}
.game-four{
  filter: grayscale(100%);
}
.game-four:hover {
  filter: grayscale(0);
}
.wind { 
  display: flex;
  position: relative;
  flex-direction: column;
  /* height: 649px; */
  background:#FDDC3E;
  height: 93.65vh;
  overflow: hidden;
  padding: 2vh;
  /* opacity: 0.33; */
    /* grid-column: 1 / 6;
    display: flex;
    flex-direction: column;
    background: #D8D8D8;
    height: 649px;
    background-color: #FDDC3E; */
    /* opacity: 0.33; */
    /* margin-top: 11px; */
}
.wind-1 {
  position: absolute;
  /* width: 382px; */
  /* height: 275px; */
  width: 29vw;
  top: 10vh;
  left: 2vh;
  /* top: 18px;
  left: 21px; */
  
  /* display: block; */
  /* position: absolute;
  width: 381.19px;
  height: 275px;
  margin-top: 52px;
  margin-left: 41px; */
}
.wind-2 {
  position: absolute;
  /* height: 39vh; */
  top: 4vh;
  left: 19vw;
  width: 34vw;
  /* top: 45px;
  left: 420px; */
  
  /* display: block; */
  /* position: absolute;
  width: 381.19px;
  height: 275px;
  margin-top: 85px;
  margin-left: 434px; */
  /* margin-left: 8px;
  margin-bottom: -38px; */
}
.wind-3 {
  position: absolute;
  height: 40vh;
  width: 42vw;
  /* height: 275px; */
  top: 49vh;
  left: 1vw;
  /* top: 311px;
  left: 39px; */
}
.wind-4 {
  position: absolute;
  /* height: 23vh; */
  width: 26vw;
  /* height: 162px; */
  /* left: 515px;
  top: 410px; */
  left: 29vw;
  top: 69vh;
}
.wind-5 {
  position: absolute;
  /* height: 46.7vh; */
  width: 37vw;
  /* height: 324px; */
  /* left: 115px;
  top: 138px; */
  left: 6vw;
  top: 19vh;
}
.wind-6 {
  position: absolute;
  /* height: 42vh; */
  width: 38vw;
  /* height: 327.52px; */
  /* left: 15vw; */
  top: 39vh;
  left: 18vw;
  /* left: 253px;
  top: 223px; */
}
.wind_text-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 15px;
  padding-top: 10px;
}
.close_wind {
  width: auto;
}
.topic-4 {
  width: auto;
} 
.foonts {
  grid-column: 6 / 8;
  /* width: 315px;
  height: 607px; */
  display: flex;
  position: relative;
  flex-direction: column;
  overflow: hidden;
}
.foonts{
  filter: grayscale(100%);
}
.foonts:hover {
  filter: grayscale(0);
}
.fall {
  overflow: hidden;
  width: 100%;
}
.fonts-group {
  display: flex;
  position: relative;
  flex-direction: column;
}
.foonts-resp {
  display: none;
}
.fall1, .fall2, .fall3, .fall4, .fall5, .fall6, .fall7, .fall8, .fall9, .fall10, .fall11, .fall12, .fall13, .fall14, .fall15 {
  position: absolute;
  width: 37px;
  height: 37px;
  border-radius: 38px;
  background: #FD3E3E;
  animation: fall1 5s infinite;
}
@keyframes fall1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(677px);
  }
}
.fall2 {
  top: 30px;
  left: 41px;
  animation: fall2 13s infinite;
}
@keyframes fall2 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(715px);
  }
}
.fall3 {
  top: 10px;
  left: 100px;
  animation: fall3 15s infinite;
}
@keyframes fall3 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(715px);
  }
}
.fall4 {
  top: -28px;
  left: 150px;
  animation: fall4 12s infinite;
}
@keyframes fall4 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(715px);
  }
}
.fall5 {
  position: absolute;
  top: -17px;
  left: 216px;
  animation: fall5 9s infinite;
}
@keyframes fall5 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(600px);
  }
}
.fall6 {
  position: absolute;
  top: -508px;
  left: 150px;
  animation: fall6 17s infinite;
}
@keyframes fall6 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(600px);
  }
}
.fall7 {
  position: absolute;
  top: -523px;
  left: 216px;
  animation: fall7 17s infinite;
}
@keyframes fall7 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(600px);
  }
}
.fall8 {
  position: absolute;
  top: -17px;
  left: 100px;
  animation: fall8 8s infinite;
}
@keyframes fall8 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(600px);
  }
}
.fall9 {
  position: absolute;
  top: -400px;
  left: 100px;
  animation: fall9 8s infinite;
}
@keyframes fall9 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(500px);
  }
}
.fall10 {
  position: absolute;
  top: -400px;
  left: 100px;
  animation: fall10 8s infinite;
}
@keyframes fall10 {
  0% {
    transform: translateY(50);
  }
  100% {
    transform: translateY(500px);
  }
}
.fall11 {
  position: absolute;
  top: -400px;
  left: 100px;
  animation: fall11 8s infinite;
}
@keyframes fall11 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(600px);
  }
}
.fall12 {
  position: absolute;
  top: -400px;
  left: 100px;
  animation: fall12 8s infinite;
}
@keyframes fall12 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(600px);
  }
}
.fall13 {
  position: absolute;
  top: -400px;
  left: 100px;
  animation: fall13 8s infinite;
}
@keyframes fall13 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(600px);
  }
}
.fall14 {
  position: absolute;
  top: -400px;
  left: 100px;
  animation: fall14 8s infinite;
}
@keyframes fall14 {
  0% {
    transform: translateY(10);
  }
  100% {
    transform: translateY(650px);
  }
}
.fall15 {
  position: absolute;
  top: -400px;
  left: 100px;
  animation: fall15 8s infinite;
}
@keyframes fall15 {
  0% {
    transform: translateY(20);
  }
  100% {
    transform: translateY(400px);
  }
}





.section-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;
  gap: 2.34vw;
  padding: 3.28vw 6.7vw;
  /* gap: 30px;
  padding: 5px 88px; */
}
.gamesix {
  display: flex;
  position: relative;
  flex-direction: column;
  /* width: 315px; */
  height: 314px;
  background: #3E73FD;
  overflow: hidden;
  /* opacity: 0.33; */
}
.gamesix{
  filter: grayscale(100%);
}
.gamesix:hover {
  filter: grayscale(0);
}
.cut_one{
  position: absolute;
  width: 120px;
  height: 424px;
  margin-top: -47px;
  margin-left: 13px;
}
.cut_two {
  position: absolute;
  width: 107.94px;
  height: 444.85px;
  margin-top: -65px;
  margin-left: 144px;
}
.cut_three {
  position: absolute;
  width: 151.8px;
  height: 407.15px;
  margin-top: -71px;
  margin-left: 188px;
}
.cut_four {
  position: absolute;
  width: 465px;
  height: 375px;
  margin-top: -17px;
  margin-left: -53px;
}
.card_six_box {
  grid-column: 1 / 3;
  /* width: 315px;
  height: 474px; */
  display: flex;
  flex-direction: column;
}
.game-six {
  overflow: hidden;
}
.run-one {
  width: 315px;
  height: 32px;
  background: #FDDC3E;
}
.run-one-text {
  width: 1150px;
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  animation: run-one-text 2s infinite linear;
}
@keyframes run-one-text{
  0% {
      transform: translateX(0)
  }
  100% {
      transform: translateX(-680px)
  }
}
.run-two {
  width: 315px;
  height: 32px;
  background: #423EFD;
}
.run-two-text {
  width: 1150px;
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  animation: run-two-text 2s infinite linear;
}
@keyframes run-two-text{
  0% {
      transform: translateX(0)
  }
  100% {
      transform: translateX(-40vw)
      /* transform: translateX(-515px) */
  }
}
.run-three {
  width: 315px;
  height: 32px;
  background: #FDDC3E;
}
.run-three-text {
  width: 1150px;
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  animation: run-three-text 2s infinite linear;
}
@keyframes run-three-text{
  0% {
      transform: translateX(0)
  }
  100% {
     /* transform: translateX(-29.59vw); */
      transform: translateX(-60.6vw)
  }
  /* -776vw */
}
.run-four {
  width: 315px;
  height: 32px;
  background: #423EFD;
}
.run-four-text {
  width: 1150px;
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  animation: run-four-text 2s infinite linear;
}
@keyframes run-four-text{
  0% {
      transform: translateX(0)
  }
  100% {
      transform: translateX(-54.6vw)
  }
}
.run-five {
  width: 315px;
  height: 32px;
  background: #FDDC3E;
}
.run-five-text {
  width: 1150px;
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  animation: run-five-text 2s infinite linear;
}
@keyframes run-five-text{
  0% {
      transform: translateX(0)
  }
  100% {
      transform: translateX(-64.6vw)
  }
}
.run-six {
  width: 315px;
  height: 32px;
  background: #423EFD;
}
.run-six-text {
  width: 1150px;
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  animation: run-six-text 2s infinite linear;
}
@keyframes run-six-text{
  0% {
      transform: translateX(0)
  }
  100% {
      transform: translateX(-27.7vw)
  }
}
.run-seven {
  width: 315px;
  height: 32px;
  background: #FDDC3E;
}
.run-seven-text {
  width: 1150px;
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  animation: run-seven-text 2s infinite linear;
}
@keyframes run-seven-text{
  0% {
      transform: translateX(0)
  }
  100% {
      transform: translateX(-47.1vw)
  }
}
.run-eight {
  width: 315px;
  height: 32px;
  background: #423EFD;
}
.run-eight-text {
  width: 1150px;
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  animation: run-eight-text 2s infinite linear;
}
@keyframes run-eight-text{
  0% {
      transform: translateX(0)
  }
  100% {
      transform: translateX(-39.8vw)
  }
}
.run-nine {
  width: 315px;
  height: 32px;
  background: #FDDC3E;
}
.run-nine-text {
  width: 1150px;
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  animation: run-nine-text 2s infinite linear;
}
@keyframes run-nine-text{
  0% {
      transform: translateX(0)
  }
  100% {
      transform: translateX(-62.5vw)
  }
}
.run-ten {
  width: 315px;
  height: 32px;
  background: #423EFD;
}
.run-ten-text {
  width: 1150px;
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  animation: run-ten-text 2s infinite linear;
}
@keyframes run-ten-text{
  0% {
      transform: translateX(0)
  }
  100% {
      transform: translateX(-40vw)
  }
}

.six_text_section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 15px;
  padding-top: 10px;
}
.title_topic-6 {
  width: auto;
}
.topic-6 {
  width: auto;
}

.card_seven_box {
  grid-column: 3 / 5;
  /* width: 315px;
  height: 474px; */
  display: flex;
  flex-direction: column;
}
.gameseven {
  display: flex;
  position: relative;
  grid-column: 3 / 5;
  flex-direction: column;
  /* width: 315px; */
  height:230px;
  background: #3E73FD;
  overflow: hidden;
}
.gameseven{
  filter: grayscale(100%);
}
.gameseven:hover {
  filter: grayscale(0);
}
.el1,.el2, .el3, .el4, .el5, .el6, .el7, .el8, .el9, .el10, .el11, .el12, .el13, .el14, .el15, .el16, .el17, .el18, .el19 {
  width: 59px;
  height: 59px;
  background: #FD3E3E;
  border-radius: 75px;
  border: 5px solid #FFFFFF;
}
.el1 {
  position: absolute;
  left: 200px;
  top: 138px;
}
.el2 {
  position: absolute;
  left: 195px;
  top: 24px;
  background-color: #FDDC3E;
}
.el3 {
  position: absolute;
  left: 109px;
  top: 76px;
}
.el4 {
  position: absolute;
  left: 30px;
  top: 17px;
}
.el5 {
  position: absolute;
  left: 25px;
  top: 143px;
  background-color: #FDDC3E;
}
.el6 {
  position: absolute;
  left: 200px;
  top: 10px;
}
.el6 {
  position: absolute;
  left: 139px;
  top: 10px;
  background-color: #FDDC3E;
}
.el7 {
  position: absolute;
  left: 100px;
  top: 123px;
}
.el8 {
  position: absolute;
  left: 80px;
  top: 1px;
  background-color: #FDDC3E;
}
.el9 {
  position: absolute;
  left: 45px;
  top: 88px;
}
.el10 {
  position: absolute;
  left: 166px;
  top: 101px;
  background-color: #FDDC3E;
}
.el11 {
  position: absolute;
  left: 19px;
  top: 177px;
}
.el12 {
  position: absolute;
  left: 80px;
  top: 181px;
  background-color: #FDDC3E;
}
.el13 {
  position: absolute;
  left: 235px;
  top: 61px;
}
.el14 {
  position: absolute;
  left: 164px;
  top: -22px;
}
.el15 {
  position: absolute;
  left: 164px;
  top: 45px;
}
.el16 {
  position: absolute;
  left: 233px;
  top: 172px;
  background-color: #FDDC3E;
}
.el17 {
  position: absolute;
  left: 270px;
  top: 88px;
  background-color: #FDDC3E;
}
.el18 {
  position: absolute;
  left: -6px;
  top: -22px;
}
.el19 {
  position: absolute;
  left: -18px;
  top: 68px;
}
.seven_text_section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 15px;
  padding-top: 10px;
}
.title_topic-7 {
  width: auto;
}
.topic-7 {
  width: auto;
}

.card_eight_box {
  grid-column: 5 / 8;
  /* width: 488px;
  height: 535px; */
  display: flex;
  flex-direction: column;
}
.title_topic-8 {
  width: auto;
}
.topic-8 {
  width: auto;
}
.gameeight {
  display: flex;
  position: relative;
  grid-column: 4 / 8;
  flex-direction: column;
  /* width: 315px; */
  height:337px;
  background: #797979;
  overflow: hidden;
  /* opacity: 0.33; */
}
.gameeight{
  filter: grayscale(100%);
}
.gameeight:hover {
  filter: grayscale(0);
}
.cub_one {
  position: absolute;
  width: 149px;
  height: 293px;
  margin-top: 27px;
  margin-left: 19px;
}
.cub_two {
  position: absolute;
  width: 144px;
  height: 115px;
  margin-top: 27px;
  margin-left: 182px;
}
.cub_three {
  position: absolute;
  width: 131px;
  height: 118px;
  margin-top: 19px;
  margin-left: 340px;
}
.cub_four {
  position: absolute;
  width: 283px;
  height: 156px;
  margin-top: 160px;
  margin-left: 186px;
}
.mouse_one {
  position: absolute;
  width: 139px;
  height: 272px;
  margin-top: 53px;
  margin-left: 273px;
}
#draggable {
  width: 139px;
  height: 272px;
}
.mouse_two {
  position: absolute;
  width: 130px;
  height: 119px;
  margin-top: 181px;
  margin-left: 163px;
}
#draggabletwo {
  width: 130px;
  height: 119px;
}
.mouse_three {
  position: absolute;
  width: 125px;
  height: 105px;
  margin-top: 191px;
  margin-left: 94px;
}
#draggablethree {
  width: 125px;
  height: 105px;
}
.mouse_four {
  position: absolute;
  width: 269px;
  height: 145px;
  margin-top: 91px;
  margin-left: 120px;
}
#draggablefour {
  width: 269px;
  height: 145px;
}
.eight_text_section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 15px;
  margin-top: 10px;
  /* padding-top: 10px; */
}




.section-5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;
  gap: 30px;
  padding: 5px 88px;
  margin-top: -32px;
}
.news {
  display: flex;
  grid-column: 1 / 5;
  flex-direction: column;
  height: 63px;
  background: #3E73FD;
  text-align: center;
  justify-content: space-between;
}
.news {
  filter: grayscale(100%);
}
.news:hover {
  filter: grayscale(0);
}
.news-1 {
  font-family: 'Druk Text LCG';
  font-style: italic;
  font-weight: 900;
  font-size: 3.6vh;
  line-height: 25px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-top: 18px;
}
.next {
  grid-column: 1 / -1;
  margin-top: -15px;
  animation: blink 2s infinite linear;
  transition: 3s;
  width: 100%;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

.run {
  grid-column: 1 / -1;
  display: flex;
  height: 149px;
  background: #EA3B3B;
  overflow: hidden;
  margin-top: -19px;
  width: 89vw;
}
.runtext {
  width: auto;
  font-family: 'Druk Text LCG';
  font-style: italic;
  font-weight: 800;
  font-size: 147px;
  line-height: 175px;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
  margin-top: -16px;
  animation: marquee 4s infinite linear;
}
  @keyframes marquee{
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-2240px)
    }
  }

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 87px;
  margin-top: -3px;
  height: 60px;
}

.f-1 {
  align-items: center;
  size: 2px;
  margin: 0 auto;
  color: black;
  width: 1178px;
}
.group {
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 4.3vh;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  height: 37px;
  /* margin-top: -26px; */
}
.student_name {
  font-family: 'Druk Text LCG';
  font-style: normal;
  font-weight: 800;
  font-size: 4.3vh;
  line-height: 36px;
  text-transform: uppercase;
  color: #000000;
  height: 37px;
}
.border-1 {
  position: relative;
  width: 89vw;
  height: 0px;
  border: 2px solid #000000;
  margin: 0 auto;
  margin-top: 10px;
}
.border-2 {
  position: relative;
  width: 89vw;
  height: 0px;
  border: 2px solid #000000;
  margin: 0 auto;
}