body {
  background-color: black;
  color: white;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

.container {
  font-size: 60px;
  position: absolute;
  top: 10%;
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

h1 {
  font-size:40px;
  margin-bottom: 10px;
  animation: color 10s  infinite;
}
@keyframes color {
  0%{
    color: white;
  }
  30%{
    color: rgb(255, 255, 223);
  }
  55%{
    color: rgb(255, 210, 210);
  }
  80%{
    color: rgb(209, 255, 209);
  }
  100%{
    color: white;
  }
}

p {
  font-size: 18px;
  line-height: 1.6;
  animation: color 10s  infinite;
}

.adsense-container {
  margin: 30px 0;
}

.adsense-container iframe {
  max-width: 100%;
  margin: 20px 0;
}

footer {
  margin-top: 40px;
  font-size: 14px;
}

/* Style for mobile devices */
@media (max-width: 600px) {
  h1 {
      font-size: 28px;
  }

  p {
      font-size: 16px;
  }
}
#flow{
  filter: blur(30px);
  align-items: center;
  overflow: hidden;
  height: 30%;
  width: 20%;
  position: absolute;
  top: 30%;
  left: 125px;
  animation-name: flows;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}
#bg{
  position: absolute;
  top: 10%;
  left: 18px;
  background: solid;
  background-color: rgba(71, 71, 71, 0.315);
  padding: 260px 46%;
  border-radius: 40px;
  backdrop-filter: blur(30px);
  border: solid rgba(78, 78, 78, 0.596) 1px ;
}
@keyframes flows {
  0%{
    top: 30%;
    left: 125px;
    height: 30%;
    width: 20%;
  }
  30%{
    top: 10%;
    left: 125px;
    height: 10%;
    width: 40%;
  }
  50%{
    top: 30%;
    left: 105px;
    height: 50%;
    width: 10%;
  }
  70%{
    top: 60%;
    left: 125px;
    height: 10%;
    width: 60%;
  }
  100%{
    top: 30%;
    left: 125px;
    height: 30%;
    width: 20%;
  }
}
#flowwo{
  filter: blur(30px);
  align-items: center;
  overflow: hidden;
  height: 60%;
  width: 40%;
  position: absolute;
  bottom: -20%;
  left: 25px;
  animation-name: flowss;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}
@keyframes flowss {
  0%{
    bottom: 20%;
    left: 25px;
    height: 20%;
    width: 30%;
  }
  30%{
    bottom: 5%;
    left: 125px;
    height: 10%;
    width: 40%;
  }
  50%{
    bottom: 20%;
    left: 5px;
    height: 10%;
    width: 50%;
  }
  70%{
    bottom: 20%;
    left: 5px;
    height: 50%;
    width: 20%;
  }
  100%{
    bottom: 40%;
    left: 25px;
    height: 20%;
    width: 30%;
  }
}
#imaege{
  position: absolute;
  top: 90%;
  left: 18px;
  background: solid;
  background-color: rgba(71, 71, 71, 0.315);
  padding: 260px 46%;
  border-radius:40px 340px 40px 40px;
  backdrop-filter: blur(30px);
  border: solid rgba(78, 78, 78, 0.596) 1px ;
}
#gpt{
  overflow: hidden;
  width: 350px;
  background: transparent;
  position: absolute;
  top:107.5%;
  left: 34px;
  z-index: 2;
  border-radius:0px 0px 60px 30px ;
}
#bglay{
  filter: invert(100%);
  overflow: hidden;
  width: 380px;
  background: transparent;
  position: absolute;
  top:102%;
  left: 10px;
  z-index: 1;
}
#overlay{
  filter: invert(100%);
  overflow: hidden;
  width:380px;
  background: transparent;
  position: absolute;
  top:102%;
  left: 10px;
  z-index: 999;
}
#tes{
  filter: blur(30px);
  align-items: center;
  overflow: hidden;
  height: 20%;
  width: 20%;
  position: absolute;
  bottom: -40%;
  left: 80px;
  animation-name: tess;
  animation-duration: 18s;
  animation-iteration-count: infinite;
}
@keyframes tess {
  0%{

  }
  20%{
    filter: blur(90px);
    height: 40%;
    width: 60%;
    transform: rotate(80deg);
  }
  30%{
    filter: blur(40px);
    height: 40%;
    width: 40%;
    transform: rotate(70deg);
  }
  40%{
    filter: blur(30px);
    height: 40%;
    width: 60%;
    transform: rotate(140deg);
  }
  50%{
    filter: blur(40px);
    height: 40%;
    width: 40%;
    transform: rotate(70deg);
  }
  70%{
    filter: blur(90px);
    height: 40%;
    width: 60%; 
    transform: rotate(20deg);
  }
  100%{}
}
.slider {
  width: 100%;
  overflow: hidden;
  position: absolute;
  bottom: -130%;
}
.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #000;
  padding: 20px 0;
}
.list {
  display: flex;
  width: max-content;
  animation: scroll 30s linear infinite;
  gap: 40px;
}

.item {
  background: transparent;
  padding-top: 20px;
  padding-bottom: 90px;
  opacity:60%;
  filter: invert(130%);
  flex-shrink: 0;
  width: var(--width, 30px);
  height: var(--height, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: none;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
}

@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.ids{
  position: absolute;
  top: 90%;
  left: 130px;
  width: 60px;
    .logoClr{
      animation-name: rotation;
      animation-duration: 10s;
      animation-iteration-count: infinite;
    }
}
#logo{
  position: absolute;
  top: -100%;
  left: 60px;
  width: 210px;
}
#logoclr{
  position: absolute;
  top: -100%;
  left: 60px;
  width: 210px;
  animation-name: rotation;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
@keyframes rotation {
  0%{
      transforn:rotate(0deg)
  }
  100%{
      tranform:rotate(360deg)
  }
}
#ok{
  font-weight: 100;
  opacity: 70%;
  font-weight: bold;
  font-size: 2rem;
  color: white;
  text-decoration: underline;
  position: absolute;
  bottom: -133%;
  left: 34%;
  text-align: center;
  align-items: center;
  font-family: "Playfair";
  animation: color 10s  infinite;
}
.twos{
  font-family: "Playfair";
  position: absolute;
  bottom: -100%;
  left: 2%;
  width: 400px;
  background: solid;
  background-color: rgba(105, 105, 105, 0.171);
  border: solid rgba(117, 117, 117, 0.301)1px;
  backdrop-filter: blur(30px);
  padding-top: 40px;
  padding-bottom: 40px;
  border-radius: 40px;
  z-index: 1;
}
#tesa{
  z-index: 0;
  position: absolute;
  bottom: 30px;
  left: 50px;
  filter: blur(30px);
  align-items: center;
  overflow: hidden;
  height: 20%;
  width: 20%;
  animation-name: tess;
  animation-duration: 18s;
  animation-iteration-count: infinite;
}
.op{
  position: absolute;
}
.top{
  z-index: 2;
}
#comp{
  font-family:"Roboto";
  text-align: center;
  font-size: 3rem;
  margin-right: 70px;
  margin-bottom: 40px;
  text-decoration: underline;
}
#one {
  position: fixed;
  left: 10px;
  top: 10px;
  padding: 10px 15px;
  font-size: 0.7rem;
  background: #333;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  z-index: 10;
}