/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ---------- Theme variables: edit these to restyle the whole site ---------- */
:root {
  --color-primary: #1bacf5;
  --color-bg-fallback: #21b570;
  --color-box-bg: rgba(173, 216, 230, 0.5);
  --color-footer-bg: rgba(0, 0, 0, 0.3);
  --color-text-light: #ffffff;
  --color-primary-hover: #0f8fd1;
  --color-primary-active: #0c6ea3;
  --font-heading: dream;
  --color-blog-heading: #b46fe8;
  --font-body: "Segoe UI", Arial, sans-serif;
  --font-blog-heading: Npol;
  
}

/* Makes padding/border included in element width, avoids layout surprises */
*, *::before, *::after {
  box-sizing: border-box;
}

@font-face {
  font-family: dream;
  src: url(DreamMMA.ttf);
  font-display: swap; /* show fallback text instantly instead of invisible text while loading */
}
@font-face {
  font-family: Npol;
  src: url(Neuropol.ttf);
  font-display: swap; /* show fallback text instantly instead of invisible text while loading */
}


h1 {
  font-size: clamp(28px, 6vw, 44px);
  font-family: var(--font-heading);
  text-align: center;
  color: var(--color-primary);
  margin: 24px 16px;

  -webkit-text-stroke: 2px #ffffff;  /* width + color of the outline */
  text-stroke: 2px #ffffff;          /* standard property, less supported */
  text-shadow: 0 0 20px #ffffff;             /* stroke + shadow can look muddy together */
}

nav {
  display: flex;             /* this was missing — flex-direction alone did nothing */
  flex-direction: column;
  border-style: ridge;
  padding: 12px;
  gap: 8px;
}

.back-button {
  position: fixed;
  top: 12px;
  left: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: white;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

/* 1. Container controls centering and safety margins */
.center-container {
  flex: 1;                  /* takes up remaining space, pushing the footer down */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

/* 2. The rounded content box */
.rounded-box {
  width: 100%;
  max-width: 500px;
  padding: 32px;
  border-radius: 16px;

  background-color: var(--color-box-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  text-align: center;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rounded-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

/* Button inside .rounded-box.
   :active fires on click AND on spacebar press when the button is focused —
   that's native <button> behavior, no JS required. */
.custom-button {
  display: block;
  margin: 24px auto 0;   /* auto left/right centers it regardless of parent's text-align */
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-family: var(--font-body);
  color: #ffffff;
  background-color: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.custom-button:hover {
  background-color: var(--color-primary-hover);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
  transform: translateY(-1px);
}

.custom-button:active {
  background-color: var(--color-primary-active);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transform: scale(0.97) translateY(0);
}

.custom-button:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Blog content container: clean white card sitting on top of the page background */
.blog-container {
  width: 100%;
  max-width: 700px;
  margin: 40px auto;
  padding: 48px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  color: #222222;
  font-family: var(--font-body);
  line-height: 1.7;
}

.blog-container h2 {
  font-family: var(--font-blog-heading);
  color: var(--color-blog-heading);
  margin-top: 0;
  font-size: 28px;
}

.blog-container .blog-meta {
  font-size: 13px;
  color: #888888;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-container p {
  margin-bottom: 18px;
  font-size: 16px;
}

.blog-container p:first-of-type::first-letter {
  /* subtle drop-cap for a bit of editorial polish */
  font-size: 30px;
  font-weight: bold;
  float: left;
  line-height: 1;
  padding-right: 2px;
  color: #000000;
}
body.index {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-blog-heading);

  background-image: url('Wallpapers/FAW1.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-color: var(--color-bg-fallback);

  display: flex;
  flex-direction: column; /* stacks content vertically so footer sits at the bottom */
}

body.blog {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);

  background-image: url('Wallpapers/FAW2.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-color: var(--color-bg-fallback);

  display: flex;
  flex-direction: column; /* stacks content vertically so footer sits at the bottom */
}


 

.blog-container blockquote {
  margin: 24px 0;
  padding: 12px 20px;
  border-left: 4px solid var(--color-primary);
  background-color: #f5f9fc;
  font-style: italic;
  color: #444444;
  overflow: hidden; /* keeps the blockquote's background/border wrapping the floated image properly */
}
.blog-container blockquote img {
  float: right;
  width: 120px;
  height: auto;
  margin: 0 0 8px 16px; /* gap on the left and below, so text doesn't hug the image */
  border-radius: 6px;
}


@media (max-width: 480px) {
  .blog-container {
    padding: 28px;
    margin: 20px auto;
  }
}

/* 3. Footer styles */
footer {
  text-align: center;
  padding: 16px;
  color: var(--color-text-light);
  background-color: var(--color-footer-bg);
  font-family: sans-serif;
}

/* ---------- Small-screen adjustments ---------- */
@media (max-width: 480px) {
  .rounded-box {
    padding: 20px;
  }
  .center-container {
    padding: 12px;
  }
}

/* Respect users who've asked their OS to reduce motion */
@media (prefers-reduced-motion: reduce) {
  .rounded-box {
    transition: none;
  }
}