/* === PAGE LAYOUT & BASE STYLING === */
/* Applies to entire page */
body {
  margin: 0;
  padding: 0;
  font-family: 'Bangers', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to bottom right, #1c3b5a, #000000);
  color: #ffd700;
  min-height: 100vh;
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Main content box for Power section */
.container {
  width: 95vw;
  max-width: 1200px;
  background-color: rgba(255, 255, 255, 0.95);
  color: #000;
  padding: 1rem;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  margin-top: 1rem;
  border-radius: 12px;
}
/* === NAVIGATION BAR === */
/* Top bar with deep Marvel blue background */
.navbar {
  background-color: #ffd700;         /* Gold background */
  padding: 6px 0;                    /* Reduced vertical padding */
  width: 75%;                        /* Slightly narrower than full width */
  margin: 10px auto;                 /* Centered with spacing */
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border: 3px solid #ff1a1a;         /* Red border all around */
  border-radius: 12px;               /* Rounded corners */
}


/* Nav button container */
.navbar ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nav link spacing */
.navbar ul a {
  margin: 0 8px;
  text-decoration: none;
}

/* Nav buttons: Gold background, red text */
.navbar .btn {
  background-color: #ffd700;     /* Gold button */
  color: #ff1a1a;                /* Red text */
  border: 3px solid #fff;        /* White border for clean look */
  padding: 8px 16px;
  font-size: 1rem;
  font-family: 'Bangers', sans-serif;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 1px 1px #000;
}

.navbar .btn:hover {
  background-color: #fff8b0;     /* Lighter gold on hover */
  color: #cc0000;                /* Deeper red */
  transform: scale(1.05);
  box-shadow: 0 0 10px #ffd700;
}
.btn.nav-btn {
  background-color:#002366 ;
  color: #ff1a1a;
  border: 3px solid #fff;

}



/* === BUTTONS === */
.btn {
  font-size: 1rem;
  font-family: 'Bangers', sans-serif;
  background-color: #ff1a1a;
  color: #ffd700;
  padding: 10px 20px;
  border: 3px solid #002366;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 1px 1px #000;
}
.btn:hover {
  background-color: #cc0000;
  color: #fff;
  box-shadow: 0 0 10px #fff;
  transform: scale(1.05);
}
.btn.critical { background-color: #002366; }
.btn.dm       { background-color: #1c3b5a; }
.btn.other    { background-color: #000; }

.roll-power-button {
  background-color: #ff1a1a;         /* Red background */
  color: #ffd700;                    /* Gold text */
  font-size: 1.5rem;
  font-family: 'Bangers', sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 2px 2px #000;
  padding: 12px 24px;
  border: 3px solid #002366;         /* Marvel blue border */
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.roll-power-button:hover {
  background-color: #cc0000;         /* Deeper red on hover */
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 0 12px #ffd700;
}


/* === LOGO IMAGE === */
/* Marvel logo image centered below navbar */
.logo-image {
  max-width: 300px;
  width: 80%;
  margin-top: 20px;
}

/* === POWER DISPLAY SECTION === */
/* Styled box that holds the power name & description */
.section {
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid #ff1a1a;
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem auto;
  width: 90%;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}

/* Subheading inside the section */
.section-title {
  font-size: 1.6rem;
  color: #ffd700;
  background-color: #ff1a1a;
  border: 3px solid #002366;
  padding: 6px;
  border-radius: 6px;
  text-align: center;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* Power name (styled banner) */
#power-name {
  font-size: 2rem;
  color: #ffd700;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #ff1a1a;
  padding: 8px;
  margin: 10px 0;
  border: 3px solid #002366;
  border-radius: 6px;
  text-align: center;
  text-shadow: 2px 2px #000;
}

/* Power description box */
#power-description {
  width: 90%;
  max-height: 400px;
  padding: 10px;
  font-size: 1.4rem;
  color: #002366;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  box-sizing: border-box;
  overflow-y: auto;
}

/* === RESPONSIVE DESIGN === */
/* Adjusts layout on tablets */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }

  .navbar ul {
    flex-direction: column;
    gap: 8px;
  }

  .container,
  .section {
    width: 95%;
  }

  .side-button {
    width: 100%;
  }
}

/* Adjusts layout on phones */
@media (max-width: 480px) {
  html {
    font-size: 12px;
  }

  .btn,
  .side-button {
    font-size: 1rem;
    width: 100%;
  }
}

/* === BRAND LOGO (TOP LEFT) === */
.tippy-logo {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 15vw;
  max-width: 150px;
  height: auto;
  transition: transform 0.3s ease-in-out;
}

.tippy-logo:hover {
  transform: scale(1.1);
}

.logo-link {
  display: flex;
  align-items: center;
  margin-left: 0;
}
.legal-footer {
  width: 100%;
  font-size: 0.7rem;
  color: #ccc;
  text-align: center;
  padding: 1rem;
  margin-top: 10rem;
  border-top: 1px solid #333;
  background-color: #1c3b5a;
}