body {
    display:block;
    font-family: "cooper-black-std", serif;
font-weight: 400;
font-style: normal;
background:linear-gradient(to top, black, transparent), url(https://i.pinimg.com/736x/b7/b6/51/b7b651d0eb60bfe7e8e471ad6b5e9957.jpg);
    background-size:cover;
    background-attachment: fixed;
    font-size:15px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    image-rendering:pixelated;
}

::selection {
    background:greenyellow;
    color:black;
    text-shadow:0px 2px 1px rgba(0, 0, 0, 0.47);
}

/* TWEAKINGS */
h1 {
    margin:0px;
    margin-left:25px;
font-family: "cooper-black-std", serif;
font-weight: 400;
font-style: normal;    color: white;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0 3px #000;
    font-size: 2.4em;
    webkit-background-clip: text;
    transition: all 0.5s;
}

h1:hover {
    webkit-filter: blur(0.5px);
    filter: blur(2px);
}

h2 {
    margin:0px;
    border:1px solid #336927;
    padding:2px;
    border-radius: 10px;
    background: linear-gradient(45deg, #ff9e39, #ffe455);
    margin-bottom:10px;
    box-shadow: 0px 0px 1px 1px #ffffff inset, 2px 2px 0px 1px rgba(51, 105, 39, 0.59);
    text-shadow: 1px 1px rgb(255 255 255/70%);
    text-align: center;
    font-family: "cooper-black-std", serif;
font-weight: 400;
font-style: normal;
}

a {
    text-decoration: none;
}

a:hover {
    font-style: italic;
}

/* LAYOUT */
.structure {
    width:fit-content;
    margin:auto;
    margin-top:11em;
    
}

/* PHOTO SECTION */
.photos-wrapper {
    width:400px;
    z-index: 6;
    position: relative;
    
}

.camera {
    width:485px;
    position: relative;
    filter:drop-shadow(0px 0px 3px black);
    pointer-events:none;
}

.photo-box {
    border:3px inset grey;
    position: absolute;
    z-index: 5;
    width:306px;
    height:230px;
    border-radius:8px;
    transform: translate(35px, -262px);
    background-image: url(https://file.garden/ZAkEYVkUN2HXHCu3/web/images/screeen.png), url(https://i.pinimg.com/736x/a8/4b/3a/a84b3a7f049c4f6c6e957a6dd6f1940b.jpg);
    background-blend-mode: multiply;
    background-size:auto, cover;
    font-weight: bold;
    overflow:hidden;
}

.top {
    border-bottom:1px solid #336927;
    padding:2px;
    display:flex;
   justify-content: space-between;
    background: linear-gradient(45deg, #ff9e39, #ffe455);
    box-shadow: 0px 0px 1px 1px #ffffff inset, 2px 2px 0px 1px rgba(51, 105, 39, 0.59);
    text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
     color:white;
    position:relative;
}

.photos-frame {
    border:none;
    height:210px;
    width:306px;
}

.blink {
    animation:blinking infinite 1s;
}

@keyframes blinking {
    0%,50% {opacity: 100%;}
    51%,100% {opacity: 0%}
    
}

.sidebar {
    border:2px solid black;
    padding:5px;
    background:url(https://i.pinimg.com/736x/17/6e/be/176ebe779b0b680075a1e0d7fd0e1233.jpg);
    border-radius:10px 0 0 10px;
}

.sidebar-wrapper {
    z-index: 5;
    position: absolute;
    transform: translate(-189px,-241px);
}

.inner {
    border:1px solid black;
    padding:5px;
    padding-right:10px;
    border-radius:5px;
    background: linear-gradient(45deg, #ff9e39, #ffe455);
    box-shadow:0px 0px 0px 1px inset white;
}

summary {
    border:1px solid black;
    padding:5px;
    border-radius:10px;
    width:150px;
    list-style: none;
    box-shadow:0px 0px 0px 1px white inset, 0px -2px 4px 3px inset rgba(21, 62, 143, 0.46), 0px 3px 4px 1px white inset, 0px 0px 2px 1px rgba(0, 0, 0, 0.27);
   background-image: url(https://file.garden/ZAkEYVkUN2HXHCu3/web/images/screeen.png), url(https://i.pinimg.com/736x/a8/4b/3a/a84b3a7f049c4f6c6e957a6dd6f1940b.jpg);
    background-blend-mode: multiply;
    text-shadow: 1.5px 1.5px rgb(255 255 255/60%), -1.5px -1.5px rgb(0 0 0/20%);
    display:flex;
    gap:5px;
    font-weight: bold;
}

details {
    margin-bottom:5px;
}

ul {
    padding-left:3px;
    list-style: none;
    margin-top:5px;
    margin-bottom:5px;
}

summary:active {
   border:1px solid blue; 
}

.desc {
    border:1px solid black;
    border-radius:0 0 5px 5px;
    padding:2px;
    width:141px;
    margin:auto;
    border-top:none;
    background:#bef1ff;
    font-family:helvetica;font-size:12px;
    text-shadow: 1px 1px rgb(255 255 255/70%);
}

#musicplayer{
    padding:3px;
    color:white;
    font-family: ms ui gothic;
    font-size:13px;
    width: fit-content;
    position: fixed;
    bottom:5px;
    left:4px;
    z-index:100;
  }

  .player {
  height: fit-content;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  }

  /* Changing the font sizes to suitable ones */
  .now-playing {
  font-size: 15px;
  line-height:18px;
      width:277px;
  }

  .playersettings{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    align-items:center;
    width:100%;
      border:1px solid silver;
      border-radius:5px;
      background:black;
  }
  
  /* Using flex with the row direction to
  align items in a horizontal direction */
  .buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  }
  
  .playpause-track,
  .prev-track,
  .next-track {
  padding: 5px;
  opacity: 0.8;
  
  /* Smoothly transition the opacity */
  transition: opacity .2s;
  }
  
  /* Change the opacity when mouse is hovered */
  .playpause-track:hover,
  .prev-track:hover,
  .next-track:hover {
  opacity: 1.0;
  }
  
  /* Define the slider width so that it scales properly */
  .slider_container {
  width: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
      margin-right:5px;
  }

  .vol-icon{
    float:left;
    margin:0;
    padding:0;
    font-size:12px;
  }
  
  /* Modify the appearance of the slider */
  .seek_slider, .volume_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 5px;
  background: black;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  }
  
  /* Modify the appearance of the slider thumb */
  .seek_slider::-webkit-slider-thumb,
  .volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 2px;
  height:5px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
  }
  
  /* Change the opacity when mouse is hovered */
  .seek_slider:hover,
  .volume_slider:hover {
  opacity: 1.0;
  }
  
  .seek_slider {
  width:80px;
  min-width:80px;
  }
  
  .volume_slider {
  width: 70px;
  max-width:70px;
  float:right;
  }
  
  .current-time,
  .total-duration {
  padding: 0;
      padding-left:5px;
  }

  
  i.fa-volume-up {
  padding: 10px;
  }
  
  /* Change the mouse cursor to a pointer
  when hovered over */
  i.fa-play-circle,
  i.fa-pause-circle,
  i.fa-step-forward,
  i.fa-step-backward {
  cursor: pointer;
  }

i.fas:hover{
  /* cursor:var(); */
}

i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
  color:white; /* color of controls */
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background-color:inherit;
}

input[type=range]:focus {
  outline: none;
}

/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px; /* thickness of seeking track */
  cursor: pointer;
  background: silver; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb {
  height: 5px; /* height of seeking circle */
  width: 2px; /* width of seeking circle */
  background: white; /* color of seeker circle */
  /* cursor: help; */
  -webkit-appearance: none;
  margin-top: 0px;
}

/* settings for firefox browsers */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px; /* thickness of seeking track */
  /* cursor: help; */
  background: white; /* color of seeking track */
}

input[type=range]::-moz-range-thumb {
  height: 5px; /* height of seeking circle */
  width: 2px; /* width of seeking circle */
  background:white; /* color of seeker circle */
  /* cursor: help; */
  border:none;
}

.musicdetails {
    display: flex;
    margin-bottom:3px;
    gap:5px;
    width:178px;
    margin-right:auto;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    font-weight: bold;
    color:black;
}

.fa-volume-low {
    color:white;
}
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=") !important;
  image-rendering: pixelated;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
::-webkit-scrollbar-track:active {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==") !important;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

::-webkit-scrollbar-thumb {
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  z-index: 1;
  background-image: none !important;
}

::-webkit-scrollbar-corner {
  background-color: #cccccc;
}
::-webkit-resizer {
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
  background-position: bottom right;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-button {
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
  display: block;
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-position: center center;
}
::-webkit-scrollbar-button:active,
::-webkit-scrollbar-button:active {
  background-position: 2px 2px;
}
::-webkit-scrollbar-button:horizontal:decrement,
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}
::-webkit-scrollbar-button:horizontal:increment,
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}
::-webkit-scrollbar-button:horizontal:increment:start,
::-webkit-scrollbar-button:horizontal:increment:start {
  display: none;
}
::-webkit-scrollbar-button:horizontal:decrement:end,
::-webkit-scrollbar-button:horizontal:decrement:end {
  display: none;
}
::-webkit-scrollbar-button:vertical:increment:start,
::-webkit-scrollbar-button:vertical:increment:start {
  display: none;
}
::-webkit-scrollbar-button:vertical:decrement:end,
::-webkit-scrollbar-button:vertical:decrement:end {
  display: none;
}
::-webkit-scrollbar-button:active,
::-webkit-scrollbar-button:active {
  border-top: 1px solid #868a8e;
  border-left: 1px solid #868a8e;
  border-bottom: 1px solid #868a8e;
  border-right: 1px solid #868a8e;
  box-shadow: none;
}