body {
    background-image: url("https://64.media.tumblr.com/031f2486acaf6bbe0d9e73bb3d5e9cca/57b565f7387caaed-c1/s500x750/06e5124bf30bea41ac2401903a4ac4808c9b6cf4.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    font-family: jgs7;
    letter-spacing: -1px;
}

.container {
    position: relative;
    background-color: white;
    max-width: 400px;
    border: 75px solid transparent;

    border-image-source: url("https://64.media.tumblr.com/75d3c56db0b12fcc9cf3daca53025232/7c2183a989eef1cb-1c/s500x750/6e70ec0c288d8bbfa37bb2c3adf39c5e466b1eab.pnj");
    border-image-slice: 40%;
    border-image-repeat: repeat;
    border-image-outset: 10px;
    z-index: 2;
}

.flexbox {
    display: flex;
    gap: 20px;
    align-content: center;
}

.wrapper {
    position: relative;
    height: 500px;
}

#icon {
    transform: scale(1);
    left: 15px;
    align-content: center;
    position: relative;
    height: 500px;
    transition: all .5s ease;
    
}

#iconHover {
    transform: scale(1);
    position: absolute;
    left: 35px;
    top: 0px;
    height: 500px;
    opacity: 0;
    transition: all .5s ease;
}

.wrapper:hover #iconHover {
    opacity: 1;
    transform: scale(105%);
}
.wrapper:hover #icon {
    transform: scale(105%);
}

.header {
    color: black;
    text-indent: 5px;
    letter-spacing: 1px;
    text-shadow: 0px 0px 1px black;
    margin: 0px;
    font-size: 30px;
}

.header {
    color: black;
}

button {
    border-radius: 50px;
    border: 2px solid black;
    background: white;
    color: black;
    width: 100px;
    font-family: jgs7;
    transform: scale(1);
    transition: all .5s ease;
}

button:hover {
    transform: scale(1.1);
}
    
.spin       {
    transform: scale(1);
    max-width: 300px;
    max-height: 300px;
    transition: all 2s ease;
    
}

.spin:hover {
    transform: scale(110%);
    animation: spin .5s ease 2s forwards, spin2 .5s linear infinite;
}

#ribbon {
    width: 505px;
    height: 75px;
    position: relative;
    right: 50px;
    top: 0px;
}

#moth {
    position: absolute;
    height: 175px;
    right: -35%;
    top: -15%;
    z-index: 10;
    transform: rotate(20deg);
}

#moth:hover {
    animation: shake .5s ease .5s;
}

.stamp {
    width: 100px;
    height: 60px;
}

.pixel {
  width: 12px;
  height: 12px;
}

.paragraph {
  line-height: 15px;
  color: white;
    text-align: center
}

.scrollbox {
  width: 300px;
  height: 100px;
  overflow: auto;
  background-color: black;
  border: 30px solid transparent;
  border-image-source: url("https://64.media.tumblr.com/75e87754f27f594f50a4f2bab5778392/a0cb77c7f80402d5-c2/s500x750/f115315c0e460a02d3b54f0ca455c58152c6c609.pnj");
  border-image-slice: 20%;
  border-image-repeat: repeat;
  border-image-outset: 10px;
}

.sideimage {
    height: 175px;
    width: auto;
}

.slider-container {
    height: 60px;
    overflow: hidden;
    position: relative;
    border-width: 7px;
border-style: solid; 
border-image: url("https://i.imgur.com/NJa4bp2.png") 5 fill round;         
    
    
}

.slide-wrapper {
    display: flex;
    animation: slide-animation 9s linear infinite;
}

@font-face {                  
font-family: 'jgs7';
src: url(https://humantooth.neocities.org/fonts/jgs7.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

/*mp3 player*/

/* black theme */

#musicplayer{ 
  font-family: 'basiic';
  font-weight:bold;
  height:30px;
  width:100%;
  left:0;
  top:0;
  position:fixed;
  margin-bottom:20px;  
  display:flex;
    background: linear-gradient(180deg,black 0%, lightgray 45%, black 47%, black 60%, gray 100%);  
  border:ridge 2px gray;/* border around player */
  outline: solid 2px black;  
  box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
  z-index: 100;
    }
    .songtitle{ 
    display:block;
    padding:2px; /* padding around song title */
    font-family: 'pixel';
    margin-top:4px;
    margin-right: 5px; 
    font-size:15px;
    color:black;
    letter-spacing: 1px; 

    background: white;/* background of song title */
    border: gray inset 1px;
       border-radius:6px;
       box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }
 
    .controls{
      font-size:12px; /* size of controls */
      text-align:center;
      width:100px;
      height:20px;
      text-decortation:none;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
 
    .controls td{
       padding-top:5px; /* padding around controls */
    }
 
    .seeking{
      width:75%;
      background: transparent;/* background color of seeking bar */
      display:flex;
      justify-content: space-evenly;
      padding:7px; /* padding around seeking bar */
       
    }
 
    .current-time{  
      padding-right:5px;
      margin-right: 3px; 
     filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
       
    }
 
    .total-duration{
      padding-left:5px;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
  .ctrlimg {
   height:16px;
   width:16px;
   }
    .ctrlimg:hover{
        cursor:help;
    }
    
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
      background: transparent;
    }
    
    input[type=range]:focus {
        outline: none;
    }
    
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px; /* thickness of seeking track */
        cursor: help;
        border-radius: 6px;
        background: black; /* color of seeking track */
        border: 1px white solid;
    }

    input[type=range]::-webkit-slider-thumb {
      
        height: 30px; /* height of seeking square */
        width: 20px; /* width of seeking square */
        background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of  seeking square */
        background-size: 25px;
        -webkit-appearance: none;
        margin-top: -10px;
        
    }
    
input[type=range].volume_slider::-webkit-slider-runnable-track { 
    background: white; /* color of volume seeking track */
     filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
    }
    
 input[type=range].volume_slider::-webkit-slider-thumb {
    background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
    background-size: 20px;
    height: 20px; /* height of volume seeking square */
    width: 20px; 
    margin-top: -8px;
   }
 
 
.slider_container {  
  width: 15%;       /* width of volume seeker */
  display: flex;
  justify-content: center;
  align-items: center;
}    




/*animations*/

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

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

@keyframes shake {
  0% { transform: rotate(20deg); }
  10% { transform: rotate(19deg); }
  20% { transform: rotate(21deg); }
  30% { transform: rotate(20deg); }
  40% { transform: rotate(21deg); }
  50% { transform: rotate(19deg); }
  60% { transform: rotate(20deg); }
  70% { transform: rotate(19deg); }
  80% { transform: rotate(21deg); }
  90% { transform: rotate(20deg); }
  100% { transform: rotate(19deg); }
}

@keyframes moveup {
    from { transform: translateY(-30px) translateX(200px); }
    to { transform: translateY(-50px) translateX(200px)}
}

@keyframes slide-animation {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-200%);
  }