body {
  margin: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Outfit;
  background-image: url(https://file.garden/ak4Lsom5_36Y9AmB/asadal_stock_185.jpg);
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  cursor: url('data:image/x-icon;base64,AAACAAEAICAAAAAAAACoDAAAFgAAACgAAAAgAAAAQAAAAAEAGAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC/nmq/nmqji2ymj3KnkHankHankHWmj3KkjW+giGi/nmoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC/nmrl1rDx6cz08dz8+ez9/fn//v3//fj7+ev08N3r48fj06+mdU+mdU8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC/nmr75Kv56Lv168z18Nr39OT6+PD+/Pb8+fD59OX18Nv068z46L3+6ra/nmqmdU8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC/nmr33Jr32pn24K7z58Pz79b38uL49uv6+e359+r38uL179f06MT44a/425343qHp1aSmdU8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmdU/06Mjy1Y722ZP436j05bvy68328Nz48eH58uP48uH18Nvz68705b3336j22pfz15r79eDhzaG/nmoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmdU/p3Lj058bw0I321oz43Zz14a705r7z68z07db079f07tX06s305sD24rH23J72147x15v07tbw3bS/nmoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABHo2Jbs3pqtIKZkmXp1KT06snrzZH00IL42ZH43Z/34K315Lj058D06MP05sH15Lr24a/43aL22ZHz0YTu1p/37cvny5S/nmoAAAAAAAAAAAAAAAAAAAAAAAAAAABHpWNuzaGQ3MK87+O+vKTjwYH56b3pzZnsxHr00IP42JD525v33qT24Kr24a334Kv43qX33J332JL10YTtx33w2KL76bbSrmy/nmoAAAAAAAAAAAAAAAAAAAAAAABgrnZi0Zxm0KKG2r6r5te50L/IpGb83JTt0JLjt3Tswnnzz4H21Yn32JD32ZX42pf32ZX42JH21Yvz0ILsxHrpwH3z0Y762ZC0kFgAAAAAAAAAAAAAAAAAAAAAAABSs3mH1bBdyZJUyJF21a2Q38Wc3culo3jvxXryzoXdrG7fr3HnvHfsxXryzn/10ob104nz0YbxzX/txnnovXjgsXLitHL10YXYrGTKjVYAAAAAAAAAAAAAAAAAAAAAAABSs3lvyp5cyYlEwn5aypdx0qp72bd4t5G1l2D75bDbr3jSmWLdrW/vy4P22pj236r04rH136v22JfvyYLdrW/TmmbkvYfz1JmmdU8AAAAAAAAAAAAAAAAAAAAAAAAAAABRpVRGsW1Nv29CumJGwXpOxopXyZJVyZNcmV68n27v3LvHjmDnu3j52pP34a306Mbz7NHz58X34az63ZXjtnPPm3Hp1K6mdU8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABIk0dTxHlGpzhFt1tHwXxWyJBVx49FwntWiziqlWbEmHDVnmn73Zr24rD06sr4893168v34q/42JbQm2W9km2mdU8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABOnFBRojtCtFpfz6GG27yE2btez59Br0xonUeOflGocU7Qmmb12p305rz07M305rrx1JjHkmCmdU+mdU8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQiDk9kTBdxYuM28CJ2r5bwII5iyVWhz8AAACTbEG2lWz058b59uX6+O759eDlz6iTbEEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABTfj1wvou87d+y6dhYpmd2kF0AAAAAAAB4Z0j157v07tH29eb8+vH48+H589Tn06EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABSs3mG3sK26tqt59d41bJgq3MAAACmdU/oy4r24Kr05sD17tf38t/17dLz4bj75a3IpGQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABRpVRAwXhizZ581rN2069dzZo2r15nlVeKaDzuy3353Jr34a/15b7058Pz47n03Kj22ZXxyn3KjVYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABRpVRAuVZIwn5XyJNVx5BGwHc5q0NcjT6wfEvuxHr21Ij42pf33aL03KT12p/215Tyz4Ptw3jKjVYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACTbEGTbEEAAAAAAAA2mR9YyY51069x061PwXAzixOmdU+meErjs3Lqwnn10Yf42JL32Jb21pDwzYDov3fgsG/KjVYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACTbEGTbEGTbEEAAAAAAABRpVRpvoHL9u257t5RpVQAAAAAAACmdU/Pl1/pv37325z24Kz24bL44Kn005LgsHTKjVYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACjaEXqwnjTrXiTbEEAAAAAAABdfEldfkpZe0UAAAAAAAAAAAAAAACwd0jvyZD047by7NP079v268z44q7hsXymdU8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC7i1Px16D9+vKXYTYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC3hVjo1K/x7uL19Oz07tvkx52mdU8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADrxX79+vLJp3sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC8noW+oYuwiGgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD04LP9+vIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////////////////////////////////8AH//+AAf//AAD//gAAf/wAAD/4AAA/wAAAP4AAAD8AAAB+AAAAfgAAAP4AAAH/AAAD/4AAB//AIB//4GAf/+BAD//AAAf/wAAH/mAAB/xgwA/8MeAP/D/wH/x//H/8/////f////w=='), auto;
}

a {
  width: 100%;
  height: auto;
}

#graphic {
  height: auto;
  width: 95%;
  border-radius: 5px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  border: 2px solid;
  box-shadow: inset 0px 0px 10px;
  transition: transform .3s ease;
}

#graphic:hover {
  transform: scale(1.02);
}

button {
  height: auto;
  background-image: linear-gradient(to bottom, white, #E3E3E3, #EEEEEE);
  border-radius: 5px;
  border: 1px solid;
  font-family: Outfit;
  transition: transform .3s ease;
}

.dtags {
  background-color: #FFD166;
  border-radius: 5px;
  height: auto;
  width: auto;
  padding: 5px;
}

.head1 {
  text-align: center;
  font-weight: bolder;
  font-size: 30px;
  line-height: 5px;
}

.head2 {
  font-size: 20px;
  font-weight: bolder;
  line-height: 5px;
  text-align: center;
  
}

.importanttags {
  font-size: 15px;
  height: auto;
  background-image: linear-gradient(to bottom, white, #EEEEEE);
  border-radius: 5px;
  border: 1px solid;
}

.tags {
  font-size: 15px;
  height: auto;
  background-image: linear-gradient(to bottom, white, #EEEEEE);
  border-radius: 5px;
  border: 1px solid;
}

.readhere {
  font-size: 20px;
  height: auto;
  width: auto;
  
}

#readherehl {
  align-items: center;
  justify-content: center;
  width: 150px;
  height: auto;
}

.scrollbox2 {
  overflow: auto;
  box-sizing: border-box;
  border-width: 7px;
border-style: solid; 
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
  padding: 10px;
  height: 100px;
  background-image: linear-gradient(to bottom, white, #E3E3E3);
}

.ultcon {
  background-image: linear-gradient(to bottom, white, #F2F2F2);
  border: 2px solid;
  border-radius: 2px;
  box-sizing: content-box;
  width: 750px;
  height: auto;
  overflow: hidden;
   box-shadow: 0px 0px 20px;
}

    ::-webkit-scrollbar {
      width: 16px;
    }

    ::-webkit-scrollbar:horizontal {
      height: 17px;
    }

    ::-webkit-scrollbar-corner {
      background: #eee;
    }

    ::-webkit-scrollbar-track:vertical {
      background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
    }

    ::-webkit-scrollbar-track:horizontal {
      background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
    }

    ::-webkit-scrollbar-thumb {
      border: 1.5px solid #888;
      border-radius: 3px;
      box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
      background-color: #eee;
    }

    ::-webkit-scrollbar-thumb:vertical {
      background: url("https://i.imgur.com/bfyvjnx.png") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
    }

    ::-webkit-scrollbar-thumb:horizontal {
      background: url("https://i.imgur.com/tqe4SxM.png") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
    }

    ::-webkit-scrollbar-button:horizontal:end:increment,
    ::-webkit-scrollbar-button:horizontal:start:decrement,
    ::-webkit-scrollbar-button:vertical:end:increment,
    ::-webkit-scrollbar-button:vertical:start:decrement {
      display: block;
    }

    ::-webkit-scrollbar-button:vertical {
      height: 17px;
    }

    ::-webkit-scrollbar-button:vertical:start:decrement {
      background: white;
      background-image: url("https://i.imgur.com/EFnEMEb.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    ::-webkit-scrollbar-button:vertical:start:increment {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:end:decrement {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:end:increment {
      background: white;
      background-image: url("https://i.imgur.com/xuIt6Lc.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

#chatbox {
  background-image: linear-gradient(to bottom, white, #5ED1FF);
  border: 2px solid;
  border-radius: 3px;
}

.header {
  background-image: linear-gradient(to bottom, white, #5ED1FF) ;
  border-radius: 5px;
  border: 2px solid;
  box-shadow: 0px 0px 5px #959595;
  overflow: hidden;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px;
  justify-content: center;
  align-items: flex-end;
}

.tab-btn {
  width: auto;
  height: 25px;
  font-size: 15px;
  box-sizing: content-box;
  transition: .3s ease;
}

.tab-btn:hover {
  transform: scale(1.1);
}

.tab-content {
  display: none;
  height: auto;
  width: 100%;
}

.tab-content.active {
    display: flex;
}

.character-content {
  display: none;
}

.character-content.active {
  display: block;
}

.main {
  height: 100%;
  width: 65%;
  border-radius: 5px;
  border: 2px solid;
  background-image: linear-gradient(to bottom, white, #FFF173);
  overflow: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 15px;
  position: relative;
}

.maincon {
  height: 50%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 5px;
  border: 2px solid;
  background-image: linear-gradient(to bottom, white, #AFE5FF);
  box-sizing: border-box;
  padding: 10px;
  z-index: 2;
}

.subcon {
  height: 300px;
  width: 70%;
  overflow-y: auto;
  overflow-x: hidden;
  
  border-radius: 5px;
  border: 2px solid;
  background-image: linear-gradient(to bottom, white, #AFE5FF);
  box-sizing: border-box;
  padding: 10px;
  z-index: 2;
}

#chudzilla {
  width: 32%;
  height: auto;
  position: absolute;
  inset-block-start: 270px;
  inset-inline-start: 7.5px;
  z-index: 3;
}
.sidebar {
  height: 100%;
  width: 35%;
  background-image: linear-gradient(to bottom, white, greenyellow);
  border-radius: 5px;
  border: 2px solid;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  overflow-y: auto;
  overflow-x: hidden;
}

.dropbtn {
  width: 100%;
  height: auto;
  font-size: 16px;
  cursor: pointer;
  z-index: 11;
}

.sbbtn {
  width: 100%;
  height: auto;
  font-size: 16px;
  cursor: pointer;
  z-index: 11;
  padding: 12px, 16px;
}

.dropdown {
    position: relative;
    width: 100%;
}

.dropdown-content {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border: 1px, solid;
    position: relative;
    width: 100%;
    box-sizing: border-box;

    background-color: #f9f9f9;

    height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
        height 0.25s ease,
        opacity 0.2s ease,
        transform 0.25s ease,
        visibility 0.25s;
}

.dropdown-content.show {
    height: 207px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-content a {
  background-image: linear-gradient(to bottom, white, #EEEEEE);
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    cursor: pointer;
}

.icon {
  width: 8%;
}

.scrollbox {
  box-sizing: border-box;
  padding: 10px;
  height: 50%;
  width: 25%;
  background-image: linear-gradient(to bottom, white, greenyellow);
  border-radius: 5px;
  border: 2px solid;
  overflow-y: auto;
  overflow-x: hidden;
}

.cbtn {
  width: 100%;
  height: 25px;
  transition: transform .3s ease;
  margin-top: 5px;
}

cbtn:hover {
  transform: scale(1.1);
}

.contentplace {
  width: 75%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  background-color: violet;
}

.work {
  width: 100%;
  height: auto;
  border-radius: 5px;
  border: 2px solid;
  background-image: linear-gradient(to bottom, white, #FFF173);
  box-sizing: border-box;
  padding: 10px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.works {
  width: auto;
  height: 750px;
  border-radius: 5px;
  border: 2px solid;
  background-image: linear-gradient(to bottom, white, yellowgreen);
  box-sizing: border-box;
  padding: 10px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.footer {
  
  width: 100%;
  height: auto;
  background-image: linear-gradient(to bottom, white, #5ED1FF) ;
  box-shadow: 0px 0px 5px #959595;
  padding: 5px;
  min-height: 40px;
  border-top: 2px solid;
  overflow: auto;
  
}

.window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    height: 35px;

    padding: 5px 8px;
    box-sizing: border-box;

    background-image: linear-gradient(to bottom, white, #4EBBFF, #5ED1FF);
    border-bottom: 2px solid black;
}

.window-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.window-title img {
    width: 22px;
    height: 22px;
    object-fit: cover;
}

.window-buttons {
    display: flex;
    gap: 4px;
}

.window-buttons button {
    width: 22px;
    height: 22px;

    padding: 0;
    background-color: white;
    border: 1px solid black;

    cursor: pointer;
}

.lines {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;
    z-index: 300;

    opacity: 0.05;
}

.lines::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    pointer-events: none;

    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.5) 51%
    );

    background-size: 100% 4px;

    animation: scanlines .5s linear infinite;
  animation-timing-function: steps(3, end);
}

@keyframes scanlines {
    from {
        background-position: 0 0;
    }
  
    to {
        background-position: 0 16px;
    }
}

@media only screen and (max-width: 600px) {
}

.photo {
  width: 250px;
  height: 300px;
  
}

.contentplace.reika {
  background-image: linear-gradient(to bottom, #E0F1FF, #B566FF);
  background-clip: padding-box;
  border: 35px solid transparent;
  border-image-source: url("https://file.garden/ak4Lsom5_36Y9AmB/Untitled12_20260919004700.png");
  border-image-slice: 29%;
  border-image-repeat: repeat;
  overflow: auto;
}

.contentplace.sofia {
  background-image: linear-gradient(to bottom, white, pink);
  background-clip: padding-box;
  border: 35px solid transparent;
  border-image-source: url("https://file.garden/ak4Lsom5_36Y9AmB/Untitled12_20260919005009.png");
  border-image-slice: 29%;
  border-image-repeat: repeat;
  overflow: auto;
}

.contentplace.etienne {
  background-image: linear-gradient(to bottom, white, lightblue);
  border: 5px solid steelblue;
}

.contentplace.roman {
  background-image: linear-gradient(to bottom, white, lavender);
  border: 5px solid purple;
}

.contentplace.charles {
  background-image: linear-gradient(to bottom, white, lightgreen);
  border: 5px solid green;
}

#reikainfocon {
  display: flex;
  width: 70%;
  height: auto;
  text-align: center;
  justify-content: center;
  
border-width:10px;
border-style:solid;
border-image: url("https://dl.dropbox.com/s/l61yvavjx2e501e/image.png") 5 fill round;
  
}

#reikageninfo {
  
       border-width:10px;
border-style:solid;
border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 7 fill round;         
    overflow: auto;
  height: 200px;
  width: auto;
}

.sb input {
  width: 100px;
  height: auto;
  background-image: linear-gradient(to bottom, #EEEEEE, white);
  border radius: 5px;
  border: 1px solid;
}

#sbtn {
  height: auto;
  background-image: linear-gradient(to bottom, white, #CCCCCC, #EEEEEE);
  border-radius: 5px;
  border: 1px solid;
}

#simg {
  height: 10px;
  vertical-align: center;
  filter: brightness(0);
}

.textslider {
  height: 50px;
  width: 100%;
  background-image: linear-gradient(to bottom, white, #E3E3E3, #EEEEEE);
  border-radius: 5px;
  border: 2px solid;
  overflow: hidden;
  padding-bottom: 20px;
  box-sizing: border-box;
}

.cooltxt {
  animation: slideloop 9s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes slideloop {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

.stampslider {
  width: 30%;
  height: 290px;
  border-width:7px;
border-style:solid;
border-image: url("https://foollovers.com/mat/baf/food/fo32-008-a.gif") 7 fill round;   
    flex-shrink: 0;
  overflow: hidden;
}
@keyframes slideloop2 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-367%);
  }
}

.slidingtime {
  animation: slideloop2 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


.stamp {
  width: 100%;
  height: auto;
}

.gallery {
  padding: 0 0 4rem 0;
    border-radius: 5px;
  border: 5px solid;
  background-image: linear-gradient(to bottom, white, #FFF173);
  box-sizing: border-box;
  
}

.img-container {
  width: auto;
  height: 300px;
  cursor: pointer;
  &:hover .img-content-hover {
    display: block;
  }
}

.img {
	width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
	object-fit: cover;
  transform: scale(1);
  transition: all 0.3s ease-in-out;
  border: 5px solid;
  &:hover {
    transform: scale(1.05);
  }
}

.img-content-hover {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  display: none;
  padding: 1rem;
  background: $white;
  font-weight: 400;
  margin-top: 1.25rem;
  margin-left: -2rem;
}

.title {
  color: $black;
  font-size: 1.5rem;
  font-weight: 700;
}

.category {
  font-size: 1rem;
  color: $gray;
}

.img-content {
  display: none;
}

.social, .copyright {
  margin: 1rem;
}

.social li {
  display: inline-block;
}

footer {
  padding: 1rem 0;
  background: $footer;
  text-align: center;
}

@supports (display: grid) {
  .gallery .grid {
    grid-gap: 1rem;
  }
}

@media(min-width: $md) {
  nav ul {
    justify-content: flex-end;
  }
}

@media screen and (max-width: 1024px) {
  img:hover {
    transform: none;
  }
  
  .img-container {
    height: 100%;
    &:hover .img-content-hover {
      display: none;
    }
  }

  .img-content {
    display: block;
    padding: 1rem 0;
  }
}

        /* blue 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,#77BBFF 0%,  #f0f5ff  45%, #3885d2 47%, #59a3ec 60%, #77BBFF 100%);
         border:ridge 2px #77BBFF;/* border around player */
          outline: solid 2px black;  
         box-shadow: inset 10px 0px 6px -10px #3885d2, inset -13px 0px 6px -10px #3885d2, inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px #3885d2;
          z-index: 99999
            }
         
            .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;
        }    
        
        
        
        
/*wrappers*/

.wrapper {
  display: flex;
  align-items: stretch;
  height: 670px;
  width: 100%;
  gap: 10px;
}

.wrapper3 {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;}
}

.wrapper2 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  width: 100%;
}

.ultwrapper {
  display: flex;
  gap: 10px;
  flex-direction: column;
  padding: 20px;
}

.wrapper4 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.wrapper5 {
  justify-content: left;
  display: flex;
  flex-direction: row;
  gap: 2.5%;
  width: 100%;
  height: auto;
}