* { padding: 0px; margin: 0px; box-sizing: border-box; }
html { scroll-behavior: smooth; }
a { all: unset; }

@font-face {
    font-family: 'Garet';
    src: url('Assets/Garet-Book.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GaretHeavy';
    src: url('Assets/Garet-Heavy.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


/* Desktop First */

:root {
    /* Nav bar */
    --nav-padding: 1rem 2rem;
    --nav-imgsize: clamp(0px, 16rem, 40vh);

    --nav-mainoptionsgap: 5rem;
    --nav-mainoptionsfs: 1rem;

    --nav-socialoptionsgap: 1.5rem;
    --nav-socialoptionsimgsize: 2rem;

    --nav-dropdownwidth: 20rem;
    --nav-dropdownpadding: 1.5rem;

    /* Main */

    --gutter-inline: clamp(16px, 6vw, 80px);
    --gutter-block:  clamp(16px, 5vh, 72px);

    --content-max: 1320px;

    --main-imgmargin: 3rem 0rem;

    --main-headermargin: 1rem 0rem;
    --main-mainheaderfs: 2rem;
    --main-mainsubheaderfs: 1.6rem;
    --main-subheaderfs: 1.3rem;
    --main-titlefs: 1.3rem;
    --main-titlemargin: 2rem 8rem;
    --main-subtitlefs: 1.3rem;
    --main-subtitlemargintop: 2rem;

    --main-textmargin: 1rem 0rem;
    --main-textfs: 1rem;
    
    /* Footer */

    --footer-padding: 5vh 40vh;
    --footer-imgsize: 15rem;
    --footer-infofs: 1.2rem;
    --footer-generalmargintop: 1rem;
}

/* Nav Bar */

nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    
    font-family: "Garet";
    background-color: #ffffff;
    
    padding: var(--nav-padding);
    z-index: 100;
}
nav img {
    cursor: pointer;
    width: var(--nav-imgsize);
}
nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
}

.main-options {
    display: flex;
    justify-content: center;
    align-content: center;

    gap: var(--nav-mainoptionsgap);
    font-size: var(--nav-mainoptionsfs);
}

.main-options > li {
    cursor: pointer;
    position: relative;
}
.main-options > li::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background-color: currentColor;

    transform: scaleX(0);
    transform-origin: center;
    transition: all 0.3s ease;
}
.main-options > li:hover::after {
    transform: scaleX(1);
}
.main-options i {
    transition: all 0.2s ease;
}

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    position: absolute;
    top: 100%;              
    left: 50%;                
    transform: translateX(-50%) translateY(-20px);
    cursor: default;
    border-radius: 1vh;
    display: flex;
    flex-direction: column;

    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    width: var(--nav-dropdownwidth);
    padding: var(--nav-dropdownpadding);
    flex-direction: column;
    background-color: #ffffff;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.4);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.dropdown-arrow {
    display: none;
}
.dropdown-content li:not(.dropdown-separator) {
    margin: 6px 0px;
    cursor: pointer;
    transition: all 0.1s ease;
}
.dropdown-content li:hover:not(.dropdown-separator) {
    transform: translateX(15px);
}
.dropdown-content li:hover:not(.dropdown-separator) .dropdown-arrow {
    display: inline-block;
    animation: dropdown-arrow-appear 0.4s forwards ease;
}
.dropdown:hover .dropdown-content {
    transform:translateX(-50%) translateY(0);
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}
.dropdown:hover i {
    transform: rotate(180deg);
}
.dropdown-separator {
    font-family: "GaretHeavy";
    border-bottom: 1px solid gray;
    margin-bottom: 20px;
    margin-top: 10px;
    cursor: default;
}
@keyframes dropdown-arrow-appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.socials-options {
    justify-content: right;
    gap: var(--nav-socialoptionsgap);
}
.socials-options img {
    width: var(--nav-socialoptionsimgsize);
    transition: all 0.2s ease;
}
.socials-options img:hover {
    transform: translateY(-5px);
    cursor: pointer;
}

/* Main */

main {
    display: flow-root;
    font-family: 'Garet';
    color: #0b1215;

    margin-inline: auto;
    max-width: var(--content-max);
    padding: var(--gutter-block) var(--gutter-inline);
}

.button-container {
    display: flex;
    justify-items: center;
    justify-content: center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 60px;
  border-radius:40px;
  font: 600 16px "Garet", sans-serif;
  text-decoration:none;
  line-height:1;
  transition:transform .3s cubic-bezier(.23,1,.32,1), 
             box-shadow .3s, background-color .3s, color .3s, border-color .3s;
  border:2px solid transparent;
  cursor: pointer;
}
.btn-secondary{
  background:#fff;
  border-color:#0b1215;
  color:#0b1215;
}
.btn-secondary:hover{
  background:#0b1215;
  border-color:#0b1215;
  color:#fff;
  box-shadow: rgba(0,0,0,.25) 0 8px 15px;
  transform: translateY(-2px);
}
.btn-arrowmargin {
    margin-left: 6px;
}

h1 {
    font-size: var(--main-mainheaderfs);
    margin: var(--main-headermargin);
    font-weight: bold;
    color: #0b1215;
}
h2 {
    font-size: var(--main-mainsubheaderfs);
    font-weight: bold;
    color: #747474;
}
h3 {
    font-size: var(--main-subheaderfs);
    margin: var(--main-headermargin);
    font-weight: bold;
    color: #747474;
}
h4 {
    text-align: center;
    font-size: var(--main-titlefs);
    margin: var(--main-titlemargin);
    font-weight: bold;
    color: #0b1215;
}
h5 {
    font-size: var(--main-subtitlefs);
    margin-top: var(--main-subtitlemargintop);
    font-weight: bold;
    color: #0b1215;
}
p {
    font-size: var(--main-textfs);
    margin: var(--main-textmargin);
    color: #0b1215;
}
.bold {
    font-weight: bold;
}
.main-image {
    display: block;
    margin-inline: auto;
    width: 70%;
    margin-block: var(--main-imgmargin, 1.25rem);
    clear: both;
}
.right-image {
    float: right;
    inline-size: clamp(220px, 35%, 420px);
    margin: 0 0 1rem 1.25rem;
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    shape-outside: inset(0 round 8px);
}
.left-image {
    float: left;
    inline-size: clamp(120px, 20%, 320px);
    margin: 0 0 1rem 1.25rem;
    display: block;
    max-width: 50%;
    height: auto;
    border-radius: 8px;
    shape-outside: inset(0 round 8px);
}

/* Footer */

footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "info links";

    height: auto;
    padding: var(--footer-padding);
    background-color: #0b1215;
}

.footer-info {
    display: flex;
    flex-direction: column;
    grid-area: info;
}
.footer-info img {
    width: var(--footer-imgsize);
}
.footer-location {
    font-family: 'Garet';
    color: #bebdbd;
    font-size: var(--footer-infofs);
    margin-top: var(--footer-generalmargintop);
    transition: all 0.1s ease;
}
.footer-location:hover {
    cursor: pointer;
    color: #e6e6e6;
}
.footer-scheduleheader {
    font-family: 'Garet';
    color: #bebdbd;
    font-size: var(--footer-infofs);
    margin-top: var(--footer-generalmargintop);
    font-weight: bold;
}
.footer-schedule {
    display: flex;
    width: 80%;
    justify-content: space-between;
    
    font-family: 'Garet';
    color: #bebdbd;
    font-size: var(--footer-infofs);

    margin-top: var(--footer-generalmargintop);
    border-bottom: solid 1px #bebdbd;
}

.footer-links {
    display: flex;
    flex-direction: column;
    grid-area: links;
}
.footer-linksheader {
    font-family: 'Garet';
    color: #bebdbd;
    font-size: var(--footer-infofs);
    margin-top: var(--footer-generalmargintop);
    font-weight: bold;
}
.footer-linkscontainer {
    display: flex;
    flex-direction: column;
    font-family: 'Garet';
    color: #bebdbd;
    font-size: var(--footer-infofs);
    margin-top: var(--footer-generalmargintop);
    text-decoration: underline;
}
.footer-linkscontainer a {
    transition: all 0.1s ease;
}
.footer-linkscontainer a:hover {
    cursor: pointer;
    color: #e6e6e6;
}


/* Mobile */

@media (max-width: 1024px) {

    :root {
        /* Nav bar */
        --nav-padding: 1rem 2rem;
        --nav-imgsize: clamp(0px, 16rem, 40vh);

        --nav-mainoptionsgap: 5rem;
        --nav-mainoptionsfs: 1rem;

        --nav-socialoptionsgap: 1.5rem;
        --nav-socialoptionsimgsize: 2rem;

        --nav-dropdownwidth: 20rem;
        --nav-dropdownpadding: 1.5rem;

        /* Main */

        --gutter-inline: clamp(16px, 6vw, 80px);
        --gutter-block:  clamp(16px, 5vh, 72px);

        --content-max: 1320px;

        --main-imgmargin: 3rem 0rem;

        --main-headermargin: 1rem 0rem;
        --main-mainheaderfs: 1rem;
        --main-mainsubheaderfs: 0.8rem;
        --main-subheaderfs: 0.8rem;
        --main-titlefs: 0.8rem;
        --main-titlemargin: 1rem 1rem;
        --main-subtitlefs: 0.8rem;
        --main-subtitlemargintop: 2rem;

        --main-textmargin: 1rem 0rem;
        --main-textfs: 0.6rem;

        /* Footer */

        --footer-padding: 1vh 3vh;
        --footer-imgsize: 10rem;
        --footer-infofs: 1rem;
        --footer-generalmargintop: 0.8rem;
    }

    /* Nav bar */
    nav {
        display: none;
    }

    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:12px 30px;
        border-radius:40px;
        font: 600 12px "Garet", sans-serif;
        text-decoration:none;
        line-height:1;
        transition:transform .3s cubic-bezier(.23,1,.32,1), 
                    box-shadow .3s, background-color .3s, color .3s, border-color .3s;
        border:2px solid transparent;
        cursor: pointer;
    }
    .btn-secondary{
        background:#fff;
        border-color:#0b1215;
        color:#0b1215;
    }
    .btn-secondary:hover{
        background:#0b1215;
        border-color:#0b1215;
        color:#fff;
        box-shadow: rgba(0,0,0,.25) 0 8px 15px;
        transform: translateY(-2px);
    }

    /* Footer */

    footer {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "info" "links";
    }
    .footer-info {
        text-align: center;
        justify-content: center;
        justify-items: center;
        align-content: center;
        align-items: center;
    }
    .footer-links {
        text-align: center;
        justify-content: center;
        justify-items: center;
        align-content: center;
        align-items: center;
    }
}