.asbtn {
  cursor: pointer;
  margin-right: 10px;
}

.textdexActive {
  text-shadow: 0 0 10px #f9f969 , 0 0 5px #32ee58 , 0 0 10px #fff;
}



.colors .color {
  cursor: pointer;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  transition: 0.2s;
  margin: 5px;
}

.colors .color:hover, .colors .active {
  transform: scale(1.2);
  border-style: dotted;
  border-color: white;
  border-width: 3px;

}


.rgb-gradient {

  background: linear-gradient(90deg,
  #ff0000, /* Красный */
  #ff7300, /* Оранжевый */
  #ffeb00, /* Желтый */
  #00ff00, /* Зеленый */
  #00ffff, /* Голубой */
  #0000ff, /* Синий */
  #8f00ff  /* Фиолетовый */
  );
  background-size: 100% 100%; /* Увеличиваем размер для плавности */

}


@font-face {
  font-family: Legothick; /* Гарнитура шрифта */
  src: url(/font/Legothick.ttf); /* Путь к файлу со шрифтом */
}

@font-face {
  font-family: Library; /* Гарнитура шрифта */
  src: url(/font/LIBRARY3AMsoft.otf) format("opentype"); /* Путь к файлу со шрифтом */
}

@font-face {
  font-family: UnJap; /* Гарнитура шрифта */
  src: url(/font/UntitledJapanese.otf) format("opentype"); /* Путь к файлу со шрифтом */
}

@font-face {
  font-family: Neon1; /* Гарнитура шрифта */
  src: url(/font/17.ttf); /* Путь к файлу со шрифтом */
}
@font-face {
  font-family: Neon2; /* Гарнитура шрифта */
  src: url(/font/12094.otf) format("opentype"); /* Путь к файлу со шрифтом */
}
@font-face {
  font-family: Neon3; /* Гарнитура шрифта */
  src: url(/font/19700.ttf) ; /* Путь к файлу со шрифтом */
}
@font-face {
  font-family: Neon4; /* Гарнитура шрифта */
  src: url(/font/14.otf) format("opentype"); /* Путь к файлу со шрифтом */
}

@font-face {
  font-family: Neon5; /* Гарнитура шрифта */
  src: url(/font/20354.otf) format("opentype"); /* Путь к файлу со шрифтом */
}
@font-face {
  font-family: Neon6; /* Гарнитура шрифта */
  src: url(/font/5.ttf); /* Путь к файлу со шрифтом */
}
@font-face {
  font-family: ForestSmooth; /* Гарнитура шрифта */
  src: url(/font/ForestSmoothRegular.ttf) ; /* Путь к файлу со шрифтом */
}
@font-face { font-family: Alexa; src: url("/font/Alexa.ttf") format("truetype"); }

@font-face { font-family: Amanda; src: url("/font/Amanda.ttf") format("truetype"); }

@font-face { font-family: Amsterdam; src: url("/font/Amsterdam.ttf") format("truetype"); }

@font-face { font-family: Austin; src: url("/font/Austin.ttf") format("truetype"); }

@font-face { font-family: Avante; src: url("/font/Avante.ttf") format("truetype"); }

@font-face { font-family: Barcelona; src: url("/font/Barcelona.ttf")format("truetype"); }

@font-face { font-family: Bayview; src: url("/font/Bayview.ttf") format("truetype"); }

@font-face { font-family: Beachfront; src: url("/font/Beachfront.ttf") format("truetype"); }

@font-face { font-family: Bellview; src: url("/font/Bellview.ttf") format("truetype"); }

@font-face { font-family: Buttercup; src: url("/font/Buttercup.ttf")format("truetype"); }

@font-face { font-family: Chelsea; src: url("/font/Chelsea.ttf") format("truetype"); }

@font-face { font-family: ClassicType; src: url("/font/ClassicType.ttf") format("truetype"); }

@font-face { font-family: Freehand; src: url("/font/Freehand.ttf") format("truetype"); }

@font-face { font-family: Freespirit; src: url("/font/Freespirit.ttf") format("truetype"); }

@font-face { font-family: Greenworld; src: url("/font/Greenworld.ttf") format("truetype"); }

@font-face { font-family: LoveNeon; src: url("/font/LoveNeon.ttf") format("truetype"); }

@font-face { font-family: LoveNote; src: url("/font/LoveNote.ttf") format("truetype"); }

@font-face { font-family: Marquee; src: url("/font/Marquee.ttf") format("truetype"); }

@font-face { font-family: Mayfair; src: url("/font/Mayfair.ttf") format("truetype"); }

@font-face { font-family: Melbourne; src: url("/font/Melbourne.ttf") format("truetype"); }

@font-face { font-family: Monaco; src: url("/font/Monaco.ttf") format("truetype"); }

@font-face { font-family: NeonGlow; src: url("/font/NeonGlow.ttf") format("truetype"); }

@font-face { font-family: NeonLite; src: url("/font/NeonLite.ttf") format("truetype"); }

@font-face { font-family: Neonscript; src: url("/font/Neonscript.ttf") format("truetype"); }

@font-face { font-family: Neontrace; src: url("/font/Neontrace.ttf") format("truetype"); }

@font-face { font-family: NeoTokyo; src: url("/font/NeoTokyo.ttf") format("truetype"); }

@font-face { font-family: Nevada; src: url("/font/Nevada.ttf") format("truetype"); }

@font-face { font-family: NewCursive; src: url("/font/NewCursive.ttf") format("truetype"); }

@font-face { font-family: Northshore; src: url("/font/Northshore.ttf") format("truetype"); }

@font-face { font-family: Photogenic; src: url("/font/Photogenic.ttf") format("truetype"); }

@font-face { font-family: Rocket; src: url("/font/Rocket.ttf") format("truetype"); }

@font-face { font-family: Royalty; src: url("/font/Royalty.ttf") format("truetype"); }

@font-face { font-family: SciFi; src: url("/font/SciFi.ttf") format("truetype"); }

@font-face { font-family: Signature; src: url("/font/Signature.ttf")format("truetype"); }

@font-face { font-family: Sorrento; src: url("/font/Sorrento.ttf") format("truetype"); }

@font-face { font-family: Typewriter; src: url("/font/Typewriter.ttf") format("truetype"); }

@font-face { font-family: Venetian; src: url("/font/Venetian.ttf") format("truetype"); }

@font-face { font-family: Vintage; src: url("/font/Vintage.ttf") format("truetype"); }

@font-face { font-family: Waikiki; src: url("/font/Waikiki.ttf") format("truetype"); }

@font-face { font-family: WildScript; src: url("/font/WildScript.ttf") format("truetype"); }

@font-face { font-family: Florence; src: url("/font/Florence.ttf") format("truetype"); }

@font-face { font-family: LazySunday; src: url("/font/LazySunday.ttf?v=3D3") format("truetype"); }

@font-face { font-family: LosAngeles; src: url("/font/LosAngeles.ttf?v=3D3") format("truetype"); }

@font-face { font-family: Manchester; src: url("/font/Manchester.ttf") format("truetype"); }

@font-face { font-family: Majorca; src: url("/font/Majorca.ttf") format("truetype"); }

@font-face { font-family: Manhattan; src: url("/font/Manhattan.ttf")format("truetype"); }

@font-face { font-family: Milan; src: url("/font/Milan.ttf") format("truetype"); }

@font-face { font-family: NottingHill; src: url("/font/NottingHill.ttf") format("truetype"); }

@font-face { font-family: Olivia; src: url("/font/Olivia.ttf?v=3D2") format("truetype"); }

@font-face { font-family: Rockstar; src: url("/font/Rockstar.ttf") format("truetype"); }

@font-face { font-family: SanDiego; src: url("/font/SanDiego.ttf") format("truetype"); }

@font-face { font-family: Simplicity; src: url("/font/Simplicity.ttf?v=3D1") format("truetype"); }

@font-face { font-family: Submarine; src: url("/font/Submarine.ttf") format("truetype"); }

@font-face { font-family: Vancouver; src: url("/font/Vancouver.ttf") format("truetype"); }

@font-face { font-family: Weekender; src: url("/font/Weekender.ttf") format("truetype"); }

@font-face { font-family: Westcoast; src: url("/font/Westcoast.ttf") format("truetype"); }



#textOnTop {
  position: absolute;
  top: 131.5px;
  left: 0%;
  width: 100%;
  font-size: 30px;
  word-wrap: break-word;
  font-family: Bad Script;
  max-width: 100vw;
  overflow: hidden;
  line-height: 1;
  white-space: pre;
  padding: 40px;
  justify-content: center;
  display: flex;
  font-weight: 600;
}
.color_1{
  text-shadow:
    0 0 5px #ffffff,        /* Первое слабое свечение */
    0 0 10px #f4f4f4; /* Второе ярче */

  color: #ffffff;
}
.color_2{
  text-shadow:
    0 0 5px #E2E421,    /* Первое мелкое свечение вокруг текста */
    0 0 10px #E2E421,   /* Усиление вокруг основного свечения */
    0 0 15px #E2E421,   /* Второй светлый слой */
    0 0 20px #BADC21,   /* Глубокое жёлтовато-зелёное свечение */
    0 0 30px #BADC21,   /* Углубление свечения */
    0 0 40px #BADC21;

  color: #fbfbdc;
}
.color_3{
  text-shadow:
    0 0 5px #ff7200,   /* Слабое внутреннее свечение */
    0 0 10px #ff7200,  /* Чуть большее свечение */
    0 0 15px #ff7200,  /* Яркость расширяется */
    0 0 20px #ff4500,  /* Глубокий тёплый оранжевый */
    0 0 30px #ff4500,  /* Более выраженное размытие */
    0 0 40px #ff4500;

  color: #faeee9;
}
.color_4{
  text-shadow:
    0 0 5px #fc0fc0,    /* Первое малое свечение */
    0 0 10px #fc0fc0,   /* Более заметное свечение */
    0 0 15px #fc0fc0,   /* Усиление свечения */
    0 0 20px #ff00ff,   /* Розовое глубокое свечение */
    0 0 30px #ff00ff,   /* Размытие */
    0 0 40px #ff00ff;
  color: #ffffff;


}
.color_5{

  text-shadow:
    0 0 5px #e5221b,
    0 0 10px #e5221b,
    0 0 15px #e5221b,
    0 0 20px #b71c17,
    0 0 30px #b71c17,
    0 0 40px #b71c17;

  color: #fae1e0;
}
.color_6 {
  text-shadow: 0 0 10px #cd48f4, 0 0 15px #c313f7, 0 0 20px #570eff;
  color: #f3d8ff;
}

.color_7{
  text-shadow:
    0 0 5px #18e4e3,
    0 0 10px #18e4e3,
    0 0 15px #18e4e3,
    0 0 20px #12b2b1,
    0 0 30px #12b2b1,
    0 0 40px #08a0fb;
  color: #b5e2fb;
}
.color_8{

  text-shadow:
    0 0 5px #0925E4,
    0 0 10px #0925E4,
    0 0 15px #0925E4,
    0 0 20px #071CB2,
    0 0 30px #071CB2,
    0 0 40px #071CB2;


  color: #e9ecff;
}
.color_9{
  text-shadow:
    0 0 5px #0ADE23,
    0 0 10px #0ADE23,
    0 0 15px #0ADE23,
    0 0 20px #08B11D,
    0 0 30px #08B11D,
    0 0 40px #08B11D;
  color: #d7fddc;
}



.color_10{
  text-shadow: 0 0 5px #e5221b, 0 0 10px #e5221b, 0 0 20px #e5221b;
  animation: rainbowAnimation 10s linear infinite; /* Анимация градиента */
  color: #ffffff;

}




@keyframes rainbowAnimation {
  0% {
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 20px #ff0000;
    color: #f8c1c1; /* Начальная позиция */
  }
  20% {
    text-shadow: 0 0 5px #ff7300, 0 0 10px #ff7300, 0 0 20px #ff7300;
    color: #fbdcc2; /* Градиент смещается полностью */
  }
  30% {
    text-shadow: 0 0 5px #0ADE23, 0 0 10px #0ADE23, 0 0 20px #0ADE23;
    color: #d4fad7; /* Возврат к началу */
  }
  40% {
    text-shadow: 0 0 5px #ffeb00, 0 0 10px #ffeb00, 0 0 20px #ffeb00;
    color: #fffcf3; /* Возврат к началу */
  }
  50% {
    text-shadow: 0 0 5px #e5e5e5, 0 0 10px #e5e5e5, 0 0 20px #e5e5e5;
    color: #ffffff; /* Возврат к началу */
  }
  60% {
    text-shadow: 0 0 5px #d3f114, 0 0 10px #d3f114, 0 0 20px #d3f114;
    color: #f7fada; /* Возврат к началу */
  }
  70% {
    text-shadow: 0 0 5px #7b00ff, 0 0 10px #7b00ff, 0 0 20px #7b00ff;
    color: #f5ecff; /* Возврат к началу */
  }
  80% {
    text-shadow: 0 0 5px #c313f7, 0 0 10px #c313f7, 0 0 20px #c313f7;
    color: #f4d5fd; /* Возврат к началу */
  }
  90% {
    text-shadow: 0 0 5px #18e4e3, 0 0 10px #18e4e3, 0 0 20px #18e4e3;
    color: #d1f6f6; /* Возврат к началу */
  }
  100% {
    text-shadow: 0 0 5px #0925E4, 0 0 10px #0925E4, 0 0 20px #0925E4;
    color: #c5cdfa; /* Возврат к началу */
  }
}


.neonOff{
  text-shadow: none !important;
}
.color_1.neonOff{

  color: ##fff;
}
.color_2.neonOff{
  color: #FCFF00;
}
.color_3.neonOff{
  color: #ff7200;
}
.color_4.neonOff{
  color: #fc0fc0;
}
.color_5.neonOff{
  color: #ff4841;
}
.color_6.neonOff {
  color: #9c28ff;
}

.color_7.neonOff{
  color: #08a0fb;
}
.color_8.neonOff{
  color: #0925E4;
}
.color_9.neonOff{

  color: #02BD18;
}

.color_10.neonOff{
  color: #ffffff;
}


.mobfontselectbtn {
  background-color: #69e8bd;
  margin: 10px;
  font-size: 45px;
  padding: 5px;
  border-radius: 10px;
}
.mobfontselectbtn:hover {
  background-color: #00ffa9;
}

@media screen and (max-width: 768px) {
  .asbtn {
    font-size: 40px;
    line-height: 0;
  }

}