body 
{
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #f4f4f4;
}

html 
{
  scroll-behavior: smooth;
}

section 
{
    scroll-margin-top: 8.5rem; /* 136px */
}

ul 
{
    list-style: none;
}

a 
{
    text-decoration: none;
}

#nav-section 
{
    padding-top: 4rem; /* 64px */
    width: 100%;
    box-sizing: border-box;
}

nav 
{
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.125rem; /* 2px */
    font-family: Calibri, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Trebuchet MS", "Noto Sans", "Liberation Sans", sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 3.125rem; /* 10px 50px */
    background-color: #f4f7ff;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    min-height: 3.75rem; /* 60px */
}

#navigation-menu 
{
    display: flex;
}

#navigation-menu li a 
{
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    font-size: 0.75rem; /* 12px */
    color: #666;
    font-weight: 600;
    transition: all 0.3s ease;
}

#navigation-menu li a.active, #navigation-menu li a:hover 
{
    color: white;
    background-color: #d4af37; 
    font-weight: 700;
    border-radius: 8px;
}

/* ------------------------------------------------------------------------------------- */

#logo 
{
  position: absolute;
  left: 2rem; /* 32px */ 
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  line-height: 1.1;
}

#text-logo 
{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#logo-top 
{
  font-size: 0.7rem; /* 11.2px */
  font-weight: 700;
  color: #d4af37;
  text-transform: uppercase;
  letter-spacing: 0.25rem; /* 4px */
  margin-bottom: 0.1rem; /* 1.6px */
}

#logo-main 
{
  font-size: 1.6rem; /* 25.6px */
  font-weight: 800;
  color: #111;
  letter-spacing: 0.1rem; /* 1.6px */
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.4rem; /* 6.4px */
}

#logo-main i 
{
  color: #d4af37;
  font-size: 1.2rem; /* 19.2px */
}

#icon-logo 
{
  display: none;
  line-height: 1;
}

.nav-icon 
{
    height: 2.3rem; /* 36.8px */
    width: auto;           
    display: block;        
    margin: 0 auto;       
}

#logo:hover #logo-main 
{
  color: #d4af37;
  transition: color 0.3s ease;
}

#logo:hover #logo-main i 
{
  transform: rotate(-10deg);
  transition: transform 0.3s ease;
}

@media (max-width: 48rem) /* 768px */
{
  #logo
  {
    left: 1rem; /* 16px */
  }
  
  #text-logo 
  {
    display: none;
  }

  #icon-logo 
  {
    display: block;
  }
}

@media (max-width: 30rem) /* 480px */
{
  .nav-icon 
  {
    height: 2.225rem; /* 35.6px */
  }
}

/* ------------------------------------------------------------------------------------- */

#hamburger 
{
    display: none;
    font-size: 1.5rem; /* 24px */
    cursor: pointer;
    position: absolute;
    right: 1rem; /* 16px */ 
    color: #666;
    line-height: 1;
    transition: all 0.3s ease;
}

@media (max-width: 75rem) /* 1200px */
{
    #navigation-menu 
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 2.75rem; /* 44px */
        left: 0;
        width: 100%;
        background-color: #f4f7ff;
        padding: 0; 
        z-index: 1001;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-1px);
        transition: all 0.4s ease;
    }

    #navigation-menu.active 
    {
        max-height: 31.25rem; /* 500px */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    #navigation-menu li 
    {
        width: 100%;
        text-align: center;
    }

    #navigation-menu li a 
    {
        display: block;
        padding: 1rem; /* 16px */
        font-size: 1rem; /* 16px */
    }

    #navigation-menu li a.active, #navigation-menu li a:hover 
    {
        border-radius: 0; 
    }

    #hamburger 
    {
        display: block;
    }
}

@keyframes clapperBoardBounce 
{
    0% 
    {
        transform: translateY(0);
    }

    20% 
    {
        transform: translateY(-30px);
    }

    40% 
    {
        transform: translateY(0);
    }

    55% 
    {
        transform: translateY(-15px);
    }

    70% 
    {
        transform: translateY(0);
    }

    80% 
    {
        transform: translateY(-8px);
    }

    90% 
    {
        transform: translateY(0);
    }

    100% 
    {
        transform: translateY(0);
    }
}

.bounce 
{
    animation: clapperBoardBounce 0.8s ease;
}