@font-face {
    font-family: "gothic";
    src: url("/_fonts/old-english-gothic-pixel.ttf");
}

@font-face {
    font-family: "pt";
    src: url("/_fonts/pt-mono.ttf");
}

body {
  background: url();
  background-color: #2c292d;
  font-family: pt, courier;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #716D80;
  text-shadow: 0 0 3px #2c262d, 0 0 10px #2c262d,
  -1px -1px 0 #2c262d, 1px -1px 0 #2c262d,
  -1px 1px 0 #2c262d, 1px 1px 0 #2c262d;
  font-weight: bold;
}

.container {
    background-repeat: no-repeat;
    background-position: top left;
    position: relative;
    top: -10px;
    justify-content:center;
    align-items:center;
    display: flex;
    background: url('/_images/v1_skeleton-fairies_bg.png');
    background-size: 915px;
    height: 845px;
    width: 910px;

    .main {
      z-index: 3;
      position: absolute;
      top:225px;
      left: 155px;
      border: 0px;
      background-color: transparent !important;
      border-radius: 10px;
      iframe {width: 600px; height: 535px; border: 0px;}
    }

    .bottom {
      z-index: 5;
      position: absolute;
      top:755px;
      left: 155px;
      border: 0px;
      background-color: transparent !important;
      iframe {width: 600px; height: 50px; border: 0px;}
    }

      .desktop {
        display: block;
        z-index: 2;
        position: absolute;
        height: 845px;
        width: 910px;
        top: 0px;
        right: 0px; }

      .mobile {
        display: none;
        z-index: 2;}

    .lyric {
      position: absolute;
      top: 330px;
      left: 45px;
      z-index: 3;
      width: 110px;
      text-align: right;
      text-shadow: 1px 0 5px #2c262d, 0 0 10px #2c262d, 0 0 15px #2c262d;
    }
}

@media screen and (max-width: 800px) {
    .container {
        background: url('/_images/v1_skeleton-fairies_bg-mobile.png');
        background-size: 100% 90%;
        background-repeat: no-repeat !important;
        position: relative;
        justify-content:center;
        align-items:center;
        width: 100%;

        .main {
          z-index: 5;
          position: absolute;
          top: 24%;
          left: 50%;
          transform: translateX(-50%);
          border: 0px;
          width: 65%;
          height: 61%;
          background-color: transparent !important;
          border-radius: 10px;
          iframe {
            width: 100%;
            height: 100%;
            border: 0px;
          }
}
        .bottom {
          z-index: 3;
          position: absolute;
          bottom: -8%;
          left: 50%;
          transform: translateX(-50%);
          overflow: hidden;
          width: 100%;
          border: 0px;
          background-color: transparent !important;
          iframe {width: 100%; height: 50px; border: 0px;}
                }

        .lyric {
            display: none;
            visibility: none;
          }


          .mobile {
            display: block;
            z-index: 2;
            width: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
          }

          .desktop {display: none;}

}

@media screen and (max-width: 700px) {
    .container {
        .main {
          z-index: 5;
          position: absolute;
          top: 20%;
          left: 50%;
          transform: translateX(-50%);
          border: 0px;
          width: 65%;
          height: 64%;
          background-color: transparent !important;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          iframe {
            flex-grow: 1;
            height: calc(100vh - 225px);
            width: 100%;
            height: 100%;
            border: 0px;
          }
}
        .bottom {
          z-index: 3;
          position: absolute;
          bottom: -5%;
          left: 50%;
          transform: translateX(-50%);
          overflow: hidden;
          width: 100%;
          border: 0px;
          background-color: transparent !important;
          iframe {width: 100%; height: 80px; border: 0px;}
                }
              }

}

@media screen and (max-width: 500px) {
  body {overflow: hidden;}
    .container {
        .main {
          z-index: 5;
          position: absolute;
          top: 16%;
          left: 48%;
          transform: translateX(-50%);
          border: 0px;
          width: 76%;
          height: 100%%;
          background-color: transparent !important;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          iframe {
            flex-grow: 1;
            height: calc(100vh - 225px);
            width: 100%;
            height: 95%;
            border: 0px;
          }
}
        .bottom {
          z-index: 6;
          position: absolute;
          top: 80%;
          left: 50%;
          transform: translateX(-50%);
          overflow: hidden;
          width: 100%;
          border: 0px;
          background-color: transparent !important;
          iframe {width: 100%; height: 50px; border: 0px;}
                }


                  .lightbox {
position:absolute;
top:123px;
right: 100px;
z-index:20;
}}

}