/* Basic reset and typography */

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

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

body {
    font-family: "Roboto", sans-serif;
    /* background: linear-gradient(to right, #eeeeee, #000000); */
    background: linear-gradient(to right, #e6e6e6, #1a1a1a);
    line-height: 1.5;
}

main {
    background: linear-gradient(to right, #e6e6e6, #1a1a1a);
    color: #fff;
    /* width: 100%; */
    height: 86vh;
    /* flex-grow: 1; */
    /* font-size: 500%; */
    font-size: min(12vh, 24vw);
    /* 100% of viewport height */
    display: flex;
    text-align: center;
    /* Centers text horizontally within the header */
    /* Flexbox for vertical centering */
    /* Enables flexbox layout */
    justify-content: center;
    /* Centers content horizontally within the flex container */
    align-items: center;
    /* Centers content vertically within the flex container */
}

footer {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    /* color: #777; */
    padding: 0vh;
    height: 3.5vh;
    width: 100%;
    font-size: min(1.5vh, 5vw);
    background: linear-gradient(to right, #e6e6e6, #1a1a1a);
    color: #ffffff;
    /* margin-top: 40px; */
}

/* --- Base Navigation Styles --- */

/* Main container for the navigation */
nav {
    background: linear-gradient(to right, #1a1a1a, #e6e6e6);
    /* display: flex; */
    justify-content: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    width: 100%;
    height: 3.5vh;

}

/* Base styles for all navigation links */
nav a {
    color: #ffffff;
    /* font-weight: bold; */
    text-decoration: none;
    transition: background 0.3s;
    /* important */
    height: 3.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Base styles for all unordered lists in the navigation */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- Specific Styles --- */

/* Top-level list specific styles */
nav ul.nav {
    display: flex;
}

nav ul.nav>li {
    position: relative;
    width: 100vw;
    /* important */
    height: 3.5vh;
}

/* Specific padding for top-level links */
nav>a {
    padding: 0px 0px;
}

nav ul.nav>li>a {
    padding: 0;
    display: block;
}

/* --- Hover States --- */

/* General hover for non-dropdown links */
nav>a:hover {
    background: #000000;
}

/* Hover for top-level list items (no background change) */
nav ul.nav>li>a:hover {
    background: #808080;
}

/* Hover for dropdown menu items */
nav ul.nav li ul.dropdown-menu li a:hover {
    background: #808080;
}

/* --- Dropdown Menu --- */

/* Dropdown menu container */
nav ul.nav li ul.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #1a1a1a, #e6e6e6);
    width: 100vw;
    z-index: 999;
}

/*
  This is the key change for the "click away" functionality.
  The dropdown now shows when the 'active' class is present on the list item.
*/
nav ul.nav li.dropdown.active>ul.dropdown-menu {
    display: block;
}

/* Individual dropdown items */
nav ul.nav li ul.dropdown-menu li a {
    font-size: min(2vh, 10vw);
}

/* --- Dropdown Toggle Icon --- */

/* Base styles for dropdown toggle links */
nav ul.nav li>a.dropdown-toggle {
    display: flex;
    align-items: center;
}

/* Base styles for dropdown toggle links */
nav ul.nav li>a.dropdown-toggle::before {
    content: "MENU";
    /* font-weight: bold; */
    font-size: min(2vh, 10vw);
}

/*
  This is the key change for the "click away" functionality.
  The icon now changes when the 'active' class is present.
*/
nav ul.nav li.dropdown.active>a.dropdown-toggle::before {
    content: "CLOSE";
}

.special-box {
    color: #ffffff;
    opacity: 0.15;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 3.5vh;
}