@font-face {
  font-family: "Rubic Regular";
  src: url("./assets/Rubik-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Rubic Light Italic";
  src: url("./assets/Rubik-LightItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Rubic Semi Bold";
  src: url("./assets/Rubik-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Rubic Bold";
  src: url("./assets/Rubik-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Pobeda";
  src: url("./assets/pobeda-regular.ttf") format("truetype");
}

@font-face {
  font-family: "PobedaBold";
  src: url("./assets/pobeda-bold.ttf") format("truetype");
}

body {
  background-color: #000000;
  color: azure;
  font-family: "Rubic Regular";
}

.app-wrapper {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 97vh;
}

.app-wrapper-mobile {
  display: none;
}

@media screen and (max-width: 500px) {
  .app-wrapper {
    display: none;
  }

  .app-wrapper-mobile {
    display: block;
    margin: 22px 45px;
  }
}

/* MOBILE */
.header-mobile {
  display: flex;
  justify-content: space-between;
  font-family: "Rubic Regular";
  font-size: 14px;
}

.header-mobile__logo {
  background: url("./assets/logo-gas-mask.png") no-repeat center;
  background-size: contain;
  /* width: 50vw; */
  /* height: 20vw; */
  /* min-width: 64px; */
  /* min-height: 64px; */
  width: min(50vw, 70px);
  height: min(50vw, 70px);
}

.header-mobile__user-counter,
.header-mobile__chat-link {
  margin-top: 15px;
  font-size: 14px;
}

.header-mobile__counter {
  padding-left: 5px;
  font-family: "Rubic Bold";
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
}

.header-mobile__chat-link-text {
  text-decoration: none;
  color: #d5d5d5;
}

.heading-mobile {
  font-family: Pobeda;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 94%;
  /* or 24px */

  text-align: center;
  margin: 10px 0 0 0;
  margin-bottom: 30px;
}

.subHeading-mobile {
  font-family: Pobeda;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 94%;
  /* or 24px */

  text-align: center;
  margin: 10px 0 10px 0;

  color: rgb(222, 0, 0);
  animation: neon 3s ease infinite;
  -moz-animation: neon 3s ease infinite;
  -webkit-animation: neon 3s ease infinite;
}

.header-mobile__center-element {
  display: flex;
}

.album-art {
  display: flex;
  justify-content: center;
  position: relative;
  font-family: "Rubic Bold";
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  /* identical to box height */
  text-transform: uppercase;
}

.album-art__wrapper {
  position: relative;
  width: min(80vw, 300px);
}

.album-art__cover {
  /* background-color: #8c0000; */
  aspect-ratio: 1;
  width: 100%;
}

.album-art__live-status {
  position: absolute;
  left: 2vw;
  display: flex;
  align-items: center;
  text-align: center;
  margin: 10px 6px;
  padding: 4px 10px;
  border-radius: 9px;
  height: 20px;
  background-color: black;
}

.live-status {
  font-family: "Rubic Bold";
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  /* identical to box height */
  text-transform: uppercase;
  display: flex;
  align-items: center;
  text-align: center;
  /* margin: 10px 6px; */
  padding: 4px 10px;
  border-radius: 9px;
  /* height: 20px; */
  background-color: black;
}

.live-status_online {
  color: #b00000;
}

.live-status_offline {
  color: #d5d5d5;
}

.live-status_online::before {
  content: "";
  display: inline-block;
  background: #b00000;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 3px;
}

.album-art__live-status_online {
  color: #b00000;
}

.album-art__live-status_online::before {
  content: "";
  display: inline-block;
  background: #b00000;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 3px;
}

.album-art__live-status_offline {
  color: #d5d5d5;
}

.track-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Rubic Semi Bold";
  text-align: center;
}

.artist-name {
  margin: 24px 0 0 0;
  font-weight: 600;
  font-size: 26px;
  line-height: 31px;
  /* identical to box height */
}

.track-name {
  margin-top: 8px 0 0 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 125%;
  font-family: "Rubic Regular";
}

.player-controls-mobile {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 65px;
}

.player-controls-mobile__button {
  background: none;
  border: none;
  width: 40px;
  height: 60px;
  /* background-color: #470806; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.player-controls-mobile__button_active {
  background: none;
  border: none;
  width: 40px;
  height: 60px;
  /* background-color: #470806; */
  display: flex;
  justify-content: center;
  align-items: center;
  filter: brightness(0.08) sepia(1) hue-rotate(320deg) saturate(20);
}

.footer-mobile__description {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-mobile__description-text,
.footer-mobile__description-text_red {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  font-family: "Rubic Light Italic";
  width: 270px;
}

.footer-mobile__description-text {
  margin-top: 20px;
}

.footer-mobile__description-text_red {
  margin-top: 5px;
  color: #8c0000;
}

.footer-mobile__social {
  display: flex;
  margin-top: 10px;
  gap: 5px;
}

.footer-mobile__social-button {
  background: none;
  border: none;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* DESKTOP */
.header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.online-information {
  max-width: 120px;
}

.online-information__text {
  margin: 40px 0 8px 0;
}

.online-information__counter,
.online-information__countries {
  font-family: "Rubic Bold";
  font-size: 20px;
}

.center-section {
  display: flex;
}

.center-section__on-air-text,
.center-section__on-air-text_hidden {
  display: inline-block;
  align-self: center;
  font-family: Pobeda;
  font-size: 30px;
  color: rgb(222, 0, 0);
  animation: neon 3s ease infinite;
  -moz-animation: neon 3s ease infinite;
  -webkit-animation: neon 3s ease infinite;
}

@keyframes neon {

  0%,
  100% {
    text-shadow: 0 0 10px #fa1c16, 0 0 30px #fa1c16, 0 0 300px #fa1c16,
      0 0 300px #fa1c16, 0 0 5px #bb0000;
    color: red;
  }

  50% {
    text-shadow: 0 0 10px #470806, 0 0 15px #470806, 0 0 5px #470806,
      0 0 5px #470806, 0 0 2px #470806;
    color: #8c0000;
  }
}

.center-section__on-air-text_hidden {
  visibility: hidden;
}

.center-section__logo {
  background: url("./assets/logo-gas-mask.png") no-repeat center;
  background-size: contain;
  min-width: 200px;
  min-height: 200px;
}

.social-links {
  display: flex;
  flex-direction: column;
}

.social-links__icons {
  display: flex;
  gap: 5px;
}

.social-links__icon {
  cursor: pointer;
}

.social-links__text {
  margin: 40px 0 10px 0;
  text-align: end;
}

.social-links__text2 {
  margin: 10px 0;
  text-align: end;
}

.social-links__icons {
  align-self: end;
}

.heading {
  margin: 15px 0 0 0;
  font-family: Pobeda;
  font-size: 70px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}

.subHeading {
  font-family: Pobeda;
  font-size: 25px;
  text-transform: uppercase;
  text-align: center;
  margin: 5px 0 20px 0;
  /*color: #8c0000;*/
  color: rgb(222, 0, 0);
  animation: neon 3s ease infinite;
  -moz-animation: neon 3s ease infinite;
  -webkit-animation: neon 3s ease infinite;
}

.content {
  display: flex;
  justify-content: space-between;
}

.player {
  display: flex;
  gap: 25px;
}

.player__controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.player__control-buttons {
  display: flex;
  gap: 15px;
}

.volume-container {
  width: 70px;
  display: flex;
  align-items: center;
  padding-bottom: 5px;
}

.volume-container__input {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: gray;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.volume-container__input:hover {
  opacity: 1;
}

.volume-container__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #8c0000;
  cursor: pointer;
}

.volume-container__input::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8c0000;
  cursor: pointer;
}

.player__bitrate-button,
.player__bitrate-button-active {
  background-color: #d5d5d5;
  border: none;
  color: #000;
  padding: 5px 10px;
  border-radius: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 7px;
  cursor: pointer;
}

.player__bitrate-button-active {
  background-color: #8c0000;
  color: azure;
  cursor: default;
  pointer-events: none;
}

.player__artist-name {
  margin-bottom: 10px;
  font-family: "Rubic Semi Bold";
  font-size: 28px;
}

.player__track-name {
  margin: 0;
  font-size: 16px;
}

.player__mute-button,
.player__mute-button-muted,
.player__play-button {
  align-self: center;
  cursor: pointer;
}

.player__mute-button-muted::after {
  content: "звук выключен";
  font-family: "Rubic Light Italic";
  font-size: 10px;
  color: gray;
  /*position: absolute;*/
}

.player__mute-button {
  display: none;
}

.aux-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.aux-block__description {
  font-family: "Rubic Bold";
  font-size: 12px;
  text-transform: uppercase;
  position: relative;
}

.aux-block__description-online::before {
  content: "";
  display: block;
  height: 0.65em;
  width: 0.65em;
  background: #8c0000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -1em;
  transform: translateY(-50%);
}

.aux-block__playlist-links {
  font-size: 14px;
  text-align: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  margin-top: auto;
  /*padding-bottom: 20px;*/
  justify-self: baseline;
}

.footer__chat-link {
  display: flex;
  gap: 5px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 5px;
}

.footer__disclaimer,
.footer__disclaimer-red {
  font-family: "Rubic Light Italic";
  margin: 0;
  text-align: center;
  color: rgb(161, 161, 161);
}

.footer__disclaimer-red {
  color: #8c0000;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.modal2 {
  /* display: none; Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100vh;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: black;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #8c0000;
  width: 80%;
  /* Could be more or less, depending on screen size */
}

.modal-inner-content {
  display: flex;
  align-items: center;
  /* font-family: "Rubic Light Italic"; */
  font-family: "Courier New", Courier, monospace;
}

.modal-inner-content2 {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  /* font-family: "Rubic Light Italic"; */
  font-family: "Courier New", Courier, monospace;
}

.modal-text {
  color: rgb(161, 161, 161);
}

/*.modal-text__link {*/
/*    text-decora*/
/*}*/

/* unvisited link */
.modal-text__link:link {
  color: #8c0000;
  text-decoration: none;
}

/* visited link */
.modal-text__link:visited {
  color: #8c0000;
  text-decoration: none;
}

/* mouse over link */
.modal-text__link:hover {
  color: red;
  text-decoration: none;
}

/* selected link */
.modal-text__link:active {
  /*color: blue;*/
  color: red;
  text-decoration: none;
}

.modal-gif {
  object-fit: contain;
  height: 300px;
}

.modal-gif2 {
  object-fit: contain;
  height: 150px;
}

/* The Close Button */
.close {
  color: #8c0000;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #740000;
  text-decoration: none;
  cursor: pointer;
}

.donate-button__wrapper {
  display: flex;
  justify-content: center;
}

.donate-button,
.donate-button-mobile,
.chat-redirect-button {
  background-color: black;
  /* color: #8c0000; */
  /* color: azure; */
  color: rgb(161, 161, 161);
  border: none;
  font-family: "Rubic Regular";
  font-size: 14px;
}

.donate-button:hover,
.donate-button-mobile:hover,
.chat-redirect-button:hover {
  color: #8c0000;
}

.donate-button {
  padding-top: 2px;
}

.donate-button-mobile {
  font-family: "Rubic Regular";
  padding-top: 5px;
  font-size: 11px;
}

.chat-redirect-button,
.chat-redirect-button:hover {
  text-decoration: none;
  padding: 0 4px;
}

.chatbro_message_avatar_block {
  opacity: 0;
}

.footer__buttons {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 500px) {
  .modal-inner-content {
    flex-direction: column;
  }

  .modal-gif {
    height: 150px;
  }
}

/*breakpoint
700 добавить боковые маржины для слушают сейчас будь в курсе и плеера
550

, 415*/

.octo_logo {
  position: absolute;
  width: 150px;
  left: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.octo_logo a {
  padding: 2px;
}

.octo_logo img,
.octo_logo_mobile img {
  width: 100%;
}

.octo_logo_mobile_link {
  display: block;
  width: 100px;
}

.octo_logo_mobile {
  /* width: 100px; */
  padding: 5px;
  display: flex;
  flex-direction: row;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  font-family: "Rubic Regular";
}

.app-icon {
  fill: white;
  width: 22px;
}

.app-buttons {
  padding: 0 5px 0 10px;
}

/* announcement */
.announcement_block {
  font-family: "Rubic Regular";
  position: absolute;
  width: 150px;
  left: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.announcement_block a {
  padding: 2px;
}

.announcement_block img,
.announcement_block_mobile img {
  width: 100%;
}

.announcement_block_mobile_link {
  display: block;
  width: 100px;
}

.announcement_block_mobile {
  padding: 5px;
  display: flex;
  flex-direction: row;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  font-family: "Rubic Regular";
}