html, body {
    height: 100vh;
    overflow: hidden;
}
button {
    background: none;
    border: none;
   }
.tema-btn {
font-size: 25px;
}
body {
    --text-color: #333;
    --span-color: #555;

    --bkg-color: #fff;
  }
  body.dark-theme {
    --text-color: #eee;
    --span-color: rgb(185, 185, 185);

    --bkg-color: #222;
  }
  
  @media (prefers-color-scheme: dark) {
    /* defaults to dark theme */
    body {
      --text-color: #eee;
      --span-color: #eee;

      --bkg-color: #222;
    }
    body.light-theme {
      --text-color: #333;
      --span-color: #555;

      --bkg-color: #fff;
    }
  }
  i {
    color: var(--text-color);

  }
  h1, p{
    color: var(--text-color);

  } 
  a {
    text-decoration-line: none;
    margin: auto 0px auto 0px;
  }
  
  * {
    font-family: Arial, Helvetica, sans-serif;
  }
  
  body {
    background: var(--bkg-color);
  }
  

.radio-container { height: 85%; margin: auto; }

img {
height: 60px;

width: 60px;
}
p {
    font-size: 16px;
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: auto;
    text-transform: uppercase;
    margin-top: auto;
}

.song-box {
    margin-bottom: auto;
    margin-top: auto;
}
.song-box p {
    font-size: 24px;
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: auto;
    margin-top: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
}

.song-box span {
    font-size: 18px;
    color: var(--span-color);
}
.title-box {
    margin-bottom: auto;
    margin-top: auto;
}
.title-box p {
    font-size: 18px;
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: auto;
    margin-top: auto;
}

.title-box span {
    font-size: 13px;
    color: var(--span-color);
}


.radio-img {
text-align: center;
margin: auto;
} 
.radio-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(7, 1fr);
  gap: 1px 1px;
  grid-template-areas: "header" "art" "dance" "evergreen" "nas" "sevdah" "jazz";
}

.header {
  display: grid;
  grid-template-columns: 80% 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "title tema";
  grid-area: header;
}

.title { grid-area: title; margin-left: 20px;}

.tema { grid-area: tema; }

.art {
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "art-cover art-title";
  grid-area: art;
}

.art-cover { grid-area: art-cover; }

.art-title {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: ".";
  grid-area: art-title;
}

.dance {
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "dance-cover dance-title";
  grid-area: dance;
}

.dance-cover { grid-area: dance-cover; }

.dance-title {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: ".";
  grid-area: dance-title;
}

.evergreen {
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "ever-cover ever-title";
  grid-area: evergreen;
}

.ever-cover { grid-area: ever-cover; }

.ever-title { grid-area: ever-title; }

.nas {
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "nas-cover nas-title";
  grid-area: nas;
}

.nas-cover { grid-area: nas-cover; }

.nas-title { grid-area: nas-title; }

.sevdah {
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "sevdah-cover sevdah-title";
  grid-area: sevdah;
}

.sevdah-cover { grid-area: sevdah-cover; }

.sevdah-title { grid-area: sevdah-title; }

.jazz {
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "jazz-cover jazz-title";
  grid-area: jazz;
}

.jazz-cover { grid-area: jazz-cover; }

.jazz-title { grid-area: jazz-title; }

/* For presentation only, no need to copy the code below */
.radio-container * { 
 position: relative;
}

.radio-container *:after { 
 position: absolute;
 top: 0;
 left: 0;
}

.player-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 350px 100px 70px;
    gap: 1px 1px;
    grid-template-areas: "header2" "artwork" "info" "controls";
  }
  
  .header2 {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr;
    gap: 1px 1px;
    grid-template-areas: "back radio-title popup";
    grid-area: header2;
  }
  
  .back { grid-area: back; }
  
  .popup { grid-area: popup; }
  
  .radio-title { grid-area: radio-title; }
  
  .artwork {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 1px 1px;
    grid-template-areas: ".";
    grid-area: artwork;
  }
  
  .info { grid-area: info; }
  
  .controls {
    display: grid;
    grid-template-columns: 1fr 60% 1fr;
    grid-template-rows: 1fr;
    gap: 1px 1px;
    grid-template-areas: ". . .";
    grid-area: controls;
    margin-left: 5%;
    margin-right: 5%;
  }
  
  /* For presentation only, no need to copy the code below */
  .player-container * { 

   position: relative;
  }
  
  .player-container *:after { 
   position: absolute;
   top: 0;
   left: 0;
  }
  @media only screen and (max-height: 600px) {
    .player-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 60px 280px 95px 70px;
        gap: 1px 1px;
        grid-template-areas: "header2" "artwork" "info" "controls";
      }
      .bg2, .slika-cover {
        height: 250px;
      }
      .song-box p {
        font-size: 20px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 5px;
      }
      .controls {
        margin-top: 5%;
      }
  }