body {
  background-color: #09142C; 
  background-image: url('directory/tile-1.svg');
  background-repeat: repeat;
  background-size: 42px 43px;
  background-position: center;
  background-attachment: fixed;
}


.music-player {
   touch-action: none;
}

.menu-tab {
   touch-action: none;
}

.music-player {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 332px;
    height: 148px;
}


.outside-frame-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;

    position: absolute;
    width: 332px;
    height: 148px;
    left: 0px;
    top: 0px;
    order: 0;
    flex-grow: 0;
    z-index: 0;
}

.outside-frame {
    width: 332px;
    height: 148px;
    background: #112D68;
    border-radius: 2px;
    flex: none;
    align-self: stretch;
}

.panels-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 0px 4px;
    isolation: isolate;
    position: absolute;
    width: 332px;
    height: 128px;
    left: 0px;
    top: 0px;
    order: 1;
    flex-grow: 0;
    z-index: 1;
}

.main-panel {
    width: 326px;
    height: 128px;
    flex: none;
    position: relative;
    background: #374C62;
    left: 0px;
    order: 0;
    flex-grow: 1;
    z-index: 0;
}

.panel-border1 {
    width: 323px;
    height: 125px;
    position: absolute;
    border: 1px solid #545468;
    top: 1px;
    left: 1px;
    z-index: 1;
}

.panel-border2 {
    width: 323px;
    height: 125px;
    position: absolute;
    border: 1px solid #0A1B4A;
    top: 0px;
    left: 0px;
    z-index: 2;
}

             
.right-side-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 0px 22px 16px;
    gap: 10px;

    position: absolute;
    width: 212px;
    height: 144px;
    left: 120px;
    top: 0px;
    order: 1;
    flex-grow: 0;
    z-index: 1;
}

.radio-title-container {
  position: relative;
  overflow: hidden;
  width: 182px; 
  height: 16px;
  align-items: center;
}


.radio-title {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
  font-size: 12px; 
  font-family: 'VT323';
  font-style: normal;
  color: #4F7CC3;
  z-index: 2;
  animation: marquee 12s linear infinite;
}


@keyframes marquee {
  0% {
    transform: translateY(-50%) translateX(100%);
  }
  100% {
    transform: translateY(-50%) translateX(-100%);
  }
}

.radio-title-panel {
    box-sizing: border-box;
    position: absolute;
    width: 182px;
    height: 16px;
    left: 0px;
    top: 0px;
    background: #040406;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #545768;
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
}

.radio-title-border {
    box-sizing: border-box;
    position: absolute;
    width: 182px;
    height: 16px;
    left: 0px;
    top: 0px;
    border-width: 1px 0px 0px 1px;
    border-style: solid;
    border-color: #1B1B2A;
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 4;
}



.cool-lights-container {
  
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px 20px 0px 0px;
    gap: 20px;

    width: 196px;
    height: 12px;
}

.coolness-frame {
    display: flex;
    flex-direction: row;
    width: 65px;
    height: 12px;
    order: 0;
    gap: 3px;
}

.coolness-vector-container {
    width: 24px;
    height: 12px;
    left: 0px;
    top: 0px;
}

.coolness-vector {
    width: 24px;
    height: 12px;
    left: 0px;
    top: 0px;
}


.coolness-text {
    width: 39px;
    height: 7px;
    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 7px;
    margin-top: 3px;
    /* identical to box height, or 58% */

    color: #ACD5EB;
}

.on-frame {
    display: flex;
    flex-direction: row;
    width: 39px;
    height: 12px;
    flex: none;
    order: 0;
    gap: 3px;
}

.ON-vector-container {
    width: 23px;
    height: 12px;
    left: 0px;
    top: 0px;
}

.ON-icon {
    width: 23px;
    height: 12px;
    left: 0px;
    top: 0px;
}

.ON-text {
    width: 11px;
    height: 7px;
    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 7px;
    margin-top: 5px;


    color: #ACD5EB;
  
}

.radio-frame {
    display: flex;
    flex-direction: row;
    width: 41.24px;
    height: 12px;
    flex: none;
    order: 0;
    gap: 3px;
}

.radio-vector-container {
    width: 10px;
    height: 12px;
    left: 0px;
    top: 0px;
}

.radio-icon {
    width: 10px;
    height: 12px;
    left: 0px;
    top: 0px;
}

.radio-text {
    width: 39px;
    height: 7px;
    left: 154px;
    top: 2px;

    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 7px;
    margin-top: 3px;
    /* identical to box height, or 58% */

    color: #ACD5EB;
}

.radiolight {
    position: absolute;
    width: 27.24px;
    height: 7.28px;
    margin-left: 10px;
    margin-top: 4px;
    background: rgba(167, 67, 245, 0.7);
    filter: blur(2px);
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}


.slide-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    isolation: isolate;
    min-width: 182px;
    height: 10px;
    flex: none;
    order: 2;
    flex-grow: 0;
    position: relative;
}

.slide-frame-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    isolation: isolate;
    width: 182px;
    height: 10px;
    flex: none;
    order: 0;
    flex-grow: 0;
    position: relative;
    z-index: 0;
}

.slider-frame {
    box-sizing: border-box;
    position: absolute;
    width: 182px;
    height: 10px;
    left: 0px;
    top: 0px;
    background: #0A1B4A;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #545768;
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
}

.slider-border {
    box-sizing: border-box;
    position: absolute;
    width: 182px;
    height: 10px;
    left: 0px;
    top: 0px;
    border-width: 1px 0px 0px 1px;
    border-style: solid;
    border-color: #1B1B2A;
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;
}

.slider-button-container {
    display: flex;
    align-items: center;
    padding: 0px;
    position: absolute;
    width: 36px;
    height: 18px;
    left: 4px;
    top: 0px;
    order: 1;
    flex-grow: 0;
    z-index: 1;
}

.slider-range {
  position: relative;
  width: 100%;
  height: 18px;
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.slider-button-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 18px;
  cursor: pointer;
}

.aesthetic-light-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    isolation: isolate;
    width: 182px;
    height: 3px;
    flex: none;
    order: 3;
    flex-grow: 0;
    position: relative;
}

.aesthetic-light-frame {
    box-sizing: border-box;
    position: absolute;
    width: 182px;
    height: 3px;
    left: 0px;
    top: 0px;
    background: #8F34D6;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #545768;
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
}

.aesthetic-light-border {
    box-sizing: border-box;
    position: absolute;
    width: 182px;
    height: 3px;
    left: 0px;
    top: 0px;
    border-width: 1px 0px 0px 1px;
    border-style: solid;
    border-color: #1B1B2A;
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;
}

.buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 2px;
    isolation: isolate;
    width: 120px;
    height: 20px;
    order: 4;
    flex-grow: 0;
    position: relative;
}

.back-container {
    padding: 0px;
    width: 26px;
    height: 20px;
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
}

.back-button {
    width: 26px;
    height: 20px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.play-container {
    position: relative;
    padding: 0px;
    width: 26px;
    height: 20px;
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;
}

.play-button {
    width: 26px;
    height: 20px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.pause-container {
    padding: 0px;
    width: 26px;
    height: 20px;
    flex: none;
    order: 2;
    flex-grow: 0;
    z-index:2
}


.pause-button {
    width: 26px;
    height: 20px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.next-container {
    padding: 0px;
    width: 26px;
    height: 20px;
    flex: none;
    order: 3;
    flex-grow: 0;
    z-index: 3;
}

.next-button {
    width: 26px;
    height: 20px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.share-button-container {
    padding: 0px;
    position: absolute;
    width: 34px;
    height: 15px;
    left: 115px;
    top: 2.5px;
    flex: none;
    order: 4;
    flex-grow: 0;
    z-index: 4;
}

.share-button {
    width: 34px;
    height: 15px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.nouns-container {
    position: absolute;
    width: 18px;
    height: 7px;
    left: 155px;
    margin-bottom: 15px;
    flex: none;
    order: 5;
    flex-grow: 0;
    z-index: 5;
}

.nouns {
    position: absolute;
    width: 18px;
    height: 7px;
    left: 155px;
    flex: none;
    order: 5;
    flex-grow: 0;
    z-index: 5;
}

.left-side-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 10px 10px 15px;
    gap: 4px;
    isolation: isolate;
    position: absolute;
    width: 120px;
    height: 144px;
    left: 0px;
    top: 0px;
    flex: none;
    order: 2;
    flex-grow: 0;
    z-index: 2;
}

.digital-panel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    width: 112px;
    height: 51.95px;
    position: relative;
}

.digital-panel-frame {
    box-sizing: border-box;
    position: absolute;
    width: 112px;
    height: 51.95px;
    left: 0px;
    top: 0px;
    background: #040406;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #545468;
    order: 0;
    flex-grow: 0;
    z-index: 0;
}

.digital-panel-border {
    box-sizing: border-box;
    min-width: 112px;
    height: 51.95px;
    border-width: 1px 0px 0px 1px;
    border-style: solid;
    border-color: #1B1B2A;
    flex: none;
    order: 1;
    flex-grow: 0;
    position: absolute;
    z-index: 1;
}

.dots-container {
    width: 106px;
    height: 47px;
    padding: 3px 3px 3px;
    z-index: 2;
}

.dots {
    width: 100%;
    height: auto;
}

.retro-container {
    position: absolute;
    width: 4px;
    height: 34px;
    left: 4px;
    top: 3px;
    order: 1;
    flex-grow: 0;
    z-index: 3;
}


.RETRO {
    width: 4px;
    height: 34px;
    order: 1;
    flex-grow: 0;
    z-index: 3;
}

.local-time {
  position: absolute;
  top: 10px;
  font-size: 15px;
  font-family: 'VT323';
  font-style: normal;
  color: #4F7CC3;
  z-index: 3;
}

#lottie-animation {
  position: absolute;
  display: none;
  top: 25px;
  width: 74px;
  height: 23px;
  z-index: 3;
  pointer-events: none;
}

.box-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 1px;
    position: absolute;
    width: 112px;
    height: 32px;
    left: 15px;
    top: 76px;
    order: 2;
    flex-grow: 0;
    z-index: 2;
}

.large-box-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 1px;
    isolation: isolate;
    width: 57px;
    height: 24px;
    order: 0;
    flex-grow: 0;
}

.cooler-frame {
    position: absolute;
    width: 54px;
    height: 24px;
    left: 58px;
    top: 0px;
    order: 0;
    flex-grow: 0;
    z-index: 0;
}

.cooler-vector {
    width: 54px;
    height: 24px;
    left: 58px;
    top: 0px;
}

.stereo-container {
    position: absolute;
    width: 57px;
    height: 24px;
    left: 0px;
    top: 0px;
    order: 1;
    z-index: 1;
}

.stereo-light-container {
    position: absolute;
    width: 5px;
    height:5px;
    left: 4px;
    top: -5px;
}

.stereo-light {
    width: 5px;
    height: 5px;
    left: 0px;
    top: 0px;
}


.stereo-98 {
    position: absolute;
    width: 33px;
    height: 7px;
    left: 12px;
    top: 9px;
    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    font-size: 9px;
    line-height: 7px;
    color: #1B1B2A;
}

.stereo-border-container {
    position: absolute;
    width: 57px;
    height: 24px;
    left: 0px;
    top: 0px;
}

.stereo-border {
    width: 57px;
    height: 24px;
    left: 0px;
    top: 0px;
}

.radio-names-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    padding: 0px;
    left: 0px;
    top: 25px;
    isolation: isolate;
    width: 112px;
    height: 7px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.radio-borders-container {
    position: absolute;
    width: 112px;
    height: 15px;
    left: 0px;
    top: 0px;
}

.radio-borders {
    width: 112px;
    height: 15px;
}

.RADIO {
    position: absolute;
    width: 90px;
    height: 7px;
    left: 6px;
    top: 3.5px;
    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    font-size: 5px;
    line-height: 7px;
    color: #3E2330;
    flex: none;
    order: 2;
    flex-grow: 0;
    z-index: 2;
}

.border1 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 16px 2px 4px 3px;
    position: absolute;
    width: 332px;
    height: 148px;
    left: 0px;
    top: 0px;
    flex: none;
    order: 2;
    flex-grow: 0;
    z-index: 2;
}

.border {
    box-sizing: border-box;
    width: 327px;
    height: 128px;
    border: 1px solid #545468;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;
}

.border2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 15px 3px 5px 2px;
    position: absolute;
    width: 332px;
    height: 148px;
    left: 0px;
    top: 0px;
    flex: none;
    order: 3;
    flex-grow: 0;
    z-index: 3;
}

.inside-panel {
    box-sizing: border-box;
    width: 327px;
    height: 128px;
    border: 1px solid #151521;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;
}

.top-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1px 0px 1px;
    gap: 3px;
    isolation: isolate;
    position: absolute;
    width: 332px;
    height: 16px;
    left: 0px;
    top: -1px;
    order: 4;
    flex-grow: 0;
    z-index: 4;
}

.universal-S-container {
  flex: none;
  width: 6px;
}

.universal {
    flex: none;
    order: 0;
    flex-grow: 0;
}

.icons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    width: 34px;
    height: 6px;
    z-index: 1;
}

.Icon1 {
    width: 6px;
    height: 7px;
    flex: none;
}

.Icon2 {
    width: 6px;
    height: 7px;
    flex: none;
}

.Exit {
    width: 6px;
    height: 7px;
    flex: none;
}

.title-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 274px;
    height: 16px;
}

.handle1 {
    width: 106px;
    height: 11px;
    flex: none;
    order: 0;
    flex-grow: 0;
}


.handle2 {
    width: 106px;
    height: 11px;
    flex: none;
    order: 2;
    flex-grow: 0;
}

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Opera and Firefox */
}

#music-player {
  user-select: none;
}

.radio-title.stopped {
  animation-play-state: paused;
}

.animation {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.default {
  display: block;
}

.animated {
  display: none;
}

.menu-tab {
  display: flex;
  flex-direction: column;
  padding: 16px 6px 6px;
  position: absolute;
  left: 0;
  top: 0;
  width: 438px;
  height: 344px;
  background: #6185AA;
  border: 1px solid #2B3C4F;
  border-radius: 2px;
}

.menu-tab-border {
  position: absolute;
  border: 1px solid #2B3C4F;
  border-width: 1px 0px 1px 0px;
  top: 16px; /* 16px from the top */
  bottom: 6px; /* 6px from the bottom */
  left: 0;
  right: 0;
}


.header-container {
  display: flex;
  position: absolute;
  isolation: isolate;
  flex-direction: row;
  align-items: center;
  top: 0px;
  width: 438px;
  justify-content: space-between;
  height: 16px;
}


.icons-tab-container{
  position: relative;
  top: -1px;
}


.menu-tab-main {
  display: flex;
  flex-direction: row;
  gap: 0px;
  height: 100%;
  background: #040406;
}

.menu-left-side {
  display: flex;
  flex-direction: column;
  padding: 10px 0px 10px;
  gap: 10px;
}

.cosmic-image-container {
  width: 337px;
  height: 286px;
}

.cosmic-radio-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 7px;
  width: 350px;
}

.radio-lines {
  display: flex;
  flex-direction: column;
  width: 158px;
  gap: 3px;
}

.line-radio {
  width: 158px;
  border: 1.5px solid #4936AF;
}

.cosmic-radio-text-container {
  font-family: 'Helvetica';
  font-style: italic;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.03em;
  color: #4936AF;
}


.small-texts-container {
  display: flex;
  flex-direction: row;
  width: 280px;
  position: absolute;
  top: 280px;
  left: 15px;
  justify-content: space-between;
  align-items: center;
}

.made-with-text-container {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-size: 9px;
  line-height: 7px;
  color: #FFFFFF;
}

.nineties-text-container {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 19.98px;
  height: 10.26px;
  border: 0.5px solid #FFFFFF;
  border-radius: 2px;
}

.nineties-text {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-size: 9px;
  line-height: 7px;
  color: #FFFFFF;
}

.badge-container {
  position: absolute;
  top: 245px;
  left: 264px;
}

.menu-right-side {
  display: flex;
  flex-direction: column;
  padding: 22px 15px 30px 0px;
  height: 300px;
  width: 125px;
  gap: 150px;
  position: relative;
}

.menu-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  left:-38px;
  z-index: 3;
}

.menu-buttons-container a {
  text-decoration: none;
}


.menu-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 68px;
  height: 21.5px;
  margin-right: 10px;
}

.menu-button-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.button-1-text-container,
.button-2-text-container,
.button-3-text-container {
  font-family: VT323;
  font-size: 12px;
  line-height: 12px;
  margin-top: -2px;
  color: #4A5A6B;
  pointer-events: none;
}



.lines-right-container {
  display:flex;
  flex-direction: column;
  gap: 3px; 
  position: relative;
  left: -30px;
}

.line-right {
  width: 99px;
  border: 2px solid #374C62;
}

.circles-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 18px;
  left: 60px;
  gap: 15px;
  z-index: 4;
}

.bold-circles {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.bold-circle {
  width: 5px;
  height: 5px;
  background-color:#4936AF;
  border-radius: 50%;
}

.light-circles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.light-circle {
  width: 5px;
  height: 5px;
  background-color:#6596E4;
  border-radius: 50%;
}

.music-text {
 font-family: 'Helvetica';
 font-style: normal;
 position: absolute;
 top: 125px;
 left: -15px;
 font-weight: 700;
 font-size: 30px;
 transform: rotate(90deg);
 color: #40214B;
}

.music-player {
  position: absolute;
  z-index: 1001;
}

.menu-tab {
  position: absolute;
  z-index: 1000;
}



#menu-tab {
  user-select: none;
}

.logo-container {
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 2000;
}

.logo-container img {
  max-width: 100%;
  height: auto;
  width: 202px;
}

@media (max-width: 390px) {
  #music-player {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
  }
}


@media (max-width: 390px) {
  #menu-tab {
    display: none;
  }
    #menu-buttons-container-mobile {
    display: flex;
  }
}

.menu-buttons-container-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: calc(50% + 120px); 
  left: 50%;
  transform: translate(-50%, 0);
}

#menu-buttons-container-mobile a {
  text-decoration: none;
}