/* Outdated Warning - Red Theme */
#asite-mod { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0); backdrop-filter: blur(2px); 
    display: flex; align-items: center; justify-content: center; 
    z-index: 99999; pointer-events: none; opacity: 0; 
    transition: all 0.4s ease; font-family: 'Poppins', sans-serif; 
}

#asite-mod.nav-ds-show { 
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px); 
    pointer-events: auto; opacity: 1; 
}

.asite-card { 
    background: #1c1c1e; border: 1px solid #ff3030; padding: 32px; 
    border-radius: 28px; width: 340px; text-align: center; 
    transform: scale(0.85); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

#asite-mod.nav-ds-show .asite-card { transform: scale(1); }

.asite-ttl { color: #ff3030; margin-bottom: 12px; font-weight: 600; font-size: 22px; }

.asite-txt { color: #a1a1aa; font-size: 14px; margin-bottom: 25px; line-height: 1.5; }

.asite-btn { 
    width: 100%; padding: 12px; border-radius: 12px; border: none; 
    cursor: pointer; font-weight: 600; background: #ff3030; color: #fff; 
    transition: background 0.2s, transform 0.2s; font-family: inherit;
}

.asite-btn:hover { background: #cc0000; transform: scale(1.02); }





/* Prevent Scrollbars in Body */
html, body {
  height: 100%;
  margin: 0; /* Remove margin around the body */
  padding: 0; /* Remove any padding from the body */
  overflow-y: scroll; /* Enable scrolling */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for Edge and IE */
}

body::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome, Safari, Opera */
}

/* Content Styling */
.content {
  position: relative;
  z-index: 1;
  height: 100vh; /* Ensure the content takes up the full viewport height */
  display: flex;
  flex-direction: column;
  padding-top: 20px; /* Add a small top padding to avoid content touching the top */
  box-sizing: border-box;
}

/* Wrapper Styling */
.wrapper {
  background-image: url('https://example.com/your-image.jpg'); /* Change this to your background image */
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align to the top */
  align-items: flex-start; /* Align to the left */
  padding: 40px; /* Adjust padding as needed */
  text-align: left;
  height: auto; /* Allow content to flow naturally */
}

/* Prevent Scrollbars in Body */
body {
  background: linear-gradient(to bottom, #2e2e2e, #4b4b4b); /* Dark to lighter gradient */
}

/* Wrapper Styling */
.wrapper {
  background-image: url('https://example.com/your-image.jpg'); /* Change this to your background image */
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align to the top */
  align-items: flex-start; /* Align to the left */
  padding: 73px;
  height: 100vh;
  text-align: left;
}

h1 {
  font-size: 60px;
  font-weight: bold;
  position: relative;
  margin-bottom: 10px; /* Space between h1 and time */
  text-align: left; /* Align the text to the left */
  letter-spacing: 2px; /* Add spacing between letters for better readability */
  color: #ffffff; /* White text color */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Add a subtle shadow to make the text pop */
  font-family: 'Roboto', sans-serif; /* Use a modern font for a clean look */
  transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition on hover */
}

h1:hover {
  color: #ff9900; /* Change color on hover */
  text-shadow: 2px 2px 10px rgba(255, 153, 0, 0.8); /* Glowing effect on hover */
}

h2 {
  color: white;
  text-align: left;
  margin-left: 75px;
  padding-bottom: 10px;
  font-size: 36px;
  font-family: 'Arial', sans-serif;
  font-weight: 600;
  letter-spacing: 2px; /* Initial letter-spacing */
  text-transform: uppercase;
  position: relative; /* Make the h2 a positioned element */
  transition: all 0.3s ease-in-out; /* Smooth transition for letter-spacing */
}

h2::after {
  content: ''; /* Empty content for the pseudo-element */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%; /* Initial width of the underline */
  height: 3px; /* Thickness of the underline */
  background-color: #fff; /* White underline */
  transition: all 0.3s ease-in-out; /* Smooth transition for underline width and color */
}

h2:hover {
  color: #f0f0f0; /* Slightly lighter color on hover */
  letter-spacing: 4px; /* Increase letter-spacing on hover */
}

h2:hover::after {
  width: 94%; /* Change the underline width on hover */
  background-color: #ffcc00; /* Change the underline color on hover */
}


.t {
  font-size: 60px;
  font-weight: bold;
  display: flex; /* Align items horizontally */
  align-items: center; /* Vertically center the items */
  gap: 15px; /* Space between the elements */
  position: relative; /* Enable absolute positioning within this container */
}

.logo img {
  position: absolute; /* Position the image absolutely */
  top: 130px; /* Move the image higher by a few pixels */
  right: 100px; /* Align the image to the right */
  height: 370px; /* Size of the image */
  width: auto; /* Maintain aspect ratio */
}

.clock {
  font-family: 'Arial', sans-serif; /* Set the font for the clock */
}

.weather-icon {
  font-size: 40px; /* Size of the weather emoji */
}

.temperature {
  font-size: 32px; /* Increase font size for temperature */
  font-family: 'Courier New', monospace; /* Change font for temperature */
  position: relative; /* To allow subscript positioning */
}

.event {
  margin-top: 10px; /* Add space between the clock/temperature section and the quote */
  display: flex; /* Align the emoji and quote on the same line */
  align-items: center; /* Vertically center the emoji and quote */
  gap: 10px; /* Space between emoji and quote */
}

.quote-icon {
  font-size: 30px; /* Size of the emoji */
}

.event-text {
  font-size: 22px; /* Size of the quote text */
  font-style: italic; /* Add style to the quote */
  color: #ffffff; /* Quote text color */
}


.buttons {
  margin-top: 20px;
}

button {
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 16px;
  color: white;
}

button:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.channel {
  display: block;
  font-size: 18px;
}

/* Ensure container has enough space */
.iframe-container {
  width: 100%;
  height: 250px; /* Make the container take up the full height of the viewport */
  max-width: 100%; /* Prevent container from being larger than the viewport */
  display: flex; /* Align items properly */
  flex-direction: column; /* Stack iframes vertically */
  justify-content: center; /* Center content vertically */
  overflow: visible; /* Allow the content to overflow if necessary */
}

.slide {
  width: 100%;
  height: 900px; /* Make the container take up the full height of the viewport */
  max-width: 100%; /* Prevent container from being larger than the viewport */
  display: flex; /* Align items properly */
  flex-direction: column; /* Stack iframes vertically */
  justify-content: center; /* Center content vertically */
  overflow: visible; /* Allow the content to overflow if necessary */
}

.s {
  width: 100%; /* Make the iframe take up the full width of the container */
  height:310px; /* Make iframe height adjust according to container */
  border: none; /* Remove the border */
}

/* Fix the iframe height and width */
.c {
  width: 100%; /* Take full width of the parent container */
  height: 600px; /* Make iframe height adjust according to container */
  border: none; /* Remove the border */
  display: block; /* Make iframe block-level */
  box-sizing: border-box; /* Ensure padding/border doesn't affect dimensions */
  margin: 0; /* Remove any margin */
}

/* Style for the copyright section */
.copyright {
  text-align: center; /* Center the text */
  font-size: 1.1rem; /* Set a moderate font size */
  color: #ebebeb; /* Set text color to white */
  padding: 15px; /* Add padding around the content */
  position: relative;
  bottom: 0; /* Position at the bottom of the page */
  width: 100%;
}

/* Style for the link */
.copyright a {
  color: #fff06a; /* Set the link color */
  font-weight: 700; /* Make the link bold */
  text-decoration: none; /* Remove underline */
  margin-left: 5px; /* Add some space between the text and the link */
}

.copyright a:hover {
  color: #ff4b4b; /* Change color on hover */
  text-decoration: none; /* Add underline on hover */
}

.area {
  position: fixed; /* Fix the background so it remains in place while scrolling */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #353535;
  background-size: cover;
  z-index: -1; /* Ensure the background is behind the content */
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 0;
  }

  100% {
      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      border-radius: 50%;
  }
}

.i {
  display: flex;
  margin-left: 100px; /* Margin to the left */
  gap: 7px;
}

.i img {
  width: 180px; /* Make images smaller */
  height: 250px; /* Maintain aspect ratio */
  margin-right: 10px; /* Space between images */
  transition: transform 0.3s ease;
}

.image-link {
  position: relative;
  display: inline-block;
}

.star-text {
  position: absolute;
  top: 2px; /* Move the box higher */
  left: 2px; /* Move the box closer to the left corner */
  font-size: 18px; /* Smaller font size */
  color: yellow;
  background-color: rgba(0, 0, 0, 0.7); /* Darker, more solid transparent background */
  padding: 5px 10px; /* Smaller padding */
  border-radius: 12px; /* More rounded corners */
  display: none;
}

.image-link:hover img {
  transform: scale(1.05);
}

.image-link:hover .star-text {
  display: block;
}


/* Define the fade and slide-up animation */
@keyframes fadeSlideUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Apply the animation to the body or main content */
body {
  animation: fadeSlideUp 1s ease-out;
}

/* Optional: style for smoother animation */
html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  background-color: #ffffff; /* Example background color */
}

@media (max-width: 768px) {
  h2 {
    font-size: 24px;
    margin-left: 40px;
  }

  h2::after {
    width: 70%; /* Increase the underline width */
  }

  .i {
    display: grid; /* Use grid layout instead of flexbox */
    grid-template-columns: repeat(3, 1fr); /* 3 items per row */
    gap: 10px; /* Space between images */
    margin-left: 10px; /* Add some margin from the left */
  }

  .i img {
    width: 90%; /* Make images a bit smaller */
    height: auto; /* Maintain aspect ratio */
    margin-right: 0; /* Reset margin right */
  }
}

@media (max-width: 480px) {
  h2 {
    font-size: 20px;
    margin-left: 20px;
  }

  h2::after {
    width: 80%; /* Increase the underline width */
  }

  .i {
    display: grid; /* Use grid layout instead of flexbox */
    grid-template-columns: repeat(3, 1fr); /* 3 items per row */
    gap: 10px; /* Space between images */
    margin-left: 10px; /* Add some margin from the left */
  }

  .i img {
    width: 85%; /* Make images smaller on smaller screens */
    height: auto; /* Maintain aspect ratio */
    margin-right: 0; /* Reset margin right */
  }
}

@media (max-width: 480px) {
  .iframe-container {
    width: 100%;  /* Make iframe responsive */
    height: 180px; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure iframe doesn't overflow */
    border: none; /* Remove border for a cleaner look */
  }

  .slide {
    width: 100%;
    height: 1500px; /* Make the container take up the full height of the viewport */
    max-width: 100%; /* Prevent container from being larger than the viewport */
    display: flex; /* Align items properly */
    flex-direction: column; /* Stack iframes vertically */
    justify-content: center; /* Center content vertically */
    overflow: visible; /* Allow the content to overflow if necessary */
  }
  
  .s {
    width: 100%; /* Make the iframe take up the full width of the container */
    height: 490px; /* Make iframe height adjust according to container */
    border: none; /* Remove the border */
  }
}

@media (max-width: 768px) {
  .copyright {
    font-size: 1rem; /* Adjust font size for smaller screens */
    padding: 10px; /* Reduce padding on smaller screens */
  }

  .copyright a {
    font-size: 0.9rem; /* Adjust link font size */
  }
}

/* Media query for very small screens */
@media (max-width: 480px) {
  .copyright {
    font-size: 0.9rem; /* Adjust font size further */
    padding: 8px; /* Further reduce padding */
  }

  .copyright a {
    font-size: 1rem; /* Reduce link font size */
  }
}

@media (max-width: 480px) {
  .logo img {
    position: absolute; /* Ensure the logo is not fixed while scrolling */
    top: 20px; /* Add space from the top */
    left: 50%; /* Center the logo horizontally */
    transform: translateX(-50%); /* Adjust for perfect centering */
    height: 200px; /* Set the height */
    width: auto; /* Maintain the aspect ratio */
    z-index: 10; /* Ensure it's above other content */
  }
}

/* Media query for medium screens */
@media (max-width: 768px) {
  .wrapper {
    padding: 10px;
    display: flex; /* Make wrapper a flex container */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    flex-direction: column; /* Align items in a column */
  }

  .logo {
    margin-bottom: 50px; /* Increased space below the logo */
    display: flex;
    justify-content: center; /* Center logo horizontally */
  }

  h1 {
    font-size: 40px; /* Increased font size of h1 */
    margin-top: 160px; /* Further increased space above the h1 */
    text-align: center; /* Center align the h1 text */
  }

  .event {
    font-size: 14px;
    text-align: center; /* Center align the event text */
  }
}

/* Media query for small screens */
@media (max-width: 480px) {
  .logo {
    width: 120px; /* Smaller logo on mobile */
    margin-bottom: 60px; /* More space below the logo on mobile */
    display: flex;
    justify-content: center; /* Center logo horizontally */
  }

  h1 {
    font-size: 36px; /* Bigger font size for h1 on small screens */
    margin-top: 180px; /* Even more space above h1 on small screens */
    text-align: center; /* Center align the h1 text */
  }

  .event {
    font-size: 12px;
    text-align: center; /* Center align the event text */
  }
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .t {
    font-size: 50px; /* Reduce font size for smaller screens */
    gap: 10px; /* Reduce space between elements */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    display: flex; /* Make .t a flex container */
  }

  .weather-icon {
    font-size: 35px; /* Adjust weather icon size */
  }

  .temperature {
    font-size: 28px; /* Adjust temperature font size */
  }
}

/* Media query for very small screens (e.g., mobile) */
@media (max-width: 480px) {
  .t {
    font-size: 40px; /* Further reduce font size */
    gap: 8px; /* Reduce gap further */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    display: flex; /* Make .t a flex container */
  }

  .weather-icon {
    font-size: 30px; /* Adjust weather icon size */
  }

  .temperature {
    font-size: 24px; /* Adjust temperature font size */
  }

button {
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 32px;
  cursor: pointer;
  font-size: 15px;
  color: white;
  display: block; /* Make button a block-level element */
  margin-left: auto; /* Center horizontally */
  margin-right: auto; /* Center horizontally */
}

/* If you want to center multiple buttons within a container */
.buttons {
  display: flex;
  justify-content: center; /* Center buttons horizontally */
  align-items: center; /* Center buttons vertically */
  flex-wrap: wrap; /* Allow wrapping if there are too many buttons */
}
}

.spotify-iframe {
  border-radius: 0px; /* Apply rounded corners */
  width: 87%; /* Set width to 100% of the parent container */
  margin-left: 90px;
  margin-right: 90px;
  height: 465px; /* Set height to 352px */
  border: none; /* Remove default border */
}

@media (max-width: 768px) {
  .spotify-iframe {
    width: 360px; /* Set width to 100% on smaller screens */
    margin-left: 10px; /* Reduce margin */
    margin-right: 10px; /* Reduce margin */
    height: 300px; /* Adjust height for mobile */
  }
}

/* Extra small devices (max-width: 480px) */
@media (max-width: 480px) {
  .spotify-iframe {
    height: 250px; /* Further adjust height for very small screens */
  }
}

/* Samsung Galaxy Tab S9 Plus - Portrait Mode */
@media (max-width: 1752px) and (orientation: portrait) {
  html, body {
    overflow-y: scroll;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
  }

  body::-webkit-scrollbar {
    display: none; /* Hide scrollbar in Chrome, Safari, Opera */
  }

  /* Wrapper adjustments */
  .wrapper {
    padding: 20px; /* Adjust padding for portrait view */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align content */
    justify-content: flex-start;
    text-align: center; /* Adjust text alignment for better readability */
  }

  h1 {
    font-size: 48px; /* Reduce font size for portrait mode */
    letter-spacing: 1.5px;
    text-align: center;
  }

  h2 {
    font-size: 28px; /* Adjust heading size */
    margin-left: 0; /* Remove left margin */
    text-align: center; /* Center align text */
  }

  h2::after {
    width: 60%; /* Adjust underline width */
  }

  .logo img {
    top: 10px; /* Adjust logo position */
    height: 180px; /* Scale down for smaller view */
    width: auto; /* Maintain aspect ratio */
  }

  .iframe-container {
    height: 200px; /* Adjust iframe container height */
  }

  .slide {
    height: 1200px; /* Adjust slide container height */
  }

  .s, .c {
    height: 400px; /* Adjust iframe heights */
  }

  .i {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Adjust grid layout */
    gap: 15px;
  }

  .i img {
    width: 90%; /* Adjust image size */
    height: auto;
  }

  .buttons {
    margin-top: 15px; /* Adjust spacing */
  }

  button {
    font-size: 14px; /* Adjust button font size */
    padding: 8px 16px; /* Adjust button padding */
  }

  .copyright {
    font-size: 0.95rem; /* Adjust copyright text size */
    padding: 10px;
  }

  .area {
    background-size: contain; /* Adjust background scaling */
  }
}