/* Semantic Html Styling */

.header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    grid-area: hdr;
}

.nav {
    position: fixed;
    top: 1em;
    right: 1em;
    grid-area: nav;
}

.main {
    gap: 20em;
    height: 100%;
    justify-content: center;
    grid-area: main;
}

.footer {
    justify-content: space-between;
    align-items: end;
    padding: 0.1em;
    grid-area: ftr;
}

/* Header Related Styling */

.main-title {
    background-image: url(https://media.graphassets.com/resize=fit:clip,height:720,width:1280/output=format:webp/3jpQ4ljjRcGCAfNdzVUG);
    background-color: rgba(255, 255, 255, 0.253);
    color: transparent;
    background-clip: text;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 12em;
    text-align: center;
    filter: contrast(1);
    
    transform: matrix3d(
        1, 0, 0, 0,
        0, 1, 0, -0.003,
        0, 0, 1, 0,
        0, 0, 0, 1.5);
}

/* Nav Related Styling */

.nav-container {
    height: 100%;
    align-items: center;
    gap: 3em;
}

.your-hours-div {
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: 2em;
}

.your-hours-div a {
    display: inline-block;
    width: inherit;
    height: inherit;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    text-decoration: none;
}

@media (prefers-color-scheme: dark) {
    .main-title {
        -webkit-text-stroke: 2px white;
    }

    .your-hours-div a:visited {
        color: white;
    }

    .your-hours-div a:link {
        color: white;
    }

    .date-and-times-div a:visited {
        color: white;
    }

    .date-and-times-div a:link {
        color: white;
    }

    .nav-div::after {
        display: block;
        content: "";
        position: relative;
        top: 0.8em;
        width: 100%;
        height: 1px;
        background-color: white;
    }

    .footer a:link {
        color: white;
    }

    .footer a:visited {
        color: white;
    }
}

@media (prefers-color-scheme: light) {
    .main-title {
        -webkit-text-stroke: 2px black;
    }

    .your-hours-div a:visited {
        color: black;
    }

    .date-and-times-div a:visited {
        color: black;
    }

    .date-and-times-div a:link {
        color: black;
    }

    .your-hours-div a:link {
        color: black;
    }

    .nav-div::after {
        display: block;
        content: "";
        position: relative;
        top: 0.8em;
        width: 100%;
        height: 1px;
        background-color: black;
    }

    .footer a:link {
        color: black;
    }

    .footer a:visited {
        color: black;
    }
}

.date-and-times-div {
    text-align: center;
    width: 100%;
    font-size: 2em;
}

.date-and-times-div a {
    display: inline-block;
    width: inherit;
    height: inherit;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    text-decoration: none;
}

/* Main Related Styling */

/* Main Background */

.main::before {
    display: block;
    position: absolute;
    content: "";
    width: 110%;
    height: 225%;
    filter: blur(3em);
    z-index: -2;
    background: linear-gradient(to bottom, rgba(0, 119, 119, 0.062), rgba(102, 60, 255, 0.137));
}

.hours-div-container.color::before, .hours-div-container.color::after, .dates-div-container.color::before , .dates-div-container.color::after {
    display: inline-block;
    content: "";
    position: absolute;
    width: 40em;
    height: 40em;
    min-width: 40em;
    min-height: 40em;
    border-radius: 100%;

    filter: blur(10em);
    z-index: -1;
}

.hours-div-container.color::before {
    transform: translateX(15em) translateY(20em);
    background: linear-gradient(to top right, rgba(255, 145, 0, 0.219) 50%, rgba(251, 255, 192, 0.233) 50%);
}

.hours-div-container.color::after {
    transform: translateX(-20em) translateY(-5em);
    background: linear-gradient(to bottom right, rgba(0, 0, 255, 0.2) 50%, rgba(255, 0, 0, 0.2) 50%);
}

.dates-div-container.color::before {
    transform: translateX(-15em) translateY(-30em);
    background: linear-gradient(to top right, rgba(255, 117, 181, 0.219) 50%, rgba(0, 255, 255, 0.233) 50%);
}

.dates-div-container.color::after {
    transform: translateX(10em) translateY(5em);
    background: linear-gradient(to right, rgba(0, 238, 255, 0.219) 50%, rgba(61, 255, 55, 0.233) 50%);
}

/* Main Content */

.hours-div-container {
    align-items: center;
    gap: 10em;
    opacity: 0;
    transition: all 2s;
}

.hours-div-container.visible {
    opacity: 1;
}

.hours-div-container h2 {
    width: fit-content;
    text-align: center;
    font-size: 5em;
}

.hours-div {

    justify-content: space-evenly;
    width: 50%;
    height: 30em;
    min-width: 90ch;
    min-height: fit-content;
    padding-left: 5em;
    padding-right: 5em;
}

.hours-div p {
    font-size: 3em;
}

.dates-div-container {
    opacity: 0;
    transition: all 2s;
    align-items: center;
}

.dates-div-container.visible {
    opacity: 1;
}

.dates-div-container h2 {
    width: fit-content;
    text-align: center;
    font-size: 5em;
}

.dates-div {
    justify-content: space-evenly;
    width: 50%;
    height: fit-content;
    min-width: 90ch;
    min-height: fit-content;
    padding-top: 3em;
    padding-bottom: 3em;
    padding-left: 5em;
    padding-right: 5em;
}

.dates-div p {
    font-size: 3em;
}

/* Footer Related Styling */

.footer a {
    text-decoration: none;
    transition-duration: 0.7s;
}

.footer a:hover {
    color: red;
}