/* The below code is importing a Google Fonts stylesheet for the fonts "Kanit" and "Russo One" with
various font weights and styles. The imported stylesheet will be used to apply these fonts to the
HTML elements on the webpage. */
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Russo+One&display=swap");

/* This code is defining CSS custom properties (variables) using the `:root` pseudo-class. These
variables are being used to set values for various aspects of the design such as fonts, sizes,
colors, filters, overlays, shadows, and borders. By using custom properties, the code aims to make
it easier to maintain and update the design elements throughout the CSS file. */
/* Variables */
:root {
  /* Fonts & Sizes */
  --primary-font: "Russo One", sans-serif;
  --secondary-font: "Kanit", sans-serif;

  /* Size clamping */
  --font-h1: clamp(1.5rem, 11vw, 3rem);
  --font-h2: clamp(1rem, 5.25vw, 1.75rem);
  --font-h3: clamp(0.75rem, 4vw, 1.5rem);
  --font-p: clamp(0.75rem, 4vw, 1.25rem);

  /* Colours */
  --bg-color: #0d1637;
  --primary-color: #17bfbf;
  --secondary-color: #ff8a5b;
  --tertiary-color: #3f3268;
  --tertiary-highlight-color: #053362;
  --glassmorphic-color: rgba(255, 255, 255, 0.15);

  /* Filters & Overlays */
  --glassmorphic-filter: blur(0.15rem);
  --section-bg-overlay-one: linear-gradient(
    rgba(3, 3, 3, 0.2),
    rgba(3, 3, 3, 0.2)
  );
  --section-bg-overlay-two: linear-gradient(
    rgba(3, 3, 3, 0.2),
    rgba(3, 3, 3, 0.2)
  );

  /* Shadows & Borders */
  --drop-shadow: drop-shadow(0px 2px 1px black);
  --drop-shadow-alt: drop-shadow(0px 0px 8px var(--primary-color));
}

/* The below code is a CSS reset code. It sets the margin and padding of all elements to 0 and uses
the border-box value for the box-sizing property. This helps in creating a consistent starting point
for styling elements across different browsers by removing default browser styling. */
/* Resets */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* The code below is styling a custom scrollbar for webkit browsers (such as Chrome and Safari). It
sets the width of the scrollbar to 7.5px, makes the scrollbar track transparent, and styles the
scrollbar thumb with a linear gradient background and border radius of 10px. */

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7.5px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(52, 204, 196)), to(rgb(202, 83, 206)));
  background: linear-gradient(rgb(52, 204, 196), rgb(202, 83, 206));
  border-radius: 10px;
}


/* Global Styles & Fonts */
/* The code below is a set of CSS rules that define global styles and fonts for the site. */

/* Below, the CSS code is styling the HTML and body elements of a webpage. Here is a breakdown of what
each part of the code is doing: */

html {
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: white;
  font-family: var(--secondary-font);
}

/* The below code is a CSS stylesheet defining styles for various HTML elements. Here's a breakdown of
what each part of the code is doing: */
h1,
h2 {
  font-family: var(--primary-font);
  font-size: var(--font-h1);
  letter-spacing: 0.1rem;
  color: var(--primary-color);
  -webkit-filter: var(--drop-shadow);
          filter: var(--drop-shadow);
}

h2 {
  font-size: var(--font-h2);
  margin-bottom: 0.75rem;
  color: var(--secondary-color);
  -webkit-filter: var(--drop-shadow);
          filter: var(--drop-shadow);
}

h3 {
  font-size: var(--font-h3);
  color: bisque;
  -webkit-filter: var(--drop-shadow);
          filter: var(--drop-shadow);
}

p {
  font-size: var(--font-p);
  color: black;
  font-weight: 300;
  letter-spacing: 0.075rem;
  z-index: 98;
  -webkit-filter: var(--drop-shadow-alt) var(--drop-shadow-alt);
          filter: var(--drop-shadow-alt) var(--drop-shadow-alt);
}

/* This section of code is a CSS code snippet. It sets the text decoration of anchor elements (`a`) to none
and the color to a custom variable `--primary-color`. It also removes the list-style from list items
(`li`). */

a {
  text-decoration: none;
  color: var(--primary-color);
}

li {
  list-style: none;
}

/* This CSS code is styling the header, article, and footer elements on the webpage. Here is a
breakdown of what each part of the code is doing: */
header,
article,
footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-behavior: smooth;
}

article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100vh;
  width: 100vw;
  padding: 0rem 1rem 1rem 0rem;
}

footer {
  margin-top: auto;
}


/* Custom Styles */
/* The CSS code below is creating a custom loader animation to ensure the site is fully visible before showing. */

/* Load screen */

/* Custom Styles */
/* The CSS code below is creating a custom loader animation to ensure the site is fully visible before showing. */

/* Load screen */

/*
  .loader
  A full-screen loader that is initially hidden and can be activated by adding the .loader-active class.
  
  Properties:
  - width: 100vw; (full viewport width)
  - height: 100vh; (full viewport height)
  - position: fixed; (fixed position relative to the viewport)
  - display: none; (initially hidden)
  - align-items: center; (center items vertically)
  - justify-content: center; (center items horizontally)
  - background: var(--bg-color); (background color from CSS variable)
  - z-index: 100; (stacking order)
 */
.loader {
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-color);
  z-index: 300;
}

/*
  .loader-active
  Activates the loader by changing display to flex.
 */
.loader-active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/*
  .loader::before
  A pseudo-element representing the primary part of the loader animation.
  
  Properties:
  - content: ""; (empty content)
  - position: absolute; (absolute positioning)
  - width: 5rem; (width of the element)
  - height: 1.75rem; (height of the element)
  - background: var(--primary-color); (background color from CSS variable)
  - border-radius: 100px; (rounded corners)
  - animation: loader 1s 0.5s infinite ease-in; (animation with delay)
 */
.loader::before {
  content: "";
  position: absolute;
  width: 5rem;
  height: 1.75rem;
  background: var(--primary-color);
  border-radius: 100px;
  -webkit-animation: loader 1s 0.5s infinite ease-in;
          animation: loader 1s 0.5s infinite ease-in;
}

/*
  .loader::after
  A pseudo-element representing the secondary part of the loader animation.
  
  Properties:
  - content: ""; (empty content)
  - position: absolute; (absolute positioning)
  - width: 4.5rem; (width of the element)
  - height: 1.75rem; (height of the element)
  - background: var(--secondary-color); (background color from CSS variable)
  - border-radius: 100px; (rounded corners)
  - animation: loader 1s infinite ease-in; (animation without delay)
 */
.loader::after {
  content: "";
  position: absolute;
  width: 4.5rem;
  height: 1.75rem;
  background: var(--secondary-color);
  -webkit-animation: loader 1s infinite ease-in;
          animation: loader 1s infinite ease-in;
  border-radius: 100px;
}

/*
  @keyframes loader
  Defines the keyframes for the loader animation.
  
  Keyframes:
  - 0%: scale(0.85) translateY(-15px); (initial state)
  - 25%: scale(1.05) translateY(0px); z-index: 1; (first intermediate state)
  - 50%: scale(1.05) translateY(15px); (second intermediate state)
  - 75%: scale(1.05) translateY(0px); z-index: 0; (third intermediate state)
  - 100%: scale(0.85) translateY(-15px); (final state)
 */
@-webkit-keyframes loader {
  0% {
    -webkit-transform: scale(0.85) translateY(-15px);
            transform: scale(0.85) translateY(-15px);
  }

  25% {
    -webkit-transform: scale(1.05) translateY(0px);
            transform: scale(1.05) translateY(0px);
    z-index: 1;
  }

  50% {
    -webkit-transform: scale(1.05) translateY(15px);
            transform: scale(1.05) translateY(15px);
  }

  75% {
    -webkit-transform: scale(1.05) translateY(0px);
            transform: scale(1.05) translateY(0px);
    z-index: 0;
  }

  100% {
    -webkit-transform: scale(0.85) translateY(-15px);
            transform: scale(0.85) translateY(-15px);
  }
}
@keyframes loader {
  0% {
    -webkit-transform: scale(0.85) translateY(-15px);
            transform: scale(0.85) translateY(-15px);
  }

  25% {
    -webkit-transform: scale(1.05) translateY(0px);
            transform: scale(1.05) translateY(0px);
    z-index: 1;
  }

  50% {
    -webkit-transform: scale(1.05) translateY(15px);
            transform: scale(1.05) translateY(15px);
  }

  75% {
    -webkit-transform: scale(1.05) translateY(0px);
            transform: scale(1.05) translateY(0px);
    z-index: 0;
  }

  100% {
    -webkit-transform: scale(0.85) translateY(-15px);
            transform: scale(0.85) translateY(-15px);
  }
}

/* Header, Nav styles and fixed footer styles */

/* #wrapper
  - Sets the width to 100% of the viewport width.
  - Fixes the position of the element.
  - Uses flexbox for layout.
  - Sets the height to 3rem.
  - Justifies content space-between and centers items.
  - Adds padding and sets z-index to 99. */
#wrapper {
  width: 100vw;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 3rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.25rem 0.85rem 0.5rem 0.5rem;
  z-index: 99;
}

/* #wrapper > a > img
  - Adds padding-top using clamp for responsive design.
  - Sets the width using clamp for responsive design.
  - Applies drop-shadow, brightness, and contrast filters. */
#wrapper > a > img {
  padding-top: clamp(1.75rem, 50%, 3rem);
  width: clamp(3.5rem, 7.5vw, 5rem);
  -webkit-filter: drop-shadow(-2px 2px 1px rgb(0, 0, 0)) brightness(200%) contrast(200%);
          filter: drop-shadow(-2px 2px 1px rgb(0, 0, 0)) brightness(200%) contrast(200%);
}

/* .text-label i
  - Adds padding-top using clamp for responsive design.
  - Sets the font size using clamp for responsive design.
  - Applies drop-shadow filter. */
.text-label i {
  padding-top: clamp(1rem, 20%, 2.75rem);
  font-size: clamp(2.75rem, 7vw, 4rem);
  -webkit-filter: drop-shadow(-2px 2px 2px rgb(43, 43, 43));
          filter: drop-shadow(-2px 2px 2px rgb(43, 43, 43));
}

/* nav
  - Initially hides the navigation.
  - Adds padding-top and sets position to absolute.
  - Sets height to 100% of the viewport height.
  - Sets z-index to -1 and background color.
  - Sets width to 100%, positions at top-left, and centers text.
  - Sets font size using clamp for responsive design. */
nav {
  display: none;
  padding-top: 3rem;
  position: absolute;
  height: 100vh;
  z-index: -1;
  background-color: var(--tertiary-color);
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* #nav-toggle:checked ~ .text-label i:last-child,
  nav,
  nav li
  - Displays the navigation and list items when nav-toggle is checked. */
#nav-toggle:checked ~ .text-label i:last-child,
nav,
nav li {
  display: block;
}

/* #nav-toggle:not(:checked) ~ nav li
  - Hides the list items when nav-toggle is not checked. */
#nav-toggle:not(:checked) ~ nav li {
  display: none;
}

/* #nav-toggle:not(:checked) ~ nav,
  nav li
  - Translates navigation and list items upwards and applies transition. */
#nav-toggle:not(:checked) ~ nav,
nav li {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: -webkit-transform 250ms ease-in;
  transition: -webkit-transform 250ms ease-in;
  -o-transition: transform 250ms ease-in;
  transition: transform 250ms ease-in;
  transition: transform 250ms ease-in, -webkit-transform 250ms ease-in;
}

/* #nav-toggle:checked ~ nav,
  nav li
  - Resets translation and applies transition when nav-toggle is checked. */
#nav-toggle:checked ~ nav,
nav li {
  -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
          transform: translateY(0%);
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: -webkit-transform 250ms ease-in-out;
  -o-transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
}

/* #nav-toggle:checked ~ .text-label i:first-child
  - Hides the first child icon when nav-toggle is checked. */
#nav-toggle:checked ~ .text-label i:first-child {
  display: none;
}

/* #nav-toggle,
  .text-label i:last-child
  - Hides the nav-toggle and last child icon. */
#nav-toggle,
.text-label i:last-child {
  display: none;
}

/* nav li
  - Adds padding to list items. */
nav li {
  padding: 0.5rem;
}

/* nav li:hover,
  nav li:hover a
  - Changes background color and text color on hover. */
nav li:hover,
nav li:hover a {
  background-color: var(--bg-color);
  color: var(--secondary-color);
}

/* #socials
  - Sets width to 100% of the viewport width.
  - Uses flexbox for layout and centers content.
  - Fixes position at the bottom and sets z-index to 100.
  - Adds bottom margin. */
#socials {
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  bottom: 0;
  z-index: 100;
  background-color: var(--glassmorphic-color);
  -webkit-backdrop-filter: var(--glassmorphic-filter);
          backdrop-filter: var(--glassmorphic-filter);
  padding: 0.5rem;
}

/* .social-icons
  - Sets width to 75% of the viewport width.
  - Uses flexbox for layout and justifies content evenly. */
.social-icons {
  width: 75vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

/* .social-icons i
  - Sets font size using clamp for responsive design.
  - Applies drop-shadow filter and opacity.
  - Sets color with !important. */
.social-icons i {
  font-size: clamp(2.25rem, 7.5vw, 3rem);
  -webkit-filter: var(--drop-shadow) opacity(0.65);
          filter: var(--drop-shadow) opacity(0.65);
  color: var(--secondary-color) !important;
}

/* .social-icons i:hover
  - Applies drop-shadow filter, opacity, and changes color on hover. */
.social-icons i:hover {
  -webkit-filter: var(--drop-shadow) opacity(0.65);
          filter: var(--drop-shadow) opacity(0.65);
  color: bisque !important;
}

/* Main and Section styles */

/* 
  Styles for various div elements within specific IDs (#ymir, #odin, #thor, #tyr, #angraboda, #freyja, #freyr, #althing):
  - Flexbox layout with column direction, centered content, and self-alignment.
  - Rounded borders with specific colors and thickness.
  - Width set to 90% of the viewport width.
  - Maximum height set to 60% of the viewport height with vertical scrolling enabled.
  - Smooth scrolling behavior.
  - Padding and margin adjustments.
  - Text color and background color using CSS variables.
  - Glassmorphic effect applied using backdrop-filter.
  - z-index set to 97 for stacking context.
*/
#ymir div,
#odin div,
#thor div,
#tyr div,
#angraboda div,
#freyja div,
#freyr div,
#althing div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: safe center;
      -ms-flex-pack: safe center;
          justify-content: safe center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  border-radius: 0.5rem;
  border-top: 0.05rem solid hsla(0, 0%, 100%, 0.35);
  border-right: 0.05rem solid hsla(0, 0%, 55%, 0.4);
  border-bottom: 0.05rem solid hsla(0, 0%, 55%, 0.4);
  border-left: 0.05rem solid hsla(0, 0%, 100%, 0.35);
  width: 90vw;
  max-height: 60vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  padding: 1rem;
  margin-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 5rem;
  color: var(--secondary-color);
  background-color: var(--glassmorphic-color);
  -webkit-backdrop-filter: var(--glassmorphic-filter);
          backdrop-filter: var(--glassmorphic-filter);
  z-index: 97;
}

/* 
  Additional styles for div elements within #althing:
  - Overflow set to visible.
  - Maximum height set to fit-content.
  - Top margin increased to 2rem.
*/
#althing div {
  overflow: visible;
  max-height: -webkit-fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
  margin-top: 2rem;
}

/* 
  Styles for h2 elements within article elements, excluding those with ID #hero:
  - Top margin set to 5rem.
  - Left margin set to 1rem.
  - Font size adjusted using clamp to be responsive between 2rem and 5rem based on viewport width.
*/
article:not(#hero) h2 {
  margin-top: 5rem;
  margin-left: 1rem;
  font-size: clamp(2rem, 12vw, 5rem);
}
#odin div,
#thor div,
#tyr div,
#angraboda div,
#freyja div,
#freyr div,
#althing div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: safe center;
      -ms-flex-pack: safe center;
          justify-content: safe center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  border-radius: 0.5rem;
  border-top: 0.05rem solid hsla(0, 0%, 100%, 0.35);
  border-right: 0.05rem solid hsla(0, 0%, 55%, 0.4);
  border-bottom: 0.05rem solid hsla(0, 0%, 55%, 0.4);
  border-left: 0.05rem solid hsla(0, 0%, 100%, 0.35);
  width: 90vw;
  max-height: 60vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  padding: 1rem;
  margin-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 5rem;
  color: var(--secondary-color);
  background-color: var(--glassmorphic-color);
  -webkit-backdrop-filter: var(--glassmorphic-filter);
          backdrop-filter: var(--glassmorphic-filter);
  z-index: 97;
}

#althing div {
  overflow: visible;
  max-height: -webkit-fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
  margin-top: 2rem;
}

article:not(#hero) h2 {
  margin-top: 5rem;
  margin-left: 1rem;
  font-size: clamp(2rem, 12vw, 5rem);
}

/* Hero section */


/* #god-menu:
  - Hides the god menu by default.
  - Sets a high z-index to ensure it appears above other elements when displayed.
*/
#god-menu {
  display: none;
  z-index: 101;
}

/* #hero:
  - Sets a background image and overlay for the hero section.
  - Positions the background image and scales it to cover the entire section.
*/
#hero {
  background: var(--section-bg-overlay-two),
    url("../images/sections/legends_of_asgard_header.avif") no-repeat 37.5% 50% / cover;
}

/* .hero-title:
  - Sets a responsive width using the clamp function.
  - Adds padding and margin for spacing.
*/
.hero-title {
  width: clamp(10rem, 95vw, 50rem);
  padding: 2rem 3rem 1rem 4rem;
  margin-bottom: 3rem;
}

.hero-title h2 {
  color: var(--primary-color);
  font-size: clamp(1.5rem, 6vw, 3rem);
}

/* .hero-blurb:
  - Sets a responsive width using the clamp function and makes it important.
  - Adds padding and centers the text.
  - Transforms text to uppercase.
*/
.hero-blurb {
  width: clamp(10rem, 60vw, 100rem) !important;
  padding: 1rem;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  text-transform: uppercase;
}

/* .hero-blurb > h3:
  - Sets the text color to the secondary color variable.
*/
.hero-blurb > h3 {
  color: var(--secondary-color);
}

/* YMIR section */
/* #ymir:
  - Sets a background image and overlay for the Ymir section.
  - Positions the background image and scales it to cover the entire section.
*/
#ymir {
  background: var(--section-bg-overlay-one),
    url("../images/sections/ymir2.avif") no-repeat 55% 65% / cover;
}

/* ODIN section */
/* #odin:
  - Sets a background image and overlay for the Odin section.
  - Positions the background image and scales it to cover the entire section.
*/
#odin {
  background: var(--section-bg-overlay-two),
    url("../images/sections/odin_section.avif") no-repeat 50% 65% / cover;
}

/* THOR section */
/* #thor:
  - Sets a background image and overlay for the Thor section.
  - Positions the background image and scales it to cover the entire section.
*/
#thor {
  background: var(--section-bg-overlay-one),
    url("../images/sections/thor2.avif") no-repeat 37.5% 65% / cover;
}

/* TYR section */
/* #tyr:
  - Sets a background image and overlay for the Tyr section.
  - Positions the background image and scales it to cover the entire section.
*/
#tyr {
  background: var(--section-bg-overlay-two),
    url("../images/sections/tyr_catches_fenrir.avif") no-repeat 65% 65% / cover;
}

/* ANGRABODA section */
/* #angraboda:
  - Sets a background image and overlay for the Angraboda section.
  - Positions the background image and scales it to cover the entire section.
*/
#angraboda {
  background: var(--section-bg-overlay-one),
    url("../images/sections/angraboda3.avif") no-repeat 40% 65% / cover;
}

/* FREYJA section */
/* #freyja:
  - Sets a background image and overlay for the Freyja section.
  - Positions the background image and scales it to cover the entire section.
*/
#freyja {
  background: var(--section-bg-overlay-two),
    url("../images/sections/freyja.avif") no-repeat 50% 65% / cover;
}

/* FREYR section */
/* #freyr:
  - Sets a background image and overlay for the Freyr section.
  - Positions the background image and scales it to cover the entire section.
*/
#freyr {
  background: var(--section-bg-overlay-one),
    url("../images/sections/freyr.avif") no-repeat 60% 65% / cover;
}

/* YGGDRASSIL section */
/* 
  Styles for the Yggdrassil section and tooltips in the Legends of Asgard project.

  #yggdrassil:
    - Sets the background with an overlay and an image.
    - Uses flexbox to center its content both vertically and horizontally.
*/
#yggdrassil {
  background: var(--section-bg-overlay-two),
    url("../images/sections/yggdrassil_section.avif") no-repeat 52.5% 65% /
      cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* 
  #yggy:
    - Uses flexbox to center its content both vertically and horizontally.
    - Adds a top margin.
*/
#yggy {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 4rem;
}

/* 
  .yggy h2:
    - Sets the color and font size for h2 elements inside the .yggy class.
    - Adds margin around the element.
*/
.yggy h2 {
  color: var(--tertiary-alternative);
  font-size: clamp(1.25rem, 6vw, 3rem) !important;
  margin: 0 1rem 1rem;
}

/* 
  Tooltip headers (h3):
    - Sets the color and font size for h3 elements inside various tooltip classes.
*/


.asgard-tooltip h3,
.muspelheim-tooltip h3,
.vanaheim-tooltip h3,
.jotunheimr-tooltip h3,
.niflheim-tooltip h3,
.alfheim-tooltip h3,
.midgard-tooltip h3,
.nidavellir-tooltip h3,
.helheim-tooltip h3
.info-tooltip h3 {
  color: white;
  font-size: clamp(0.75rem, 7.5vw, 2rem);
  margin: 0 1rem;
}

/* 
  Tooltip containers:
    - Sets the width, position, display, alignment, and margin for various tooltip containers.
*/
.asgard-tooltip,
.muspelheim-tooltip,
.vanaheim-tooltip,
.jotunheimr-tooltip,
.niflheim-tooltip,
.alfheim-tooltip,
.midgard-tooltip,
.nidavellir-tooltip,
.helheim-tooltip {
  width: clamp(20rem, 75%, 50rem) !important;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-grid-column-align: center;
      justify-self: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 1.25rem 0;
}


.info-tooltip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 2rem 0;
}

.info-tooltip h3,
.info-tooltip i {
  font-size: clamp(0.5rem, 7.5vw, 3rem);
  -ms-grid-column-align: center;
      justify-self: center;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}



/* 
  Tooltip text:
    - Initially hidden.
    - Sets the width, height, overflow behavior, background color, text color, padding, border radius, shadow, alignment, position, and z-index for tooltip text elements.
*/
.info-tooltip .info-tooltext {
  visibility: hidden;
  background-color: var(--bg-color);
  color: var(--primary-color);
  text-align: left;
  padding: 0.75rem;
  border-radius: 5px;
  -webkit-filter: drop-shadow(0px 2px 1px black);
          filter: drop-shadow(0px 2px 1px black);
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  position: absolute;
  z-index: 1;
}


.asgard-tooltip .asgard-tooltext,
.muspelheim-tooltip .muspelheim-tooltext,
.vanaheim-tooltip .vanaheim-tooltext,
.jotunheimr-tooltip .jotunheimr-tooltext,
.niflheim-tooltip .niflheim-tooltext {
  visibility: hidden;
  margin-left: 6rem;
  width: clamp(15rem, 75%, 30rem);
  max-height: 7.5rem;
  overflow-y: scroll;
  background-color: var(--bg-color);
  color: var(--primary-color);
  text-align: left;
  padding: 0.75rem;
  border-radius: 5px;
  -webkit-filter: drop-shadow(0px 2px 1px black);
          filter: drop-shadow(0px 2px 1px black);
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  position: absolute;
  z-index: 1;
}

.alfheim-tooltip .alfheim-tooltext,
.midgard-tooltip .midgard-tooltext,
.nidavellir-tooltip .nidavellir-tooltext,
.helheim-tooltip .helheim-tooltext {
  visibility: hidden;
  width: clamp(15rem, 75%, 30rem);
  margin-left: 6rem;
  max-height: 7.5rem;
  overflow-y: scroll;
  background-color: var(--bg-color);
  color: var(--primary-color);
  text-align: left;
  padding: 0.75rem;
  border-radius: 5px;
  -webkit-filter: drop-shadow(0px 2px 1px black);
          filter: drop-shadow(0px 2px 1px black);
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  position: absolute;
  z-index: 1;
}

/* 
  Tooltip text visibility on hover:
    - Makes the tooltip text visible when hovering over the tooltip container.
*/
.asgard-tooltip:hover .asgard-tooltext,
.muspelheim-tooltip:hover .muspelheim-tooltext,
.vanaheim-tooltip:hover .vanaheim-tooltext,
.jotunheimr-tooltip:hover .jotunheimr-tooltext,
.niflheim-tooltip:hover .niflheim-tooltext,
.alfheim-tooltip:hover .alfheim-tooltext,
.midgard-tooltip:hover .midgard-tooltext,
.nidavellir-tooltip:hover .nidavellir-tooltext,
.helheim-tooltip:hover .helheim-tooltext,
.info-tooltip:hover .info-tooltext {
  visibility: visible;
}

/* 
  Tooltip images:
    - Sets the width, border radius, and padding for images inside various tooltip classes.
*/
.asgard-tooltip img,
.muspelheim-tooltip img,
.vanaheim-tooltip img,
.jotunheimr-tooltip img,
.niflheim-tooltip img,
.alfheim-tooltip img,
.midgard-tooltip img,
.nidavellir-tooltip img,
.helheim-tooltip img {
  width: clamp(6rem, 20vw, 10rem);
  border-radius: 50%;
  margin: 0 2rem;
}

/* 
  Tooltip container direction:
    - Sets the flex direction to row-reverse for specific tooltip containers.
*/
.asgard-tooltip,
.muspelheim-tooltip,
.vanaheim-tooltip,
.jotunheimr-tooltip,
.niflheim-tooltip {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

/* ALTHING section */
/* 
  #althing 
  Styles for the main container with id "althing". It includes a background image with a linear gradient overlay, 
  full viewport height, padding, and flexbox properties for centering content.
*/
#althing {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))),
    url("../images/sections/contact_bg.avif") no-repeat 45% 95% / cover;
  background: -o-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("../images/sections/contact_bg.avif") no-repeat 45% 95% / cover;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("../images/sections/contact_bg.avif") no-repeat 45% 95% / cover;
  min-height: 100vh;
  padding-top: 3rem;
  padding-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 
  #althing > h2 
  Styles for the h2 element inside the "althing" container. It includes responsive font size and top padding.
*/
#althing > h2 {
  font-size: clamp(1.25rem, 10vw, 3rem);
  padding-top: 3rem;
}

/* 
  #althing > h3 
  Styles for the h3 element inside the "althing" container. It includes responsive font size.
*/
#althing > h3 {
  font-size: clamp(1rem, 5vw, 2rem);
}

/* 
  #althing > p 
  Styles for the p element inside the "althing" container. It sets the text color to the primary color variable.
*/
#althing > p {
  color: var(--primary-color);
}

/* 
  #althing-form 
  Styles for the form inside the "althing" container. It includes flexbox properties for layout.
*/
#althing-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 
  #althing > div > p 
  Styles for the p element inside a div within the "althing" container. It includes maximum width and centered text alignment.
*/
#althing > div > p {
  max-width: 60rem;
  text-align: center;
}

/* 
  #althing form input 
  Styles for input elements inside the form within the "althing" container. It includes full width, height, margin, padding, 
  font properties, border radius, background color, and text color.
*/
#althing form input {
  width: 100%;
  height: 2.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
  font-family: var(--secondary-font);
  font-size: clamp(0.75rem, 4vw, 1.75rem);
  border-radius: 50px;
  border: 0;
  background-color: var(--tertiary-highlight-color);
  color: var(--secondary-color);
}

/* 
  #althing form textarea, #althing form button 
  Styles for textarea and button elements inside the form within the "althing" container. It includes full width, padding, 
  font properties, background color, and text color.
*/
#althing form textarea,
#althing form button {
  width: 100%;
  padding: 1rem;
  font-family: var(--secondary-font);
  font-size: clamp(0.75rem, 4vw, 1.75rem);
  background-color: var(--tertiary-highlight-color);
  color: var(--primary-color);
  border: 0;
}

/* 
  #althing form textarea 
  Additional styles for textarea elements inside the form within the "althing" container. It includes border radius, 
  text color, margin, padding, and disables resizing.
*/
#althing form textarea {
  border-radius: 10px;
  color: var(--secondary-color);
  margin-bottom: 1rem;
  padding-top: 0.35rem;
  resize: none;
}

/* 
  #althing form input::placeholder, #althing form textarea::placeholder 
  Styles for placeholder text inside input and textarea elements within the form in the "althing" container. It sets the text color.
*/
#althing form input::-webkit-input-placeholder, #althing form textarea::-webkit-input-placeholder {
  color: var(--primary-color);
}
#althing form input::-moz-placeholder, #althing form textarea::-moz-placeholder {
  color: var(--primary-color);
}
#althing form input:-ms-input-placeholder, #althing form textarea:-ms-input-placeholder {
  color: var(--primary-color);
}
#althing form input::-ms-input-placeholder, #althing form textarea::-ms-input-placeholder {
  color: var(--primary-color);
}
#althing form input::placeholder,
#althing form textarea::placeholder {
  color: var(--primary-color);
}

/* 
  #althing form button 
  Additional styles for button elements inside the form within the "althing" container. It includes responsive width, 
  background color, border radius, font size, text color, and font weight.
*/
#althing form button {
  width: clamp(7.5rem, 50vw, 20rem);
  background-color: var(--tertiary-color);
  border-radius: 50px;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  color: white;
  font-weight: bold;
}

/* 
  #althing form button:hover 
  Styles for button elements on hover inside the form within the "althing" container. It changes the background color and text color.
*/
#althing form button:hover {
  background-color: var(--tertiary-highlight-color);
  color: var(--secondary-color);
}

/* 
  #althing form input:focus-within::placeholder, #althing form textarea:focus-within::placeholder 
  Styles for placeholder text inside focused input and textarea elements within the form in the "althing" container. It changes the text color.
*/
#althing form input:focus-within::-webkit-input-placeholder, #althing form textarea:focus-within::-webkit-input-placeholder {
  color: var(--secondary-color);
}
#althing form input:focus-within::-moz-placeholder, #althing form textarea:focus-within::-moz-placeholder {
  color: var(--secondary-color);
}
#althing form input:focus-within:-ms-input-placeholder, #althing form textarea:focus-within:-ms-input-placeholder {
  color: var(--secondary-color);
}
#althing form input:focus-within::-ms-input-placeholder, #althing form textarea:focus-within::-ms-input-placeholder {
  color: var(--secondary-color);
}
#althing form input:focus-within::placeholder,
#althing form textarea:focus-within::placeholder {
  color: var(--secondary-color);
}

/* 
  #althing form input:focus-within, #althing form textarea:focus-within 
  Styles for focused input and textarea elements within the form in the "althing" container. It changes the background color.
*/
#althing form input:focus-within,
#althing form textarea:focus-within {
  background-color: var(--tertiary-color);
}

/* Althing form response page */

/* 
  #thankyou
  - Applies a background with a linear gradient and an image.
  - The image is positioned at 45% horizontally and 95% vertically, and covers the entire element.
*/
#thankyou {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))),
    url("../images/sections/contact_bg.avif") no-repeat 45% 95% / cover;
  background: -o-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("../images/sections/contact_bg.avif") no-repeat 45% 95% / cover;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("../images/sections/contact_bg.avif") no-repeat 45% 95% / cover;
}

/* 
  #back2asgard
  - A flex container with space-between alignment and centered items.
  - Width is responsive, ranging from 7.5rem to 20rem.
  - Background color is set to a tertiary color variable.
  - Rounded corners with a 50px radius.
  - Font size is responsive, ranging from 1.25rem to 1.75rem.
  - Padding and margin are applied for spacing.
  - Text color is white and bold.
*/
#back2asgard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: clamp(7.5rem, 50vw, 20rem);
  background-color: var(--tertiary-color);
  border-radius: 50px;
  font-size: 0.75rem;
  padding: 0.75rem 2.5rem 0.75rem 0.75rem;
  margin-top: 1rem;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  color: white;
  font-weight: bold;
}

/* 
  #back2asgard i
  - Sets the font size of the icon to 3.5rem.
*/
#back2asgard i {
  font-size: 3.5rem;
}

/* 
  #back2asgard:hover
  - Changes the background color to a tertiary highlight color on hover.
*/
#back2asgard:hover {
  background-color: var(--tertiary-highlight-color);
}

/* 
  Responsiveness Props
*/

/* Media Queries for tablets (screen size 768px+) */
@media screen and (min-width: 768px) {
  /* Hides the navigation bar */
  nav {
    display: none;
  }

  /* Adjusts padding for the hero title */
  .hero-title {
    padding-left: 1rem;
  }

  /* Sets margin and width for various div elements */
  #hero div,
  #ymir div,
  #odin div,
  #thor div,
  #tyr div,
  #angraboda div,
  #freyja div,
  #freyr div,
  #yggdrassil div,
  #althing div {
    margin-left: 4rem;
    width: clamp(10rem, 65vw, 130rem);
    -ms-flex-item-align: start;
        align-self: flex-start;
  }

  /* Centers the header container and hides certain elements */
  #wrapper {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 1.5rem;
  }

  #nav-toggle,
  .text-label {
    display: none;
  }

  /* Styles the god menu with fixed positioning and flex layout */
  #god-menu {
    width: 20.5vh;
    margin: 1rem 0.5rem;
    padding: 0.75rem;
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    right: 0;
  }

  /* Styles back-to-top icon with hover effects */
  .b2t i {
    position: absolute;
    z-index: 200;
    bottom: 3.5rem;
    left: -3rem;
    color: var(--primary-color);
    -webkit-filter: opacity(0.75);
            filter: opacity(0.75);
    font-size: 3rem;
  }

  .b2t i:hover {
    color: var(--secondary-color);
  }

  /* Styles image items with borders, grayscale, and hover effects */
  .image-item img {
    width: 100%;
    border-radius: 10px;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    -ms-grid-column-align: center;
        justify-self: center;
    border-top: 2px solid rgba(255, 166, 0, 0.35);
    border-left: 2px solid rgba(10, 235, 216, 0.35);
    border-right: 2px solid rgba(255, 166, 0, 0.35);
    border-bottom: 2px solid rgba(10, 235, 216, 0.35);
  }

  /* Adds 3D transformation effects to the menu list and image items */

  /* 
    .menu-list:
    - Applies 3D transformation settings to the menu list.
    - Uses perspective to give a sense of depth.
  */
  .menu-list {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform: perspective(1750px);
            transform: perspective(1750px);
  }

  /* 
    .image-item:
    - Displays items as flex containers centered both horizontally and vertically.
    - Applies grayscale and brightness filters.
    - Adds a transition effect for smooth changes.
  */
  .image-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-items: center;
    -webkit-filter: grayscale(1) brightness(0.5);
            filter: grayscale(1) brightness(0.5);
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }

  /* 
    .image-item:hover:
    - Removes grayscale and adjusts brightness on hover.
    - Translates the item in 3D space.
  */
  .image-item:hover {
    -webkit-filter: brightness(1) grayscale(0);
            filter: brightness(1) grayscale(0);
    -webkit-transform: translateZ(100px) translateX(-10px);
            transform: translateZ(100px) translateX(-10px);
  }

  /* 
    .image-item:hover + *:
    - Applies filters and 3D transformations to the next sibling element when the image item is hovered.
  */
  .image-item:hover + * {
    -webkit-filter: brightness(0.4);
            filter: brightness(0.4);
    -webkit-transform: translateZ(45px) translateX(-10px) rotateX(-30deg);
            transform: translateZ(45px) translateX(-10px) rotateX(-30deg);
  }

  /* 
    .image-item:has(+ *:hover):
    - Applies filters and 3D transformations to the previous sibling element when the image item is hovered.
  */
  .image-item:has(+ *:hover) {
    -webkit-filter: brightness(0.4);
            filter: brightness(0.4);
    -webkit-transform: translateZ(40px) translateX(-10px) rotateX(30deg);
            transform: translateZ(40px) translateX(-10px) rotateX(30deg);
  }

  /* 
    .image-item a:
    - Positions the anchor element relatively.
    - Displays the anchor as a flex container centered both horizontally and vertically.
    - Aligns items in a column.
  */
  .image-item a {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  /* Shows span on image item hover */
  .image-item span {
    display: none;
    -webkit-filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 6px black);
            filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 6px black);
    position: absolute;
    color: var(--secondary-color);
    font-size: 1.5rem;
    font-weight: 800;
    bottom: 0.75rem;
  }

  .image-item:hover span {
    display: block;
  }

}

/* Media Queries for laptops (screen size 992px+) */
/* Adjusts the width of various div elements */
@media screen and (min-width: 992px) {
  #hero div,
  #ymir div,
  #odin div,
  #thor div,
  #tyr div,
  #angraboda div,
  #freyja div,
  #freyr div,
  #yggdrassil div,
  #althing div {
    width: clamp(10rem, 70vw, 130rem);
  }
}

/* Media Queries for desktops and larger devices (screen size 1200px+) */
/* Further adjusts the width of various div elements */
@media screen and (min-width: 1200px) {
  #hero div,
  #ymir div,
  #odin div,
  #thor div,
  #tyr div,
  #angraboda div,
  #freyja div,
  #freyr div,
  #yggdrassil div,
  #althing div {
    width: clamp(10rem, 75vw, 130rem);
  }
}

/* Media Queries for larger devices and 4k+ devices (screen size 1440px+) */
/* Increases margin and width for various div elements */
@media screen and (min-width: 1440px) {
  #hero div,
  #ymir div,
  #odin div,
  #thor div,
  #tyr div,
  #angraboda div,
  #freyja div,
  #freyr div,
  #yggdrassil div,
  #althing div {
    margin-left: 7.5rem;
    width: clamp(10rem, 80vw, 160rem);
  }
}