:root {
  --accent: #9f00ff;
  --background: #000;
  --text: #fff;
  --header: #000;
}

.light {
  --background: #fff;
  --text: #000;
  --header: #fff;
}

* {
  margin:0;
  padding:0;
}

h1 {
  color:var(--accent);
  text-align: center;
  margin-top:5px;
}

body {
  font-family: courier;
  margin:auto;
  max-width:1100px;
  color:var(--text);
  background:var(--background);
}

main ul {
  padding-left:0;
  list-style-type:none;
}

li:before {
  content:">";
  padding-right:5px;
}

.animate:hover {
  transform: scale(1.1);
}

.animate:active {
  transform: scale(1);
}

p {
  line-height:1.5;
  margin:10px 0 10px 0;
}

a {
  color:var(--accent);
}

.header-icon {
  float:left;
  width:65px;
  height:65px;
  margin-right:20px;
}

nav {
  font-size:1rem;
}

nav ul {
  display:inline;
  list-style:none;
}

main {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}

section {
  margin:5px 2.5px;
  border:3px inset var(--accent);
  background:var(--background);
}

.listheader {
  color:var(--header);
  font-weight:bold;
  letter-spacing:3px;
  padding:10px;
  background-color:var(--accent);
  user-select: none;
  cursor: pointer;
}

h2 {
  font-size:1.1em;
}

h2 .subtitle {
  font-size:0.8em;
  font-weight:normal;
}

.listicon {
  width:80px;
  float:right;
  height:80px;
  margin:0 0 5px 10px;
}

.listtext {
  padding:15px;
  overflow:auto;
  display: inline-block;
  max-height: 200px;
  overflow-y: auto;
}

.foot {
  padding:10px;
  font-size:0.9em;
  text-align:right;
  border-top:2px solid;
  color:var(--accent);
}

.foot p {
  margin:0;
}

.foot p:after {
  content:"✎";
  padding-right:8px;
  display:inline-block;
  transform:scaleX(-1);
}

footer#bottom {
  max-width:100%;
  padding:5px;
  font-size:1rem;
  min-width:300px;
  text-align:center;
  margin:0 5px 15px 5px;
}

#themeToggle {
  position: absolute;
  top: -20px;
  right: 10px;
  transition: transform 0.1s ease;
}

#themeToggle:active {
  transform: translateY(15px);
}

#musicContent img {
  width:100%;
  border: 3px inset var(--accent);
  margin-bottom: 5px;
}

#musicbox button {
  width:169px;
  height:auto;
  padding:5px 0;
  background:var(--background);
  border:3px inset var(--accent);
}

#musicbox button:hover {
  cursor:pointer;
  background:var(--accent);
}

#musicbox button:active {
  transform: scale(0.95);
}

#musicContent {
  padding:12px;
  display: flex;
  flex-direction: column;
  color: var(--text);
  letter-spacing: 0;
  align-items: center;
}

#volumeSlider {
  margin-top:15px;
  margin-bottom:5px;
  width: 169px;
  height: 5px;
  background: var(--accent);
}

#volumeSlider::-webkit-slider-thumb {
  border-radius:0;
  border:3px inset var(--accent);
  width: 10px;
  height: 10px;
  background: var(--accent);
  cursor: pointer;
}

#volumeSlider::-moz-range-thumb {
  border-radius:0;
  border:3px inset var(--accent);
  width: 10px;
  height: 10px;
  background: var(--accent);
  cursor: pointer;
}

#songname {
  font-size:12px;
  color:var(--text);
  padding-bottom:5px;
  text-decoration: none;
}

#pausePlay {
  color:var(--text);
}

#pausePlay.autoplay-blocked {
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Phone stuff */

@media screen and (max-width: 899px) {
    header#top {
        width:calc(100% - 40px);
        margin-top:20px;
    }


    header#top h1 {
        font-size:1.4em;
    }

    main {
        display:inline;
        margin: auto;
        width:calc(100% - 40px);
    }

    .listtext {
        height:auto;
        max-height:10000px;
    }

    .handle {
        display:none;
    }
    
    .foot {
        font-size:0.85em;
    }

    h2 {
        font-size:1.2em;
    }

    footer#bottom {
        width:75%;
    }
}