/* KTX - kitxchi 2024-2025 */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400&display=swap');
@font-face {
        font-family: matrix;
        src: url(font/tttt.ttf);
}
@font-face {
    font-family: 'popstarpop Regular';
    font-style: normal;
    font-weight: normal;
    src: local('popstarpop Regular'), url('font/POPSTAR_pop.woff') format('woff');
    }
    @font-face {
        font-family: 'Planet Kosmos';
        font-style: normal;
        font-weight: normal;
        src: local('Planet Kosmos'), url('font/PLANK___.woff') format('woff');
        }
@media (max-width: 600px) {
 body{
     width: 95%;
     height: 95%;
     max-width: none;
     max-height: none;
     box-shadow: none;
 }
 .content{
     font-size: smaller;
 }
}
 html{
     overflow: hidden;
     background: url('image/3.gif') no-repeat center center fixed;
     background-size: cover;
     height: 100%;
 }
 body{
     margin: 0;
     width: 90%;
     max-width: 800px;
     height: 90%;
     max-height: 830px;
     background-color: rgba(0, 0, 0, 0.6);
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     box-shadow: 0 0 20px rgba(0, 0, 0, 1);
     border-radius: 13px;
     padding: 20px;
     overflow: auto;
     box-sizing: border-box;
 }
 #specs-0 {
  overflow-y: auto;  /* włącz przewijanie pionowe */
}
 #specs-0::-webkit-scrollbar {
     display: none;
 }
 body::-webkit-scrollbar {
     display: none;
 }
 .content{
     margin-top: 35px;
     text-align: center;
     color: white;
     font-family: "Quicksand", sans-serif;
 }
 h2, h1, h3{
    font-family: 'popstarpop Regular';
    font-style: normal;
    font-weight: normal;
 }
 h4{
    font-family: "Quicksand", sans-serif;
 }
 hr{
     margin-left: 35px;
     margin-right: 35px;
     border: 1px solid white;
 }
 a{
     text-decoration: none;
     color: white;
 }
 a:hover{
     color: rgb(185, 185, 185);
 }
 .specs{
    max-height: 0;
    overflow: hidden;
    transition: max-height 2s ease;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0 10px;
    margin-bottom: 10px;
    margin: 0 auto;
    width: 250px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 1);
  }
  .specs.open{
      margin: 0 auto;
    width: 350px;
    max-height: 1000px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 1);
    margin-top: 10px;
    margin-bottom: 10px;
  } 
  .specs.closing {
  transition: 0.5s ease !important;
  max-height: 0 !important;
  padding: 0 10px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.lastfm-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px; 
  margin: 0 auto;
  text-align: left;
}

.lastfm-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-items: center;
  text-align: center;
}

.cover-image {
  border-radius: 12px;
  height: 140px;
  width: 140px;
}

.perspective-hover {
  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.2s ease, box-shadow 0s ease, filter 0.2s ease;
  position: relative;
  z-index: 1;
}
.perspective-hover:hover {
  transform: perspective(600px) rotateX(5deg) rotateY(-5deg) scale(1.3);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.4);
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.perspective-hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: inherit;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
  z-index: -1;
  pointer-events: none;
}
h1, h2, h3, .home{
    font-weight: bold;
    font-family: 'popstarpop Regular';
    font-style: normal;
    background: repeating-linear-gradient(
      90deg,
      white 0,
      silver 20%,
      gray 40%,
      silver 60%,
      white 80%,
      white 100%
    );
    background-size: 200% 100%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: shine 2.5s linear infinite;
  }
.home {
  display: inline-block;
  transition: all 0.3s ease, transform 0.1s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

  .home:hover {
  filter: brightness(1.8);
  text-shadow:
    0 0 5px white,
    0 0 10px white;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.nav {
  display: inline-block;
  transition: all 0.3s ease, transform 0.1s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

  .nav:hover {
  filter: brightness(1.8);
  color: gray;
  text-shadow:
    0 0 5px white,
    0 0 10px white;
  transform: scale(1.05);
  transition: all 0.3s ease;
}



  @keyframes shine {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 200% 0;
    }

  }

.nav-button{
  padding: 6px 10px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  background: #00000000;
  color: rgb(255, 255, 255);
  cursor: pointer;
  margin-left: 5px;
  transition: 0.2s;
}
.nav-button:hover{
  filter: brightness(1.8);
  color: gray;
  text-shadow:
    0 0 5px white,
    0 0 10px white;
  transform: scale(1.05);
  transition: all 0.3s ease;

}
.input-text{
  padding: 6px 10px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  background: #00000000;
  color: rgb(255, 255, 255);
  width: 180px;
  outline: none;
}
.area-text{
  padding: 6px 10px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  background: #00000000;
  color: rgb(255, 255, 255);
  width: 180px;
  outline: none;
  width: 400px;
  height: 120px;
  font-family: 'Inter';
  font-style: italic;
}