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

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


/* FONTS */
@font-face {
    font-family: "Kimberley W00 Regular";
    src: url("https://db.onlinewebfonts.com/t/90e3bc030941bf5762f2d8b9865b1bd7.ttf") format("woff2");
}

@font-face {
    font-family: "Kimberley W00 Bold";
    src: url("https://db.onlinewebfonts.com/t/d1cd048f0267d5d9a07fa065aacc50b1.ttf") format("woff2");
}

/* Properties */
body {
  font-family: "Kimberley W00 Regular", 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:"Amoebia";
  src: url("fonts.cdnfonts.com/css/amoebia");
  font-weight: 700;
  font-size: 90px;
  line-height: 95px;
}

  release {
  font-family:"Eatpoo";
  src: url("");
  font-weight: 700;
  font-size: 90px;
  line-height: 95px;
}

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

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

h1 {
  font-family: "Kimberley W00 Regular", sans-serif;
  font-weight: 700;
}

.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: "Kimberley W00 Regular", sans-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;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  padding: 30px 20px;
  margin-top: 50px;
 margin-left: auto;
  margin-right: auto;
  font-family: "Kimberley W00 Regular", 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;
}

.footer {
  width: 100%;
  max-width: 800px;
  text-align: center;
}



/* CONTAINER */
.fonts-container {
  display: flex;
  justify-content: center;  /* same as navbar */
  gap: 15px;                /* 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: "Kimberley W00 Regular", serif;
  width: 155px;
}


/* 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;
}

.font-item:last-child {
  grid-column: 1 / -1;
  justify: center;
}



/* 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: "Kimberley W00 Regular", 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: "Kimberley W00 Regular", sans-serif;
  src: url("http://fonts.cdnfonts.com/css/Kimberley W00 Regular") format("truetype");
}

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: "Kimberley W00 Regular", 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: 'Kimberley W00 Regular', 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 */
}


/* Font grid works better? */
.font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
}

/* changelog body text */
changelog {
    font-family: "Kimberley W00 Regular", sans-serif;
    src: url("https://db.onlinewebfonts.com/t/90e3bc030941bf5762f2d8b9865b1bd7.ttf") format("woff2");
  font-weight: 400;
  font-size: 13.5px;
  line-height: 7px;
}