html {
  background-color: rgb(242, 242, 242);
/*overflow-x: hidden*/
}

body {
  margin: 0;
}

body, h1, h2, h3, h4, h5, h6, p {
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  font-size: 1.2rem;
  font-size: min(max(1.1rem, 3vw), 1.4rem);
  line-height: 1.5;
  color: rgb(40, 40, 40);
}

.text {
  padding-top: 3rem;
  margin-right: auto;
  margin-left: auto;
  max-width: clamp();
  ma8x-width: 90% }

div.style-1 {
  width: 44rem;
  max-width: 85%;
  margin-top: calc(1rem + 1vw);
  margin-right: auto;
  margin-left: auto;
  padding: 0 0.5rem
}
  
div.style-2 {
  margin-top: calc(4rem + 1vw);
  margin-bottom: 0
}

h1.style-1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-size: min(max(1.4rem, 4vw), 1.7rem);
  font-weight: 500
}

h2.style-2 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

h2.style-3 {
  margin-top: 5rem;
  margin-bottom: 0;
  font-weight: 400
}

.contact {
  margin-top: 3rem;
  padding: 0;
  list-style: none;
  color: rgb(252, 107, 53)
}


img {
  margin: auto;
  display: block;
  max-width: 100%
}

.frame {
  margin-top: 0;
  padding-top: calc(60px + 2vw);
  padding-bottom: 2rem;
  background-color: rgb(242, 242, 242);
  text-align: center;
}

.frame-2 {
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  width: 90%;
  max-width: 1200px;
  text-align: center;
  transition: 0.5s
}

@media screen and (max-width: 540px) {
  .frame-2 {
    width: 100%;
}}

.frame img {
  margin-bottom: 7%;
  mar8gin-bottom: min(max(1rem, 8vw), 5rem);
  border-radius: 10px;
  border-radius: min(max(1.6vw), 14px);
  transition: 0.5s
}

@media screen and (max-width: 540px) {
  .frame img{
    border-radius: 0;
    
}}

.frame figure img { margin-bottom: calc(15px + 2vw) }
figure { margin: auto; width: 100%; margin-bottom: calc(50px + 2vw) }
figcaption { font-size: calc(1.025rem + 0.2vw) }



/* -------------------
   Navigation Elements
   ------------------- */

/* General Styles */
nav ul li a {
  text-decoration: none }

nav ul {
  list-style: none }



/* Navbar Top
   ---------- */

/* General Styles */
.nav-top {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  background-color: hsla(225, 65%, 10%, 0.20); /* Legacy Fallback 0.15 with inver */
  backgro8und-color: oklch(65% 0.284 90 / 50.5%);
  backgro8und-image: linear-gradient(rgba(215, 215, 215, 0.3), rgba(185, 185, 185, 0.3));
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  line-height: 1;
  text-shadow: 0 0 3px rgba(255, 255, 220, 0.2);
  -webkit-backdrop-filter: saturate(185%) contrast(125%) invert(20%) brightness(115%) hue-rotate(-5deg) blur(20px);
          backdrop-filter: saturate(185%) contrast(125%) invert(20%) brightness(115%) hue-rotate(-5deg) blur(20px);
 
  box-shadow: inset 0   1px  0px      hsla(180, 100%, 99%, 0.25), /* Top Shine */
              inset 0  10px 15px      hsla(180, 100%, 99%, 0.3), /* Gradient Shine */
              inset 0  -1px  3px      hsla(180, 100%, 99%, 0.3), /* Bottom Shine */
              
                    0 -26px 10px 25px rgba(100, 100, 100, 0.12),
                    0 -26px 20px 25px rgba(100, 100, 100, 0.1),
                    0 -26px 30px 25px rgba(100, 100, 100, 0.08); /* Layered Drop Shadow */





  bo8x-shadow: 0     -26px  30px 25px rgba(100, 100, 100, 0.15),
               0     0.1px 0.4px      rgba(0, 0, 0, 0.02),
               0.1px 0.3px   1px      rgba(0, 0, 0, 0.02),
               0.1px 0.6px 1.7px      rgba(0, 0, 0, 0.03),
               0.2px   1px 2.9px      rgba(0, 0, 0, 0.03) }


.nav-top ul {
  padding: 0; /* Reset Default Left Padding */
  margin:  0; /* Reset Default Top & Bottom Margins */
  text-align: center;
  -webkit-backdrop-filter: saturate(200%);
  backdrop-filter: saturate(200%) }


/* Nav Item Spacing  */
.nav-top ul li {
  display: inline-block; /* Align navigation items horizontally; (Remove list bullet points) */
  padding: 15px 4px 13px 4px }


/* Anchor Styles (Button Shape) */
.nav-top ul li a {
  padding: 4px 9px 3px 10px;
  color: rgba(255, 255, 255, 0.6);
  bor5der: 1px solid rgba(255, 255, 255, 1);
  border-radius: 6px;
  bac5kdrop-filter: saturate(100%) contrast(100%) brightness(110%) blur(20px);
	tra1nsition: 0.2s ease-in } /* Start Fade-Out Slow (Trailing Effect) */


/* Hover & Active States */
.nav-top ul li a:hover,
.nav-top ul li a.active {
  color: rgba(255, 255, 255, 0.8) }


/* Hover State */
.nav-top ul li a:hover {
  trans1ition: 0.5s ease-out; /* Start Fade-In Fast */

  bor8der: 1px solid rgba(255, 255, 255, 0);
  background-color: hsla(0, 0%, 0%, 0.225); /* Future: (background-color: transparent); backdrop-filter: brightness(80%) */
  -webkit-backdrop-filter: blur(20px) contrast(120%);
          backdrop-filter: blur(20px) contrast(120%);

  tran8sition: backdrop-filter 5s ease }


/* Active State */
.nav-top ul li a.active {
  font-weight: 500;
  cursor: pointer }


.nav-top ul li a:hover,
.nav-top ul li a.active {
  text-shadow: 0 0 5px rgba(255, 255, 200, 0.5) }


.nav-top ul li a.active:hover {
  background-color: initial;
  -webkit-backdrop-filter: none;
  backdrop-filter: none }





/* ------
   Footer
   ------ */



/* General Styles */
footer ul {
  list-style: none;
  transition: 0.5s }


/* Social Media Links */
.social-links {
  text-align: center;
  pad8ding-left: 0; /* Remove Default */
  margin-top: 5rem;  transition: 0.5s;
  margin-bottom: 5rem;
  transition: 0.5s } /* Remove Default */

.social-links li {
  transition: 0.5s;
  display: inline-block }

.social-links li a {
  transition: 0.5s;
  border: 1px solid rgba(0, 0, 0, 0) }

.social-icon {
  display: inline-block;
  width: 75px;
  transition: 0.5s;
  height: 75px;  transition: 0.5s;
  border-radius: 50% }

.social-links .icon {
  width: 50px;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  opacity: 0.25;
  transition: 0.5s;
  hei8ght: 50px }

.social-links .icon:hover {
  filter: invert(100%);
  opacity: 1;
  transition: 0.5s
  }


.social-links li a:hover {
  background-color: orange;
  border: 1px solid rgba(255, 150, 0, 1);
  padding: 0;
  transition: 0.5s }

.social-icon:hover {
  box-shadow: 0 0 8px 0 rgba(50, 50, 50, 0.15);
  transition: 0.5s }









#h1-sitemap { max-width: fit-content; margin: auto }

#h1-sitemap h1 {
  display: block;
  margin-top: 3em;
  font-weight: 400;
  text-align: center
}

#h1-sitemap h2 {
  margin-top: 5em;
  font-size: 1.2em;
}

#url { color: red }

a { text-decoration: none }

#sitemap ul {
  padding-left: 0;
  list-style: none;
}

#sitemap ul li { margin-top: 0.5em }

nav#sitemap {
  margin: auto;
  margin-top: 4em;
}

#h1-sitemap #emoji-banner {
  font-family: Avenir Next;
  font-size: 4em;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.15);
}

#h1-sitemap #emoji {
  vertical-align: 6px;
  font-size: 0.82em;
  color: black;
}

#flags {
  display: flex;
  margin-top:    5em;
  margin-bottom: 5em;
  justify-content: center;
}

#flags a {
  background: white;
  border-radius: 0.5em;
  padding: 2em;
  gap: 14px;
}

#blue-yellow {
  margin: auto;
  margin-top: 1em;
  height: 36px;
  width:  54px;
}

#blue-yellow { background: linear-gradient(180deg, rgb(0, 87, 184) 50%, rgb(255, 215, 0) 50%) }

.flag-text {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  font-variant: all-small-caps;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(130, 130, 130);
  text-align: center;
  text-decoration: none;
  line-height: 1.2
}

@media (min-width: 250px) {
  #flags a { grid-auto-flow: column }
}