/* 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: "LT Superior", sans-serif;
  text-align: center;
}

body {
  background: linear-gradient(#001434, #000000);
}


/* Fonts */
@font-face {
  font-family: "LT Superior";
  src: url("Web Fonts/LTSuperior-Regular.ttf") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "LT Superior";
  src: url("Web Fonts/LTSuperior-Italic.ttf") format("woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "LT Superior";
  src: url("Web Fonts/LTSuperior-Bold.ttf") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "LT Superior";
  src: url("Web Fonts/LTSuperior-BoldItalic.ttf") format("woff2");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "LT Superior";
  src: url("Web Fonts/LTSuperior-Black.ttf") format("woff2");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "LT Superior";
  src: url("Web Fonts/LTSuperior-BlackItalic.ttf") format("woff2");
  font-weight: 900;
  font-style: italic;
}


@font-face {
  font-family: "LT Archive";
  src: url("ReleaseFonts/LTArchive-Bold.ttf") format("woff2");
  font-weight: 700;
}



/* Properties */
body {
  font-family: "LT Superior", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 9.5px;
}

body {
  margin: 0;

  /* Solid fallback color */
  background-color: #000000;

  /* Gradient only at the top */
  background-image: linear-gradient(to bottom, #051734, #000000);

  /* Control how tall the gradient is */
  background-repeat: no-repeat;
  background-size: 100% 300px; /* adjust height */
}

/* RELEASE FONT */
  release {
  font-family: "LT Archive";
  src: url("ReleaseFonts/LTArchive-Bold.ttf") format("ttf");
  font-weight: 700;
  font-size: 90px;
  line-height: 95px;
}

h2, h3 {
  font-family: "LT Superior", sans-serif;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
   margin-left: auto;
  margin-right: auto;
}

h4 {
  font-family: "LT Superior", sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 15px;
  text-align: center;
}

h1 {
  font-family: "LT Superior", sans-serif;
  font-weight: 900;
}

.container {
  width: 600px;
  margin: auto;
  text-align: center;
}

ul {
  display: inline-block;
  text-align: left;
}

.container {
  text-align: center;
}


/* NAVBAR CONTAINER */
.navbar {
  display: flex;
  justify-content: center; /* center horizontally */
  gap: 12px; /* button distance */
  padding: 10px;
}

/* BUTTON STYLE */
.navbar a {
  text-decoration: none;
  font-family: "LT Superior", serif;
  padding: 9px 40px;
  color: white;
  font-size: 13px;

  /* Gradient background */
  background: linear-gradient(to bottom, #051734, #000000);

  /* Outline */
  border: 1.5px solid white;

  /* Smooth look */
  transition: 0.3s;
  
  /* ADD THIS */
  border-radius: 8px;
}

/* HOVER EFFECT */
.navbar a:hover {
  background: linear-gradient(to bottom, #0a2a5a, #000000);
  transform: translateY(-2px);
}


/* FOOTER */
.footer {
  background: #000000;
  color: white;
  text-align: center;

  padding: 30px 20px;
  margin-top: 50px;
 margin-left: auto;
  margin-right: auto;
  font-family: "LT Superior", serif;
  font-size: 14px;

  border-top: 1px solid #222;
}

.footer p {
  margin: 8px 0;
}

.footer a {
  color: #9ecbff;
  text-decoration: none;
  transition: 0.3s;
}

.footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer p:not(:last-child) {
  margin-bottom: 8px;
}




/* CONTAINER */
.fonts-container {
  display: flex;
  justify-content: center;  /* same as navbar */
  gap: 12px;                /* match navbar spacing */
  flex-wrap: wrap;          /* ✅ allow wrapping */
  max-width: 900px;         /* ✅ controls when wrapping happens */
  margin: 0 auto;           /* center the whole block */
  padding: 40px 20px;
}

/* EACH FONT BLOCK */
.font-item {
  text-align: center;
  font-family: "LT Superior", serif;
  width: 160px;
}

/* HOVER EFFECT */
.font-item img:hover {
  transform: translateY(-4px);
  transition: 0.3s;
}

/* FONT NAME (BOLD) */
.font-name {
  font-weight: bold;
  margin-top: 10px;
  color: white;
  line-height: 10px;
}

/* LANGUAGE SUPPORT (SMALL TEXT) */
.font-lang {
  font-size: 12px;
  color: #aaa;
  margin-top: 5px;
  line-height: 6px;
}



/* Keep dropdown aligned with button */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  margin-top: 6px;

  min-width: 160px;
  background: #000000;

  z-index: 1000;
}

.dropdown:hover .dropdown-content {
  display: block;
}



.dropdown-content a {
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
  font-family: "LT Superior", serif;
  font-size: 13px;
}

.dropdown-content a:hover {
  background: #0a2a5a;
}

.dropdown-content {
  display: block;
}



/* consistent image size */
img {
  max-width: 100%; /* Ensures image doesn't overflow container */
  height: auto;    /* Crucial: Maintains aspect ratio */
}

.logo-row {
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center;
  gap: 20px; /* keeps spacing between logos */
}



/* misc */
.bonus-font-row {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.bonus-font-item {
  text-align: center;
}

.bonus-font-item img {
  display: block;
  margin: 0 auto;
}

.desc {
  font-size: 12px;
  color: #aaa;
  margin-top: 5px;
}

.bottom-text {
  text-align: center;
  margin-top: 30px;
}


.menu-paragraph {
  display: block;
  width: 100%;
  max-width: 910px;
  margin: 20px auto 0;
  text-align: center;
  line-height: 1.4;
}

.header-row {
  display: flex;
  justify-content: center;
  align-items: center;
   text-align: center;
  width: 100%;
  line-height: 1;
}

/* Contact field */
form {
  max-width: 500px;
  margin: auto;
  font-family: "LT Superior Regular", sans-serif;
  src: url("Web Fonts/LTSuperior-Regular.woff") format("woff2");
}

label {
  display: block;
  margin-top: 15px;
}

input,
textarea {
  background-color: black;
  color: white;
  border: 1px solid white;
  padding: 8px;
  width: 100%;
}

input::placeholder,
textarea::placeholder {
  color: #aaa;
}

button {
  padding: 10px 20px;
  cursor: pointer;
}

.nav-button {
  font-family: "LT Superior", serif;
  background-color: black;
  color: white;
  border: 1px solid white;
  padding: 10px 20px;
}



.bonus-fonts-buttons a {
  display: inline-block;
  padding: 16px 60px;
  margin: 0.5;
  border: 2px solid white;
  border-radius: 10px;
  color: white;
  text-decoration: none;
  font-family: 'LT Superior', sans-serif;
  transition: all 0.2s ease;
  font-size: 23px;
}

/* Hover effect like navbar */
.bonus-fonts-buttons a:hover {
  background-color: white;
  color: #0b1a2a; /* adjust to your background */
}