@font-face {
  font-family: "Matricha";
  src: url("../fonts/Matricha.eot");
  src: url("../fonts/Matricha.eot?#iefix") format("embedded-opentype"), url("../fonts/Matricha.woff2") format("woff2"), url("../fonts/Matricha.woff") format("woff"), url("../fonts/Matricha.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

html {
  min-height: 100%;
  width: 100%;
  display: table; }

body {
  min-height: 100%;
  background-color: #2E2E2E;
  width: 100%; }

.container {
  position: relative;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-wrap: nowrap;
  margin: 0;
  /* min-height: 100vh; */ 
  height: 100%; }

#bg {
  opacity: 0.35;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  filter: grayscale(100%); }

h1 {
  color: #fff;
  font-family: "Matricha";
  font-size: 20vw;
  text-align: center;
  font-style: italic;
  margin: 0; }
  h1 a {
    color: #fff;
    text-decoration: none; }
    h1 a:visited {
      color: #fff; }
    h1 a:hover {
      color: #E00; }

.info {
  opacity: 1;
  color: #FFF;
  width: 84vw;
  margin: 0 auto;
  font-family: "Lucida Console", Monaco, monospace;
  padding-top: 10vh; }

.info_tuned {
  color: #FFF;
  font-size: 3vw;
  border: 3px solid #FFF;
  border-radius: 0.5vw;
  float: left;
  padding: 3px 4px 0 4px;
  margin-left: 3vw;
  font-weight: bold;
  display: inline-block; }

.info_stereo {
  color: #E00;
  font-size: 3vw;
  font-weight: bold;
  border: 3px solid #E00;
  border-radius: 0.5vw;
  float: left;
  padding: 3px 4px 0 4px;
  margin-left: 2vw;
  display: inline-block; }

.info_rds {
  color: #E00;
  font-size: 3vw;
  border: 3px solid #E00;
  border-radius: 0.5vw;
  float: left;
  display: inline-block;
  padding: 3px 4px 0 4px;
  margin-left: 4vw;
  font-weight: bold; }

.info_pty {
  font-size: 3vw;
  border: 3px solid transparent;
  float: right;
  padding: 3px 4px 0 4px;
  display: inline-block; }

.info_rt {
  font-size: 3vw;
  border: 3px solid transparent;
  float: right;
  padding: 3px 4px 0 4px;
  display: inline-block;
  margin-right: 4vw; }

.info_tp {
  font-size: 3vw;
  border: 3px solid transparent;
  float: right;
  padding: 3px 4px 0 4px;
  display: inline-block; }

.player {
  color: #FFF;
  width: 100%;
  margin: 10vh auto 10vh;
  font-family: "Lucida Console", Monaco, monospace;
  display: flex;
  flex-direction: row;
  flex: 1 1 0%; }

.player__play-control {
  width: 11vw;
  height: 11vw;
  font-size: 0;
  white-space: nowrap;
  text-align: center;
  background-color: transparent;
  outline: none;
  border: none;
  cursor: pointer;
  margin: 0 0 0 8vw; }

.player__play-control, .player__play-control .left, .player__play-control .right, .player__play-control:before {
  display: inline-block;
  vertical-align: middle;
  transition: border 0.5s, width 0.5s, height 0.5s, margin 0.5s;
  transition-timing-function: cubic-bezier(1, 0, 0, 1); }

.player__play-control:before {
  content: "";
  height: 11vw; }

.player__play-control.pause .left, .player__play-control.pause .right {
  margin: 0;
  border-left: 3.63vw solid #FF0000;
  border-top: 0 solid transparent;
  border-bottom: 0 solid transparent;
  height: 9.526vw; }

.player__play-control.pause .left {
  border-right: 2.2vw solid transparent; }

.player__play-control.play .left {
  margin-left: 1.83333vw;
  border-left: 4.763vw solid #FF0000;
  border-top: 2.75vw solid transparent;
  border-bottom: 2.75vw solid transparent;
  border-right: 0 solid transparent;
  height: 5.5vw; }

.player__play-control.play .right {
  margin: 0;
  border-left: 4.763vw solid #FF0000;
  border-top: 2.75vw solid transparent;
  border-bottom: 2.75vw solid transparent;
  height: 0; }

.player__play-control:hover {
  border-color: #e6e6e6; }
  .player__play-control:hover .left, .player__play-control:hover .right {
    border-left-color: #e6e6e6; }

.play-image {
  display: block; /* Изменено на block, чтобы отображать изображение */
  margin: 0 0 0 8vw; }
  .play-image img {
    width: 11vw;
    height: 11vw; }

.play-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  margin: 0 8vw; }

#play-artist {
  color: #E00;
  font-size: 5vw;
  margin: 0.5vh 0 0; }

#play-track {
  font-size: 3vw;
  margin: 1vh 0 0 0; }

footer {
  height: auto;
  font-family: "Play", sans-serif;
  padding: 0 16px 16px;
  font-size: 14px;
  align-self: center flex-end; }
  footer ul {
    list-style: none;
    position: relative;
    height: 26px;
    padding: 4px 4px 4px 4px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    flex: 1 1 0%;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto; }
    footer ul li {
      display: flex;
      flex-direction: column;
      justify-content: flex-end; }
      footer ul li h3 {
        color: #7f7f7f;
        margin: 0 0 8px; }
      footer ul li span {
        display: inline-block;
        color: #5d5d5d;
        width: 140px; }
      footer ul li a {
        color: #b1b1b1;
        text-decoration: none; }
        footer ul li a:visited {
          color: #b1b1b1; }
        footer ul li a:hover {
          color: #E00; }

.content {
  font-family: "Play", sans-serif;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 16px; }
  .content h2 {
    color: #7f7f7f;
    margin: 0 0 8px;
    text-align: center; }
  .content > div {
    list-style: none;
    height: 26px;
    padding: 4px 4px 4px 4px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    flex: 1 1 0%; }
    .content > div a {
      color: #b1b1b1;
      text-decoration: none;
      text-align: start; }
      .content > div a:visited {
        color: #b1b1b1; }
      .content > div a:hover {
        color: #E00; }

@media (max-width: 768.99px) {
  footer {
    font-size: 12px; } }
@media (max-width: 768.99px) {
  footer ul {
    /*display: none; */ /* debug */
    list-style: none;
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap; }
    footer ul li {
      margin-top: 16px; }

  .content > div {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    height: 120px; } }

/* Временный стиль для отладки */
        #play-control {
            position: relative;
            z-index: 1000;
        }