/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
body {
  background-color: #141414;
  background-image: url(//images7.alphacoders.com/109/thumb-1920-1098316.jpg);
  color: White;
  font-family: "Yanone Kaffeesatz", sans-serif;
}

/*Шрифт и дополнения*/
.yanone-kaffeesatz fontyanone {
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.podmenu  {
  text-align: center;
}
/* Начальный стиль ссылки начало */
a {
  color: #9f86ff; /* Исходный цвет ссылки */
  text-decoration: none;
}

/* Стиль при наведении */
a:hover {
  color: red; /* Цвет ссылки при наведении */
}

/* Плавный переход */
a {
  color: #9f86ffn;
  text-decoration: none;
  transition: color 0.3s ease; /* Плавный переход цвета за 0.3 секунды */
}
/* Начальный стиль ссылки конец */

/* Изменение фона выделенного текста*/
::selection {
    background: #73186a;
}
::-moz-selection {
    background: #73186a;
}

/*разделительная черта начало*/
hr {
    height: 20px;
    background-image: radial-gradient(farthest-side at 50% -50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    position: relative;
    border: none;
}
hr:before {
    height: 1px;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0));
}
/*разделительная черта конец*/

/* Оформление панели */
#side-checkbox {
    display: none;
}
.side-panel {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: -360px;
    background: #24262b;
    transition: all 0.5s;   
    width: 288px;
    height: 100vh;
    box-shadow: 10px 0 20px rgba(0,0,0,0.4);
    color: #FFF;
    padding: 40px 20px;
}
.side-title {
    font-family: "Balsamiq Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 40px;
    text-align: center;
    margin-bottom: 20px;
/*анимация свет текста*/
    -webkit-animation: glow 1s ease-in-out infinite alternate; 
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 2s ease-in-out infinite alternate;
}
/*анимация свет текста*/
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #7a0485, 0 0 40px #7a0485, 0 0 50px #7a0485, 0 0 60px #7a0485, 0 0 70px #7a0485;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #1c0611, 0 0 40px #1c0611, 0 0 50px #1c0611, 0 0 60px #1c0611, 0 0 70px #1c0611, 0 0 80px #1c0611;
  }
}
/*анимация свет текста*/
/* Оформление кнопки на странице */
.side-button-1-wr {
    text-align: center; /* Контейнер для кнопки, чтобы было удобнее ее разместить */
}
.side-button-1 {
    display: inline-block;
}
.side-button-1 .side-b {
    margin: 10px;
    text-decoration: none;
    position: relative;
    font-size: 20px;
    line-height: 20px;
    padding: 12px 30px;
    color: #000000;
    font-weight: bold;
    text-transform: uppercase; 
    font-family: "Science Gothic", sans-serif;
    background: #fefefe;
    cursor: pointer; 
    border: 2px solid #e20008;
}
.side-button-1 .side-b:hover,
.side-button-1 .side-b:active,
.side-button-1 .side-b:focus {
    color: #000000;
}
.side-button-1 .side-b:after,
.side-button-1 .side-b:before {
    position: absolute;
    height: 4px;
    left: 50%;
    bottom: -6px;
    content: "";
    transition: all 280ms ease-in-out;
    width: 0;
}
.side-button-1 .side-open:after,
.side-button-1 .side-open:before {
    background: #57f781;
}
.side-button-1 .side-close:after,
.side-button-1 .side-close:before {
    background: #e34242;
}
.side-button-1 .side-b:before {
    top: -6px;
}
.side-button-1 .side-b:hover:after,
.side-button-1 .side-b:hover:before {
    width: 100%;
    left: 0;
}
/* Переключатели кнопки 1 */
.side-button-1 .side-close {
    display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open {
    display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close {
    display: block;
}
#side-checkbox:checked + .side-panel {
    left: 0;
}
/* Оформление кнопки на панели */
.side-button-2 {
    font-size: 30px;
    border-radius: 20px;
    position: absolute;
    z-index: 1;
    top: 8px;
    right: 8px;
    cursor: pointer;
    transform: rotate(45deg);
    color: #FFF;    
    transition: all 280ms ease-in-out;    
}
.side-button-2:hover {
    transform: rotate(45deg) scale(1.1);    
    color: #FFF;
}

/*Глассморфные (стекломорфные) кнопки с ховер-эффектом начало*/

div[class*=box] {
  height: auto;
  width: auto; 
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 17px;
}

.box-1 { background-color: #3f4751; }
.box-2 { background-color: #bf2626; }
.box-3 { background-color: #66A182; }

.btn {
  line-height: 50px;
  height: 50px;
  text-align: center;
  width: 250px;
  cursor: pointer;
}

/* 
========================
      BUTTON ONE
========================
*/
.btn-one {
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #FFF;
  transition: all 0.3s;
  position: relative;
}
.btn-one span {
  transition: all 0.3s;
  text-transform: uppercase;
}
.btn-one::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: rgba(255,255,255,0.5);
  border-bottom-color: rgba(255,255,255,0.5);
  transform: scale(0.1, 1);
}
.btn-one:hover span {
  letter-spacing: 2px;
}
.btn-one:hover::before {
  opacity: 1; 
  transform: scale(1, 1); 
}
.btn-one::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.3s;
  background-color: rgba(255,255,255,0.1);
  filter: blur(0.8rem);
}
.btn-one:hover::after {
  opacity: 0; 
  transform: scale(0.1, 1);
}

/* 
========================
      BUTTON TWO
========================
*/
.btn-two {
  font-family: "Bungee", serif;
  font-weight: 400;
  font-style: normal;
  color: #FFF;
  transition: all 0.3s;
  position: relative;
}
.btn-two span {
  transition: all 0.3s;
}
.btn-two::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: rgba(255,255,255,0.5);
  border-bottom-color: rgba(255,255,255,0.5);
  transform: scale(0.1, 1);
}
.btn-two:hover span {
  letter-spacing: 2px;
}
.btn-two:hover::before {
  opacity: 1; 
  transform: scale(1, 1); 
}
.btn-two::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.3s;
  background-color: rgba(255,255,255,0.1);
  filter: blur(0.8rem);
}
.btn-two:hover::after {
  opacity: 0; 
  transform: scale(0.1, 1);
}
/*Глассморфные (стекломорфные) кнопки с ховер-эффектом конец*/


/*новый дизайн кнопки*/
button {
  width: 160px;
  height: 60px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  background-color: transparent;
  color: #fff;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
  box-shadow: 0px 2px 6px #5f03f4;
  border: 1px solid #5f03f4;
}
button::before,
button::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #5f03f4;
  opacity: 0;
  transition: all 0.5s ease;
  transform: rotate(45deg);
  transform-origin: center;
  z-index: -1;
}
button::before {
  top: -100%;
}
button::after {
  bottom: -100%;
}
button:hover::before,
button:hover::after {
  opacity: 60%;
  transform: rotate(0deg);
}
button:hover::before {
  top: 0;
}
button:hover::after {
  bottom: 0;
}