body{
    text-align: left;
    font-family:'verdana';
    font-size: 12px;
    color:#ff0f87;
    background-image: url(tnbg.png);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
a, a:visited{
    color:#a9e535;
    text-decoration: underline;
}
a:hover{
    color:#7ea530;
    text-decoration: underline;
}
@font-face {
    font-family: 'tex_gyre_adventorregular';
    src: url('texgyreadventor-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.window{
    background-image: url(tnwindow.png);
    z-index: 1;
    position: fixed;
    width: 1536px;
    height: 717px;
    top: 0;
    left: 0;
    overflow: hidden;
    background-size: cover;
 background-repeat: no-repeat;
}
.about{
    background-image: url(BOUT.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 500px;
    height: 570px;
    position: fixed;
    top: 115px;
    right: 50px;
    z-index: 2;
}
.aboutcontainer{
    position:absolute;
    left: 80px;
    top: 218px;
    height: 328px;
    width: 330px;
    padding: 5px 10px 5px 10px;
    border: rgb(255, 15, 135) solid 2px;
    border-radius: 20px;
    z-index: 3;
    overflow-y: scroll;
    overflow-x: hidden;
}
.title{
    color: #60d3be; 
    font-weight: bold; 
    font-size: 14px;
    border-bottom: 2px #60d3be solid;
}
.title a:visited, .title a{
    color: #60d3be;
    text-decoration: none;
}
.title a:hover{
    color: #378a7b;
}
.tn{
    background-image: url(TN.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 716px;
    height: 730px;
    position: fixed;
    top: 117px;
    left: 250px;
    z-index: 2;
}
.tncontainer{
    position:absolute;
    left: 247px;
    top: 100px;
    height: 444px;
    width: 395px;
    z-index: 3;
     padding: 0px 10px 5px 10px;
     border: #60d3be solid 2px;
    border-radius: 20px 20px 0px 20px;
    overflow-y: hidden;
    overflow-x: hidden;
}
.tncontainer iframe{
    height: 257px;
    width: 405px;
    border: none;
}
.intro{
    margin: 5px 0px 15px 0px;
}
.nav{
    text-align: center;
  word-spacing: 7px;
  width: 395px;
  border-top: #60d3be dotted 2px;
  border-bottom: #60d3be dotted 2px;
  padding: 2px 0px 3px 0px;
  font-weight: bold;
    font-size: 13px;
    color: #ff0f87;
}
.nav a, .nav a:visited{
    color: #60d3be;
    text-decoration: none;
}
.nav a:hover{
    color: #378a7b;
     text-decoration: none;
}
#one{
    grid-area: one;
    border-right:#60d3be dotted 2px;
    font-size: 10px;
}
.indent{
    padding-left: 15px;
}
h1{
    padding: 0px;
    margin: 0;
    color: #60d3be;
    font-weight: bold;
    font-size: 13px;
}
h2{
     padding: 0px;
    margin: 0;
    color: #a9e535;
    font-weight: bold;
    font-size: 10px;
}
#two{
    grid-area: two;
}
.twotext{
    padding-left: 5px;
}
ul{
    margin-top: 2px;
    padding-left: 15px;
    font-size: 10px;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "⋆";
  text-indent: -5px;
}
.year{
    font-weight: bold;
    font-size: 12px;
    color:#a9e535;
    padding-top: 5px;
}
.artists{
    background-image: url(ARTISTS.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 430px;
    height: 300px;
    position: fixed;
    top: 140px;
    left: 20px;
    z-index: 2;
}
.artistscontainer{
    position:absolute;
    left: 40px;
    top: 118px;
    height: 137px;
    width: 200px;
    padding: 5px 2px 5px 10px;
    border: #a9e535 solid 2px;
    border-radius: 20px;
    z-index: 4;
    overflow-y: scroll;
    overflow-x: hidden;
}
select{
    width: 130px;
    text-align: center;
    font-family: Verdana;
    font-size: 10px;
    margin: 0;
    margin-bottom: 5px;
}
input{
    width: 43px;
    text-align: center;
    font-family: verdana;
    font-size: 10px;
    margin: 0;
     margin-bottom: 5px;
}
.playlist{
    background-image: url(PLAYLIST.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 560px;
    height: 300px;
    position: fixed;
    bottom: 30px;
    left: 700px;
    z-index: 2;
}
.playlistcontainer{
    position:absolute;
    right: 74px;
    bottom: 22px;
    height: 178px;
    width: 198px;
    padding: 5px 10px 5px 10px;
    border: #60d3be solid 2px;
    border-radius: 20px;
    z-index: 3;
    overflow-y: scroll;
    overflow-x: hidden;
}
.dropdown-btn{
  display: block;
  text-align: left;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;

}
.dropdown-container a:visited, .dropdown-container a{
    color: #ff0f87;
    text-decoration: none;
}
.dropdown-container a:hover{
    color: #b6005b;
    text-decoration: underline;
}
  .start{
  position: relative;
   width: 100px;
   margin-left: 0px;
  margin-right: 0px;
   height: 100px;
   z-index: 2;
} 
.startcontainer{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 4;
   width: 1900px;
   height: 30px;
}
.reviewwindow{
    background-image: url(reviews.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 766px;
    height: 730px;
    position: fixed;
    top: 130px;
    left: 250px;
    z-index: 2;
}
.reviewcontainer{
    position:absolute;
    left: 11px;
    top: 87px;
    height: 425px;
    width: 373px;
    z-index: 3;
     padding: 0px 10px 5px 10px;
     border: #ff0f87 solid 2px;
    border-radius: 20px 20px 0px 20px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.reviewcontainer iframe{
    height: 257px;
    width: 405px;
    border: none;
}
.latest{
    background-image: url(latest.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 490px;
    height: 300px;
    position: fixed;
    top: 160px;
    right: 100px;
    z-index: 2;
}
.latestcontainer{
    position:absolute;
    right: 54px;
    top: 57px;
    height: 184px;
    width: 217px;
    padding:2px;
    border: #a9e535 solid 2px;
    border-radius: 20px;
    z-index: 4;
    overflow-y: scroll;
    overflow-x: hidden;
     direction: rtl;
}
.latestblock{
    display: flex;
      flex-direction: column;
      position: relative;
      padding: 2px 0px 2px 0px;
      color: #a9e535;
      border-bottom: #ff0f87 dotted 2px;
}
.latestitems a, .latestitems a:visited{
    color: #60d3be;
}
.latestitems a:hover{
    color: #378a7b;
}
.latestitems{
  padding: 2px 2px 1px 2px;
  text-align: left;
  display: flex;
  flex-direction: row;
}
.latestimageitems img{
  padding-right: 2px;
}
.reviewtitlelower{
    color: #a9e535; 
    font-weight: bold; 
    font-size: 14px;
    border-bottom: 2px #a9e535 dotted;
}
.reviewtitlelower a:visited, .reviewtitlelower a{
    color: #ff0f87;
    text-decoration: none;
}
.reviewtitlelower a:hover{
    color: #7ea530;
}
.block{
    display: flex;
      flex-direction: column;
      position: relative;
      padding: 5px 0px 2px 0px;
}
.items{
  padding: 3px 5px 1px 5px;
  text-align: left;
  display: flex;
  flex-direction: row;
}
.imageitems img{
  padding-right: 5px;
}
.reviewcontainer ol{
    margin: 2px 2px 2px 20px;
    padding: 2px;
}
.navr{
    color: #60d3be; 
    font-weight: bold; 
    font-size: 14px;
    position: fixed;
    display: block;
    top: 190px;
    left: 200px;
    width: fit-content;
    background-color: white;
    z-index: 10;
    padding: 2px;
}
.navrr a:visited, .navr a{
    color: #60d3be;
    text-decoration: none;
}
.navr a:hover{
    color: #378a7b;
}