/* Background with image and dark overlay */
    body {
        background-image: url("https://files.catbox.moe/hfh2u2.PNG");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        font-family: 'Tahoma', Segoe UI, Geneva, Verdana, sans-serif;
        z-index: -2;
        animation:none;
        overflow:hidden;
    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        z-index: -1;
        pointer-events: none; /*background*/
    }

    body > * {
        animation: fadeIn 2s ease-in;
        position: relative;
        z-index: 1; /* Keep elements on top of the background */
    }

    /* realer than a computer screen text */
    .content-box {
        background-color: rgba(255, 255, 255, 0.0);
        border: 1px solid #ccc;
        padding: 20px;
        border-radius: 10px;
        z-index: 4;
        position: absolute;
        top: 1500px;
    }
    
    
    /*fade-in animation */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .animated {
        animation: fadeIn 2s ease-in;
    }

    /* Image with glow effect */
    .kep img {
        width: 1800px;
        height: 1500px;
        z-index: 3;
        left: 50px;
        position: absolute;
        display:inline-block;
        filter:drop-shadow(0 0 30px #080a08);
    }    
      
     .kep::before { /*a feher glow*/
        content:"";
        z-index:10;
        position:fixed;
        top:0;
        left:0;
        width:100vw;
        height:100vh;
        filter: brightness(1);
        pointer-events:none;
     }
    

    .kep {/* en NEM tuodm ez mit cisnal */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3; 
    }
    
    .transbox-glow { /* vagy a fekte glow vagy feher de sztem fekete ideka*/
      background: rgba(255, 255, 255, 0);
      padding:20px;
      border-radius:15px;
      box-shadow: 0 0 50px 10px rgba(221, 222, 237, 0.8);
      z-index:10;
      position:relative;
      top:150px;
      left:520px;
      width:734px;
      height:520px;
      pointer-events:none;
    }
    
    .screencontainer {
      width:790px;
      height:580px;
      background: #34414a url("https://files.catbox.moe/cns7kl.PNG") no-repeat center center;
      background-size:cover;
      position:absolute;
      top:138px;
      left:520px;
      z-index:1;
    }
    
    
    .wires-right {
      position:fixed;
      top:0;
      right:0;
      z-index:9999;
      pointer-events:none;
      display:flex;
      justify-content:flex-end;
      width:800px;
      height:1000px;
      animation:none;
    }
    
    .wires-right img {
      height:auto;
      max-width:100%;
      display:block;
    }
    
    .wires-left {
      position:fixed;
      top:0;
      left:-10px;
      z-index:9998;
      pointer-events:none;
      display:flex;
      justify-content:flex-end;
      width:550px;
      height:900px;
      animation:none;
    }
    
    .wires-left img {
      height:auto;
      max-width:100%;
      display:block;
    }
    
    .background-popup { /*az egesz popup*/
      top:20%;
      left:50%;
      transform:translateX(-50%);
      position:fixed;
      z-index:20;
      width:900px;
      height:1500px;
    }
    
    .window-body { /* a feher resze a popupnak avagy BODY*/
      max-height:600px; /* CHNAGE WITH PFP CONTAINER SIZE?*/
      overflow-y:auto;
      position:relative;
      background: url("https://files.catbox.moe/jy7kwy.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    
    .profile-container { /* egy atlatszo container ami segit hohy hova helyezd a doglokat benne*/
      background-color:rgba(0, 0, 0, 0); /*FOR DEBUG*/
      max-width:99%;
      height:900px;
      position:relative;
    }
    
    .goldie-pagedoll {
      position:absolute;
      left:0px;
      bottom:0px;
      width:auto;
      height:auto;
      z-index:15;
      pointer-events:none;
    }
    
    .goldie-pagedoll img {
      width:300px;
      height:auto;
      display:block;
    } 
    
    .has-scrollbar {
      max-height:600px;
      overflow-y:auto;
    }
    
    .about {
      position:relative;
      width: 99%;
      height: 230px;
      background:url("https://files.catbox.moe/0cmytt.PNG");
      background-origin: border-box;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      top:0;
      left: 0;
      border-width: 10px;
      border-style: solid;
      border-image: url("https://dl.dropbox.com/scl/fi/6wo0voidugxmgg0a81v20/lace-border-png-37013.png?rlkey=3hn4k762e8y0v6d2v6mwrtcbr&st=5o8bpex4") 60 round;
      padding-left: 210px;
      overflow-y: auto;
      overflow-x: hidden;
      box-sizing: border-box;
    }
    
    .rajzcircle {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 21;
    }
    
    .rajzcircle img {
      width:210px;
      height: auto;
    }
    
    .about p {
      font-size: 20px;
      text-align: center;
      margin: 12px;
      text-shadow: 5px 5px 10px rbga(255, 255, 255, 0.5);
    }
    
    .marq {
      border: 1px solid black;
      background: linear-gradient( #5b5c5b, #919191 40%, #5b5c5b);
      color: white;
      margin: auto;
      border-radius: 5px;
      width: 98%;
      height:60px;
      position:relative;
      margin-top: 5px;
      padding: 5px;
      gap: 5px;
      align-items: center;
      overflow: hidden;
    }
    
    marquee {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
    }
    
    .stamp {
      width: 99px;
      height:56px;
      vertical-align: middle;
      margin: 0 5px;
    }
    
    .likes {
      border: 1px solid black;
      background:linear-gradient( #5b5c5b, #919191 40%, #5b5c5b);
      color: white;
      border-radius: 5px;
      margin-top: 5px;
      position: relative;
      width: 350px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: auto;
      margin-right: 1px;
    }
    
    .likes p {
      font-size: 20px;
      color: #d4d4d4;
    }
    
    .likebox {
      border: 1px solid black;
      border-radius: 5px;
      background: url("https://files.catbox.moe/wnynah.PNG");
      width:350px;
      height: 400px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin-left: auto;
      margin-right: 1px;
      overflow-y:auto;
      overflow-x: hidden;
      flex-direction: column;
    }
    
    .sjsmshadow, .laceysshadow, .zenoshadow, .ssshadow, .sotnshadow, .submissionshadow, .imscaredshadow, .tfmshadow, .wacashadow {
      position: absolute;
      top: 0;
      left: 0;
      text-shadow: 5px 5px 10px rgba(255, 255, 255, 0.5);
      color: rgba(255, 255, 255, 0);
      z-index: 0;
      font-size: 20px;
    }
    
    .sjsm, .laceys, .zeno, .ss, .sotn, .submission, .imscared, .tfm, .waca {
      font-weight: bold;
      background: linear-gradient(#0d0d0d, #3d3d3d 40%, #0d0d0d);
      -webkit-background-clip: text;
      -webkit-text-fill-color:transparent;
      font-size:20px;
      z-index: 1;
    }
    
    .sjsmdesc, .laceysdesc, .zenodesc, .ssdesc, .sotndesc, .submissiondesc, .imscareddesc, .tfmdesc, .wacadesc {
      font-size:15px;
      color: black;
      z-index: 1;
    }
    
    .titlewrapper {
      position: relative;
      display: inline-block;
    }
    
    .kepbox {
      background: url("https://files.catbox.moe/cnowdp.jpg");
      border: 1px solid black;
      border-radius: 1px;
      width: 100px;
      height: 450px;
      position: relative;
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 5px;
      margin-bottom: auto;
    }
    
    .kozepsosor {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      gap: 5px;
    }
    
    .likegroup {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    
        .about::-webkit-scrollbar, .likebox::-webkit-scrollbar, #winbody2::-webkit-scrollbar {
        width: 8px;
        }

        .about::-webkit-scrollbar, .likebox::-webkit-scrollbar-track, #winbody2::-webkit-scrollbar-track {
        background-color: rgba(228, 228, 228, 0.3);
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        }

        .about::-webkit-scrollbar, .likebox::-webkit-scrollbar-thumb, #winbody2::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: rgba(228, 228, 228, 0.7);
        border: 1px solid #aaa;
        }
        
        
    ::-moz-selection { /* Code for Firefox */
  color: white;
  background: black;
}

::selection {
  color: #ffffff;
  background:#000000;
}
                                                /*MP3*/

#cont {
display:flex;
flex-direction: row;
align-items: center;
margin-left:1px;
margin-right:auto;
width:380px;
height: 115px;
border:1px solid black;
background: linear-gradient( #5b5c5b, #919191 40%, #5b5c5b);
border-radius:5%;
margin-top: 5px;
padding: 2px;
gap: 10px;
}
  
/* Using flex with the column direction to
   align items in a vertical direction */
.player {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  height: 100%;
}
  
.details {
  color:white;
  text-shadow:1px 0px black, -1px 0px black, 0px 1px black, 0px -1px black;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  justify-content: space-between;
  width: 100%;
}


.text {
  color: white;
  font-size: 1.5em;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}
  
.track-art {
  height: 80px;
  width: 80px;
  object-fit: cover;
  border-radius: 4%;
  border:1px solid black;
}

/* Changing the font sizes to suitable ones */
.now-playing {
  font-size: 1rem;
}.track-name {
  font-size: 1rem;
  margin:0;
}.track-artist {
  font-size: 1rem;
  margin: 0;
}.buttons {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
}.playpause-track,
.prev-track,
.next-track {
  padding: 12px;
  opacity: 0.8;
  font-size: 28px;
  color:#3d3d3d;
  margin-left: 5px;
  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 {
  align-items: center;
  display: flex;
  gap: 3px;
  margin-top: 2px;
}/* Modify the appearance of the slider */
.seek_slider, .volume_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 5px;
  background: #666465;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  flex-grow: 1;
}/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  background-image: url("https://xyz.crd.co/assets/images/gallery21/02e87878.gif?v=da780c6a")
}.volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  background-image: url("https://xyz.crd.co/assets/images/gallery21/6e61105b.gif?v=da780c6a")
}/* Change the opacity when mouse is hovered */
.seek_slider:hover,
.volume_slider:hover {
  opacity: 1.0;
}.seek_slider {
  height: 3px;
  flex: 3;
}.volume_slider {
  height: 3px;
  flex: 1;
}.current-time,
.total-duration {
  padding: 0 5px;
}i.fa-volume-down,
i.fa-volume-up {
  padding: 5px;
  color:white;
  text-shadow:1px 0px #666465, -1px 0px #666465, 0px -1px #666465, 0px 1px #666465;
  transition:all .4s ease;
}i.fa-volume-down:hover,
i.fa-volume-up:hover {
  padding: 10px;
  color:#666465;
  text-shadow:none;
  transition:all .4s ease;
}/* 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;
}.wah {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3em;
  margin:0;
  width: 100%;
}.player-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-grow: 1;
}
 /*wellend*/
    
    .contwrapper {
      display: flex;
      flex-direction: column;
    }
    
    .gombok {
      left: 1px;
      top: 5px;
      gap: 5px;
      display: flex;
      flex-direction: row;
      position: relative;
    }
    
    .gombok2{
      left: 1px;
      margin-top: 10px;
      gap:5px;
      display: flex;
      flex-direction: row;
      position: relative;
    }
    
    .gomb1, .gomb2, .gomb3 {
      left: 0;
      width: 190px;
      height: 50px;
      background: linear-gradient( #5b5c5b, #919191 40%, #5b5c5b);
      border: 1px solid black;
      position: relative;
      border-radius: 5px;
      cursor: pointer;
    }
    
    .gomb1 p, .gomb2, .gomb3 p {
      font-size: 25px;
      color: #ededed;
      text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
      margin: auto;
      margin-top: 5px;
      text-align: center;
    }
    
    .quote {
      display: flex;
      flex-direction: row;
      top: 5px;
      left: 1px;
      width: 99%;
      height: 25px;
      position: relative;
      background: linear-gradient( #5b5c5b, #919191 40%, #5b5c5b);
      border: 1px solid black;
      border-radius: 5px;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    
    .quote p {
      font-size: 15px;
      color: #ededed;
      text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
      white-space: nowrap;
      animation: marquee 80s linear infinite;
      margin: 5px;
    }
    
    @keyframes marquee {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
    
    .tfmkep1 img {
      width: 15%;
      max-height: 100px;
      max-width: 100px;
      position: relative;
      top: 10px;
      margin: 0;
      display: block;
      flex-shrink: 0;
    }
    
    .tfmkep1 {
      display: flex;
      align-items: center;
      position: relative;
      flex-direction: row;
      gap: 5px;
      justify-content: center;
    }
    
    .tfmkep1 p {
      margin: 0;
      display: flex;
      align-items: center;
    }
    
    .twincont, .encont {
      margin-right: 5px;
      color: white;
      padding: 0 5px;
    }
    
    .popup-wrapper {
      display: none;
      z-index: 100;
      position: absolute;
      background: transparent;
    }
    
    .replacewind {
      height: auto;
      position: relative;
    }
    
    #popup1 {
      left: 50px;
      top: 400px;
    }
    
    #popup2 {
      right: 100px;
      top: 400px;
    }
    
    #popup5{
      left: 50px;
      top: 600px;
    }
    
    #winbody2 {
      max-height:100px;
      width: 250px;
      background: url("https://files.catbox.moe/0ouxdi.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 15px;
    }
    
    .gomboc1, .gomboc2 {
      left: 0;
      width: 100px;
      height: 50px;
      background: linear-gradient( #5b5c5b, #919191 40%, #5b5c5b);
      border: 1px solid black;
      position: relative;
      border-radius: 5px;
      cursor: pointer;
    }
    
    .gomboc1 p, .gomboc2p {
      font-size: 25px;
      color: #ededed;
      text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
      margin: auto;
      margin-top: 5px;
      text-align: center;
    }
    
    .gombsh1{
      left: 0;
      width: 120px;
      height: 50px;
      background: linear-gradient( #5b5c5b, #919191 40%, #5b5c5b);
      border: 1px solid black;
      position: relative;
      border-radius: 5px;
      cursor: pointer;
    }
    
    .gombsh1 p{
      font-size: 25px;
      color: #ededed;
      text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
      margin: auto;
      margin-top: 5px;
      text-align: center;
    }
    
    .gombocok {
      display: flex;
      flex-direction: row;
      gap: 10px;
    }
    
    .gombok2{
      display: flex;
      flex-direction: row;
      gap: 10px;
    }
    
    #winbody5{
      height: 100px;
      width: 200px;
      background-image:url('https://files.catbox.moe/g77mym.jpg');
    }
    
    .octextgombalatt p {
      font-size: 15px;
      color: white;
      text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
      margin: auto;
    }
    
    .salvaged {
      display: flex;
      justify-content: flex-end;
      height: 31px;
      width: 88px;
    }
    
    .salvaged img {
      width:100%;
      height: 100%;
      object-fit: contain;
    }
    
    .status{
      margin-top: 10px;
    }