:root {
  --roundBG: salmon;
  --roundTXT: black;
  --roundBRD: black;
  --hovRoundBG: aliceblue;
  --bgimage: url("https://images.squidge.org/images/2024/10/09/venusaurloop.png");
  --track-pointer: url('https://images.squidge.org/images/2024/10/09/squirtle.png');
  --vol-pointer: url('https://images.squidge.org/images/2024/10/09/charmeleon.png');
}
* {
  user-select: none;
}
*:focus {
  outline: none;
}

body {
  background: var(--bgclr);
  background-image: var(--bgimage);
  background-repeat: repeat;
  position: static;
}
.hat {
  position: absolute;
  right: 5%;
  top: 0px;
  height: 8rem;
}
@media only screen and (min-width: 40rem) {
  .hat {
    position: absolute;
    right: 13%;
  }
}
.myhat {max-height: 100%;}

.container {
  display: grid;
  grid-gap: 1%;
  position: relative;
  padding: 0 2rem;
  margin: 3rem auto 0;
  max-width: 40rem;
  
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto auto auto; 
    grid-template-areas:
      "i"
      "c"
      "p"
      "p"
      "p";
}
@media only screen and (min-width: 40rem){
  .container {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 2fr; 
  grid-template-areas:
      "i  i"
      "c  p";
   }  
}

#toggle-menu {
  position:fixed;
  bottom:0;left:0;
  margin-bottom:15px;
  margin-left:15px;
  height:auto;
  z-index:3000;
  text-align: center;
}
.seeMenu {
  color: #db4545;
  background-image: url("https://images.squidge.org/images/2024/10/09/pokeball.png");
  width: 35px;
  height:35px;
  padding: 1px;
  margin-top: 7px;
/*    transition: 0.25s;*/
  transition: color 1s;
  background: #52c9ad;
  box-shadow: .2em .2em 0 0 #db4545, inset .2em .2em 0 0 var(--txt);

  &:hover,
  &:focus {
    background-image: url("https://images.squidge.org/images/2024/10/09/pokeball.png");
    animation: blinds 0.75s linear forwards;
    background: linear-gradient(0deg, #52c9ad 25%, transparent 25%) 0 0 / 0.5em 0.5em, linear-gradient(0deg, #db4545 50%, transparent 50%) 0 0 / 1em 1em;
/*    color: adjust-hue(var(--txt),180);*/
  }
}
@keyframes blinds {
  100% {
    background-position: 0 0, 0 -3em;
    background-size: 0 0, 1em 6em;
  }
}
.menuimg {
  padding-top: 2px;
  padding-left: 2px;
  width: 90%;
  height: 90%;
}
.topmenu {
  width: 90%;
  height: auto;
  left: 50%;
  left: 50%;
}

#themenu {
  background-color: salmon;
  position: absolute;
  display: none;
  z-index: 1;
  height: 70%;
  width: 85%;
  top: 50%;
  left: 50%;
  padding: 10px;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.history {
  background: aliceblue;
  height: 100%;
}
.menuTitle{
  padding: 2%;
  font-size: 2rem;
  text-align: center;
  font-family: serif;
}
.instructions{
  text-align: center;
}
.myhistory{
  height: 35%;
  width: 87%;
  overflow: scroll;
}
.close {
  color: #aaaaaa;
  float: right;
  margin-right: 5px;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


.top-box {
  grid-area: i;
  background-color: var(--bgc);
  padding: 15px;
  color:var(--txt);
}
.cover-buttons {
  grid-area: c;
  padding: 5%;
  height: auto;
  height: 100%;
  background-color: var(--bgc);
}
.podfic-playlist {
  grid-area: p;
  padding: 5%;
  max-height: 50rem;
  overflow: scroll;
  color: var(--pltxt);
  background-color: var(--bgc);
}
@media only screen and (min-width: 40rem){
  .cover-buttons {
    max-height: 24rem;
  }
  .podfic-playlist{
    max-height: 24rem;
  }
  #themenu {
    max-width: 20rem;
  }
}

.podfic-info {
  display: flex;
}
.ao3pod, .text-link {
  font-size: 30px;
  color:#000;
  filter: var(--ao3icon);
  height: 30px;
}
.title-creator {
  flex-grow: 1;
  text-align: center;
  margin-bottom: 1rem;
}
.title {
  font-size: 22px;
}
.dividers {
  display: flex;
  justify-content: center;
  height: 12px;
  margin-bottom: 5px;
  margin-top: 5px;
}
.flipright{
  transform: rotate(3deg);
  margin-right: 10px;
  margin-left: 10px;
}
.flipleft{
  transform: rotateY(180deg);
  margin-right: 10px;
  margin-left: 10px;
}
.mytheme {
  text-transform:uppercase;
  letter-spacing:1px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.playing {
  display: flex;
  justify-content: space-between;
}

.podfic-cover {
  border: black solid 2px;
  width: 100%;
  aspect-ratio: 1/1;
  background-size: contain;
  background-image: url("https://images.squidge.org/images/2024/10/09/cover.png");
}
.buttons {
  display:flex;
  justify-content: space-between;
  text-align: center!important;
}
.buttons button {
  box-sizing: border-box;
  width: 19%;
  appearance: none;
  background-color: transparent;
  border: 2px solid var(--pltxt);
  border-radius: 0.6em;
  color: var(--pltxt);
  cursor: pointer;
  align-self: center;
  text-align: center;
  margin-top: 10px;

  &:hover,
  &:focus {
    color: var(--btnhv);
    border: 2px solid var(--btnhv);
    outline: 0;
  }
}
.volcontrols {
  display: flex;
  align-content: center;
  margin-top: 2%;
}
#toggle_mute {
  box-sizing: border-box;
  appearance: none;
  width: 35px;
  margin-right: 5px;
  background-color: transparent;
  border: 2px solid var(--pltxt);
  border-radius: 0.6em;
  color: var(--pltxt);
  cursor: pointer;
  align-self: center;
  text-align: center;

  &:hover,
  &:focus {
    color: var(--btnhv);
    border: 2px solid var(--btnhv);
    outline: 0;
  }
}

.setplayorders {
  margin-top: 5%;
  margin-bottom: 5%;
  
}

.tippy-box[data-theme~='tomato'] {
  background-color: lavenderblush;
  border: 2px solid var(--pltxt);
  align-content: center;
/*  width: 50%;*/
}
.tippy-box[data-theme~='tomato'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--pltxt);
}
.tippy-box[data-theme~='tomato'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--pltxt);
}

.instruction {
  align-self: center;
  text-align: center;
  font-family: serif;
  font-weight: bold;
  color:black;
  font-size: 1.1rem;
}

#Bulbasaur, #Charmander, #Squirtle, #Pikachu {
/*  box-sizing: border-box;*/
/*  appearance: none;*/
  width: 100%;
  margin-top: 5px;
  background-color: transparent;
  border: 2px solid var(--pltxt);
  border-radius: 0.6em;
  color: var(--pltxt);
  cursor: pointer;
  align-self: center;
  text-align: center;
  font-family: serif;
  font-weight: bold;
  font-size: 1rem;
}

#Bulbasaur:hover{
  color: darkgreen;
  border: 2px solid forestgreen;
  background-color: limegreen;
  outline: 0;
}
#Bulbasaur:focus {
  color: darkgreen;
  border: 2px solid forestgreen;
  background-color: limegreen;
  outline: 0;
}

#Charmander:hover{
  color: darkred;
  border: 2px solid darkred;
  background-color: orange;
  outline: 0;
}
#Charmander:focus {
  color: darkred;
  border: 2px solid darkred;
  background-color: orange;
  outline: 0;
}

#Squirtle:hover{
  color: midnightblue;
  border: 2px solid midnightblue;
  background-color: skyblue;
  outline: 0;
}
#Squirtle:focus {
  color: midnightblue;
  border: 2px solid midnightblue;
  background-color: skyblue;
  outline: 0;
}

#Pikachu:hover{
  color: darkgoldenrod;
  border: 2px solid darkgoldenrod;
  background-color: gold;
  outline: 0;
}
#Pikachu:focus {
  color: darkgoldenrod;
  border: 2px solid darkgoldenrod;
  background-color: gold;
  outline: 0;
}

#change_look{
/*  box-sizing: border-box;*/
/*  appearance: none;*/
  width: 70%;
  margin-top: 5px;
  background-color: transparent;
  border: 2px solid var(--pltxt);
  border-radius: 0.6em;
  color: var(--pltxt);
  cursor: pointer;
  align-self: center;
  text-align: center;
  font-family: serif;
  font-weight: bold;
  font-size: 1rem;

  &:hover,
  &:focus {
    color: var(--btnhv);
    border: 2px solid var(--btnhv);
    outline: 0;
  }
}
#toggle_shuffle {
/*  box-sizing: border-box;*/
/*  appearance: none;*/
  width: 25%;
  margin-top: 5px;
  background-color: transparent;
  border: 2px solid var(--pltxt);
  border-radius: 0.6em;
  color: var(--pltxt);
  cursor: pointer;
  align-self: center;
  text-align: center;

  &:hover,
  &:focus {
    color: var(--btnhv);
    border: 2px solid var(--btnhv);
    outline: 0;
  }
}

.podfic-playlist-pod {
  display: flex;
  height: 21px;
  padding-bottom: 5px;
}
.miniplay {
  text-align: center;
  align-items: center;
  font-size: 11px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  appearance: none;
  background-color: transparent;
  border: 2px solid var(--pltxt);
  border-radius: 0.6em;
  color: var(--pltxt);
  cursor: pointer;
  align-self: center;
  text-align: center;
  margin-right: 3px;
  &:hover,
  &:focus {
    color: var(--btnhv);
    border:2px solid var(--btnhv);
    outline: 0;
  }
}
.poddetails {
  flex-grow: 1;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
}
.looong {
  text-align: right;
}

#time_range {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background-color: transparent;

  &:focus {
    outline-color: var(--txt);
  }
}
#time_range::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: 15px;
  border-radius: 25px;
  background: var(--track-b);
  background: var(--track-w);
  background: var(--track-m);
  background: var(--track);
}
#time_range::-moz-range-track {
  -moz-appearance: none;
  appearance: none;
  height: 15px;
  border-radius: 25px;
  background: var(--track-b);
  background: var(--track-m);
  background: var(--track);
}
#time_range::-ms-track {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 15px;
  border-radius: 25px;
  background: var(--track-b);
  background: var(--track-w);
  background: var(--track-m);
  background: var(--track);
}
#time_range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  background: var(--track-pointer);
  background-size: 50%;
  border: 0px solid #000000;
  background-position: left;
  background-repeat: no-repeat;
  height: 35px;
  width: 70px;
  bottom: 5px;
  &:active {
    cursor: grabbing;
  }
}
#time_range::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  position: relative;
  background: var(--track-pointer);
  background-size: 50%;
  border: 0px solid #000000;
  background-position: left;
  background-repeat: no-repeat;
  height: 35px;
  width: 70px;
  cursor: grab;
  &:active {
    cursor: grabbing;
  }
}
#time_range::-ms-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  background: var(--track-pointer);
  background-size: 50%;
  border: 0px solid #000000;
  background-position: left;
  background-repeat: no-repeat;
  height: 35px;
  width: 70px;
  &:active {
    cursor: grabbing;
  }
}

.volume_range {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  margin-top: 2%;
  height: 15px;
  width: 100%;
  &:focus {
    outline-color: var(--txt);
  }
}
.volume_range::-webkit-slider-runnable-track {
  -webkit-appearance: slider-vertical;
  appearance: none;
  height: 10px;
  width: 100%;
  background: var(--vol-b);
  background: var(--vol-m);
  background: var(--vol-w);
  background: var(--vols);
}
.volume_range::-moz-range-track {
  -moz-appearance: none;
  appearance: none;
  height: 10px;
  width: 100%;
  background: var(--vol-b);
  background: var(--vol-m);
  background: var(--vol-w);
  background: var(--vols);
}
.volume_range::-ms-track {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 10px;
  background: var(--vol-b);
  background: var(--vol-m);
  background: var(--vol-w);
  background: var(--vols);
}
.volume_range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  background: var(--vol-pointer);
  background-size: 99%;
  border: 0px solid #000000;
  background-position: left;
  background-repeat: no-repeat;
  height: 30px;
  width: 25px;
  cursor: grab;
  &:active {
    cursor: grabbing;
  }
}
.volume_range::-moz-range-thumb {
  -moz-appearance: none;
  position: relative;
  background: var(--vol-pointer);
  background-size: 99%;
  border: 0px solid #000000;
  background-position: left;
  background-repeat: no-repeat;
  height: 30px;
  width: 25px;
  cursor: grab;
  &:active {
    cursor: grabbing;
  }
}
.volume_range::-ms-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  background: var(--vol-pointer);
  background-size: 99%;
  border: 0px solid #000000;
  background-position: left;
  background-repeat: no-repeat;
  height: 30px;
  width: 25px;
  cursor: grab;
  &:active {
    cursor: grabbing;
  }
}


::-webkit-scrollbar {
  width: 4px!important;
  height: 4px!important;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}