/* Default styles for larger screens */
.desktop-content {
    display: block;
}
.mobile-content {
    display: none;
}

/* Styles for mobile screens (e.g., max-width 768px) */
@media (max-width: 1000px) {
    .desktop-content {
        display: none;
    }
    .mobile-content {
        display: block;
    }
	table {
        width: 100%;
    }
    td {
        min-width: 0; /* Prevents fixed-width issues */
    }
    td img {
        max-width: 100%;
        height: auto;
    }
}


.rajdhani-regular {
  font-family: "Rajdhani", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.basic_text_m {
  color: #e0e0e0;
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  font-size: 17px;
  font-weight: 500;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Enhance readability */
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

.basic_text_m a:link,
.basic_text_m a:visited,
.basic_text_m a:hover,
.basic_text_m a:active {
    color: #f9f9f9; /* Cyan, for example - change to your desired color */
}
.basic_text {
  color: #e0e0e0;
  font-family: "Inter", sans-serif;
  line-height: 1.7;
  font-size: 19px;
  font-weight: 500;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Enhance readability */
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

.basic_text a:link,
.basic_text a:visited,
.basic_text a:hover,
.basic_text a:active {
    color: #f9f9f9; /* Cyan, for example - change to your desired color */
}

.subheadline_text {
  color: #d8b4fe;
  font-family: "Rajdhani", sans-serif;
  line-height: 2.0;
  font-size: 25px;
  font-weight: bold;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Enhance readability */
}

.subheadline_text_m {
  color: #d8b4fe;
  font-family: "Rajdhani", sans-serif;
  line-height: 1.6;
  font-size: 23px;
  font-weight: bold;
  padding: 1rem;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Enhance readability */
}

.strapline {
  color: #EEEEEE;
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  font-size: 21px;
  font-weight: 600;
}

.copyright {
  color: #AAAAAA;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  line-height: 1.3;
  font-size: 14px;
  font-style: italic;
}

.screenshotpreview {
    width: 100%;
    height: auto;
	border: 2px solid #808080; /* 1px grey border (default) */
}

/* Hover state */
.screenshotpreview:hover {
    border: 2px solid #ffffff; /* 2px white border on hover */
}

/* Body with Background Image */
body {
    margin: 0;
    padding: 0;
    background: none; /* Remove bgcolor */
    color: #e0e0e0; /* Ensure text is readable */
    font-family: Arial, sans-serif; /* Default font, override as needed */
}

/* Background Wrapper */
.background-wrapper {
    position: relative;
    min-height: 100vh; /* Full viewport height */
    background: url('../img/starfield.jpg') no-repeat center center fixed;
    background-size: cover; /* Scales image to cover the screen */
}

.innersection{
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

.blacksection {
  width: 100vw; /* Full viewport width */
  margin-left: calc(-50vw + 50%); /* Offset to align with centered content */
  background: rgba(0, 0, 0, 0.5);
}

/* Overlay for Blur or Darken Effect */
.background-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.5);*/ /* Darken with 50% opacity */
    /* OR use blur: */
     backdrop-filter: blur(2px);  /* Uncomment for blur (modern browsers only) */
    z-index: 1; /* Behind content */
}

/* Ensure content stays above the overlay */
.background-wrapper > div {
    position: relative;
    z-index: 2;
}

/* Style the main content table */
.content-table {
    background: rgba(17, 17, 17, 0.8); /* Semi-transparent dark gray */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); /* Subtle shadow */
}

/* Header and Footer */
table[width="100%"] {
    background: #000000;
}

/* Screenshot table */
table[width="1000"] {
    background: rgba(17, 17, 17, 0.8);
}

/* Copyright */
.copyright {
    color: #888;
    margin: 0;
}