*{margin:0;padding:0}
div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td,footer,header,nav{box-sizing:border-box}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
a{text-decoration:none}
a img{border-style:none}
ul,li{list-style-type:none}

html{
  font-size:62.5%
}
body{
  background:#000; /* background */
  color:#fff; /* textcolor */
  font-size:1.2em; /* font size */
  font-family:Verdana;
  letter-spacing:.1em;
  line-height:1.5;
  text-align:center;
  overflow-y:scroll;
  overflow-wrap:break-word;
  word-wrap:break-word
}
a{
  color:#c538fd
}
/*--------------------------------------------------------
basic
--------------------------------------------------------*/
#wrapper{
  background:#000;
  border:1px solid #fff;
  margin:20px auto;
  width:600px /*Change the overall width and size here*/
}
#wrapper2{
  background:#000;
  border:1px solid #fff;
  margin:20px auto;
  width:685px /*Change the overall width and size here*/
}
/*--------------------------------------------------------
Top (Header)
--------------------------------------------------------*/
header{
  text-align:right
}
.header-inner{
  color:#fff;
  padding:10px
}
/*--------------------------------------------------------
menu
--------------------------------------------------------*/
#menu{
  background:#c538fd;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
  color:#000;
  font-weight:700;
  line-height:1;
  margin:10px 0;
  width:100%;
  text-align:right
}
nav li{
  display:inline-block; /*Side by side*/
  position:relative; /*Submenu display position criteria*/
  height:2em;line-height:2em; /*Menu height */
}
nav li a,nav li span{
  background:-webkit-linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(120, 33, 155,.6) 50%) 0 0;
  background:linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(120, 33, 155,.6) 50%) 0 0;
  background-size:200% auto;
  border-left:1px solid #000;
  color:#000;
  display:block;
  margin-left:-1px;
  padding:0 10px;
  transition:.3s
}
nav li a:hover,nav li span:hover {
  background-position:-100% 0
}
/* Submenu */
.sub-menu{
  background:rgba(0, 0, 0, 0.8);
  position:absolute;
  width:180px; /*Submenu Width*/
  z-index:20
}
.sub-menu li{
  display:block; /*Reset Horizontal*/
  visibility:hidden; /*hide*/
  overflow:hidden; /*hide*/
  height:0; /*hide*/
  width:100%;
  text-align:left
}
.sub-menu li a{
  color:#fff
}
nav li:hover .sub-menu li{
  visibility:visible;
  overflow:visible;
  height:3em;line-height:3em; /* Submenu Height*/
}
#open{display:none}
/*--------------------------------------------------------
main
--------------------------------------------------------*/
#contents{
  padding:10px 20px;
  text-align:left
}
#contents a{
  color:rgb(197, 56, 253);
  text-decoration:underline;
  text-decoration-color:#ccc /* Some browsers only*/
}
#contents a img{text-decoration:none}
/*--------------------------------------------------------
Bottom (footer)
--------------------------------------------------------*/
footer{
  border-top:1px solid #fff;
  margin:10px 20px;
  padding:10px 0;
  text-align:right
}
/*--------------------------------------------------------
Link to top of page
--------------------------------------------------------*/
#pagetop {/*Position set with scroll.js*/
  background:rgb(120, 33, 155);/* background*/
  color:#fff;/*color*/
  height:50px;width:50px; /* Size */
  border-radius:30px;
  box-sizing:border-box;
  display:block;
  line-height:16px;
  padding-top:25px;
  position:fixed;
  text-align:center;
  z-index:10
}
#pagetop:before {
  content:'\25B2';
  font-size:14px;
  position:absolute;
  left:0;top:10px;
  width:100%
}
#pagetop:hover {
  background:#78219b
}
#fl a{
  margin:10px 0
}
/*--------------------------------------------------------
Headings, Borders, and Lines
--------------------------------------------------------*/
h1{
  color:#c538fd;
  font-size:1.3em;
  text-align:left;
  margin:0 0 .5em
}
h1 a{
  color:#c538fd
}
h2{
  background:#c538fd;
  color:#000;
  font-size:1.1em;
  margin:10px 0 10px -20px;
  padding:.1em 1em;
  position:relative;
  text-align:right
}
h2::after{
  border-width:0 10px 10px 0;
  border-style:solid;
  border-color:#000 #000 #fff #fff;
  box-shadow:-1px 1px 2px rgba(0, 0, 0, .1);
  content:'';
  position:absolute;
  right:0;
  top:0;
  width:0
}
h3{
  border-bottom:3px double #fff;
  font-size:1em;
  margin:2em 0
}
dt{
  color:#c538fd;
  font-weight:700;
  float:left;
  clear:both;
  margin:0 0 5px;
  width:150px
}
dd{
  border-bottom:1px solid #c538fd;
  margin:0 0 5px 160px
}
em{
  font-weight:700
}
input,textarea{
  background:#c538fd;
  border:1px solid;
  color:#000;
  margin:3px 0;
  width:200px
}
textarea{
  height:50px
}
hr{
  display:block;
  border:0;  
  border-top:1px solid #ccc;
  margin:1em 0;
  padding:0;
  height:1px
}
.marker{
  background:#c538fd;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #000), color-stop(0.49, #000), color-stop(0.5, #f69), color-stop(1, #f69));
  background:-webkit-linear-gradient(transparent 80%, #c538fd 0%);
  background:linear-gradient(transparent 80%, #c538fd 0%)
}
.dcline{
  border-left:3px solid #c538fd;
  margin:5px 0;
  padding:3px
}
.textbox{
  border:1px solid;
  margin:10px 0;
  padding:3px;
  text-align:center
}
.title{
  color:#c538fd;
  font-size:1.5em;
  font-weight:700;
  margin:2em 0;
  text-align:right
}
.txt{
  border-left:1px dotted;
  color:#999;
  margin:1em;
  padding:0 0 0 1em
}
.frame{
  background:#c538fd;
  padding:5px;
  border-radius:3px
}
/*--------------------------------------------------------
For smartphones and tablets
Switch at width 600px
--------------------------------------------------------*/
@media screen and (max-width: 600px){
  body{font-size:1.4em;margin:0 20px 60px}
  #wrapper{width:100%}
  header{position:relative}
  dt{float:none;clear:none;width:auto}
  dd{margin-left:20px}
  img{max-width:100%;height:auto} /*Thumbnail image display*/
  /*menu*/
  #menu{
    background:rgba(0,0,0,.9); /*Menu background color*/
    text-align:left;
    border:none;
    margin:0 auto;
    display:none;
    position:absolute; /*Fixed display position*/
    left:0;
    z-index:10
  }
  nav li{
    display:inherit;
    height:auto;line-height:inherit
  }
  nav li a,nav li span{
    border-left:0;
    color:#fff;
    position:relative;
    padding:15px 0; /*Menu height can be adjusted here*/
    text-indent:1em;
    transition:.5s
  }
  .sub-menu{
    background:none;
    position:static;
    display:none; /* hide */
    width:100%
  }
  .sub-menu li{
    text-indent:1em;
    display:inline-block;
    visibility:visible;
    overflow:visible;
    height:auto;
    width:50%
  }
  .sub-menu li a:after{display:none}
  nav li:hover .sub-menu li{
    height:auto;line-height:inherit
  }
  nav li span:after{
    border-top:3px solid #fff; /*Menu ">" color*/
    border-right:3px solid #fff; /*Menu ">" color*/
    content:"";
    display:block;
    margin-top:-5px;
    position:absolute;
    top:50%;right:10px;
    height:5px;width:5px;
    transform:rotate(45deg);
    transition:.2s
  }
  nav li span.open:after{transform:rotate(135deg)}
  #open{
    background:#c538fd;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    color:#000;
    display:block;
    padding:.5em;
    margin:10px 0
  }
}
/* --------------------------------------------------------
 Last.fm Music Widget
-------------------------------------------------------- */

#music {
  margin: 20px auto;
  max-width: 600px;
  text-align: left;
}

/* Section headings (Now Playing / Top This Week) */
#music h3 {
  color: #c538fd;
  font-size: 1.2em;
  margin: 1em 0 0.5em;
  border-bottom: 1px solid #c538fd;
  padding-bottom: 4px;
  text-transform: lowercase;
}

/* Each track row */
.music-row {
  display: flex;
  align-items: center;
  margin: 8px 0;
  padding: 5px;
  border: 1px solid #333;
  background: #111;
}

/* Album cover */
.music-row img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid #c538fd;
  object-fit: cover;
  background: url('favicon.ico') center/cover no-repeat;
}

/* Track link (song title) */
.music-row a {
  color: #c538fd;
  font-weight: bold;
  text-decoration: underline;
}

/* Artist text */
.music-row div {
  font-size: 0.9em;
  color: #ccc;
}

/* Progress bar container */
#progress-container {
  position: relative;
  background: #222;
  border: 1px solid #c538fd;
  height: 6px;
  width: 100%;
  margin-top: 5px;
  border-radius: 3px;
  overflow: visible; 
  display: none;
}

/* Progress fill */
#progress-bar {
  background: #c538fd;
  height: 100%;
  width: 0;
  transition: width 1s linear;
  box-shadow: 0 0 10px #c538fd, 0 0 20px #c538fd;
}

/* Time text */
#fake-time {
  font-size: 0.9em;
  color: #c538fd;
  margin-bottom: 4px;
}

/* Marker (spinning steamhappy) */
#progress-marker {
  position: absolute;
  top: -7px; /* lift marker fully above the bar */
  left: 0;
  width: 20px;
  height: 20px;
  pointer-events: none;
  animation: spin 1s linear infinite;
  /* glow */
  filter: drop-shadow(0 0 6px #c538fd) drop-shadow(0 0 12px #c538fd);
  z-index: 10; /* force marker above the bar */
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}