html, body {
    height: 100%;
    margin: 0;
    background-color: black;
    color: white;
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
}

h1, h3 {
    color: rgb(255, 255, 255);
    z-index: 500;
    font-size: 3vh;
    align-self: center;
}

div, section, p {
    background-color: black; /* default, but sometimes needed */
    color: white;
}

.title{
    color: #ffffff;
}

.hero-body {
    background-color: black
}

.box {
    background-color: transparent;
    color: white;
}

.container {
    background-color: black
}

.button {
    font-size: 2vh;
    font-weight: bold;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #ffffff;
    border-radius: 8px;
    cursor: pointer;
    z-index: 2;
}

.button:hover {
    background: #ff0000;
    border-color: #ffffff;
    color: white;
    box-shadow: 0px 0px 15px rgba(248, 0, 0, 0.8);
}

.input {
  padding: 0.2vh;
  border-radius: 0.1vh;
  border: 1px solid #ccc;
  background-color: #222;
  color: white;
  text-align: center;
}

input {
    color: white;
}

.input:focus {
    border-color: #ffffff;
    box-shadow: 0px 0px 15px rgba(248, 0, 0, 0.8);
}

.input::placeholder{
    color: white;
}

.field {
  color: rgb(255, 255, 255);
}

.navbar {
    background-color: #1a1a1a; /* Dark background */
}

/* Default link color */
.navbar-item {
    color: #ffffff; /* White text */
    transition: all 0.3s ease; /* Smooth hover transition */
}

/* Hover effect */
.navbar-item:hover {
    color: #ffffff !important; /* Orange text on hover */
    background-color: #ff0000 !important; /* Optional: darker background on hover */
}

/* Optional: active/current page link styling */
.navbar-item.is-active {
    color: #00ccff; /* Light blue for active page */
    font-weight: bold;
}

#fade-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  opacity: 1;
  transition: opacity 1s ease-in-out;
  pointer-events: none; /* Disabled until fade starts */
  z-index: 9999;
}