/* 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." */

body {
  background-color: black;
  color: white;
  font-family: Verdana;
}

body {
  background-image: url('/bg.png');
  background-size: cover; /* Optional: stretches image to fit the page */
  background-repeat: no-repeat; /* Optional: stops the image from tiling */
  background-attachment: fixed; /* Optional: keeps background in place while scrolling */
}



/* ===== HEADER ===== */

.site-header {
  width: 100%;
  height: 58px;

  background:
    linear-gradient(
      to bottom,
      #334b98 0%,
      #243878 45%,
      #18275b 100%
    );

  border-bottom: 1px solid #101a3d;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 8px rgba(0,0,0,0.35);

  font-family: Arial, Helvetica, sans-serif;
}

.header-inner {
  width: 640px;
  height: 58px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  position: relative;
}

/* ===== LOGO ===== */

.logo {
  display: flex;
  align-items: center;
  gap: 7px;

  text-decoration: none;
  color: #ffffff;

  height: 100%;
}

.logo-n {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;

  color: white;

  text-shadow:
    0 1px 2px #07102d;
}

.logo-text {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;

  color: #d9def4;

  text-shadow:
    0 1px 2px #07102d;
}

/* ===== MAIN NAVIGATION ===== */

.main-nav {
  display: flex;
  gap: 18px;

  margin-left: 28px;
}

.main-nav a,
.account-nav a {
  color: #d9def4;
  text-decoration: none;

  font-size: 14px;

  text-shadow:
    0 1px 2px #080f27;

  transition: color 0.15s ease;
}

.main-nav a:hover,
.account-nav a:hover {
  color: #ffffff;
}

/* ===== LOGIN / REGISTER ===== */

.account-nav {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-left: auto;
}

.account-nav span {
  color: #596795;
  font-size: 12px;
}

  min-height: 190px;

  padding: 28px 32px 30px;

  box-sizing: border-box;

  text-align: center;

  background:
    linear-gradient(
      to bottom,
      rgba(48, 70, 143, 0.98),
      rgba(25, 39, 91, 0.98)
    );

  border: 1px solid rgba(8, 17, 50, 0.9);
  border-radius: 4px;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}


  align-items: center;
  justify-content: space-between;
}

/* FOOTER */
.site-footer {
  width: 100%;
  margin-top: 0;
  padding: 14px 0 18px;

  background: linear-gradient(
    to bottom,
    #202d72,
    #11183f
  );

  border-top: 5px solid #080814;
}

.footer-inner {
  width: 90%;
  max-width: 1000px;
  min-height: 55px;

  margin: 0 auto;
  padding: 14px 14px;

  box-sizing: border-box;

  background: linear-gradient(
    to bottom,
    #263b87,
    #18265d
  );

  border: 2px solid #17255c;
  border-radius: 5px;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  color: white;
}

.footer-left {
  font-size: 11px;
  line-height: 1.6;
}

.footer-links {
  font-size: 10px;
  margin-top: 2px;
}

.footer-links a {
  color: white;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}