@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Great+Vibes&family=Playball&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-color: #000000;
  --secondary-bg-color: #C4C4C4;
  --primary-text-color: #fff;
  --primary-color: #fd0000;
}

html { font-size: 62.5%; overflow-x: hidden; }

body {
  background-color: var(--bg-color);
  color: var(--primary-text-color);
  font-family: 'Lato', sans-serif;
}

h1, header {
  font-family: 'Cinzel Decorative', serif;
}

h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

p, li, a, button, input, textarea {
  font-family: 'Lato', sans-serif;
}


span { color: var(--primary-color); }
.hidden { display: none; }

/* Header/Nav */
.header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  padding: 2rem 9%;
  background: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
}
.header.sticky { border-bottom: .1rem solid rgba(0,0,0,.2); }

.navbar { margin-left: auto; }

.navbar a {
  font-family: 'Cinzel Decorative', serif;
  font-size: 3rem;
  color: var(--primary-text-color); /* FIX: was var(--text-color) */
  margin-left: 4rem;
  transition: .3s;
  text-decoration: none;
}
.navbar a:hover, .navbar a.active { color: var(--primary-color); }

#menu-icon {
  display: none;
  font-size: 3.6rem;
  color: var(--primary-text-color);
}

/* Dropdown */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; padding-bottom: 1.2rem; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 18rem;
  background: var(--bg-color);
  border-radius: .8rem;
  padding: .8rem 0;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.5);
  display: none;
  flex-direction: column;
  z-index: 9999;
}

.dropdown-menu a {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2.2rem;
  color: var(--primary-text-color);
  text-decoration: none;
  padding: 1rem 2rem;
  white-space: nowrap;
}

.dropdown-menu a:hover { background: var(--primary-color); color: var(--bg-color); }



/* Buttons (shared) */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 1rem 2rem;
  background: var(--primary-color);
  color: var(--bg-color);
  font-size: 1.6rem;
  letter-spacing: .1rem;
  border-radius: .6rem;
  text-decoration: none;
  border: 2px solid var(--primary-color);
  transition: .25s ease;
}

.btn:hover { background: var(--bg-color); color: var(--primary-color); }

.about-more-btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  white-space: nowrap;
  justify-content: center;
  padding: 1rem 2.4rem;
  border-radius: .6rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .05rem;
  cursor: pointer;
  text-decoration: none;
  background: var(--primary-color);
  color: var(--bg-color);
  border: 2px solid var(--primary-color);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease;
}

.about-more-btn:hover,
.about-more-btn:focus {
  background: var(--bg-color);
  color: var(--primary-color);
  box-shadow: 0 0 12px rgba(253,0,0,.6);
  transform: translateY(-2px);
}

/* Mobile nav behavior (global) */


@media (min-width: 769px) {
  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu { display: flex; }
}
@media(max-width: 768px){
  html{ font-size: 45%; }

  #menu-icon { display: block; cursor: pointer; margin-left: 2rem; }

  .navbar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: var(--bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .3s;
  }
  .navbar.active { left: 0; }

  .navbar a { font-size: 4rem; margin: 2rem 0; }

  .nav-dropdown { flex-direction: column; align-items: center; }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    margin-top: 1.2rem;
    width: 100%;
    display: none;
    text-align: center;
  }
  .nav-dropdown.open .dropdown-menu { display: flex; }

  .dropdown-menu a {
    font-size: 3.2rem;
    padding: 1.2rem 0;
  }
}