/******************************************************************************
Table of contents

1. Global styles
  1.1. Font and colour themes
  1.2. General
  1.3. Skip links
2. Typography and layout
  2.1. General
  2.2. Header
  2.3. Navigation
  2.4. Main content
  2.5. Footer
3. Components
   3.1. Scrollbars
   3.1. Parallax images
   3.2. Buttons
******************************************************************************/

/*=============================================================================
1. Global styles
=============================================================================*/

/*-----------------------------------------------------------------------------
1.1. Fonts and colour themes
-----------------------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hind@300&display=swap");

:root {
  /* Theme fonts. */
  --font-heading: "Oswald";
  --font-body: "Hind";

  /* Theme colours.
  Source: https://htmlcolorcodes.com/color-picker/ */
  --color-accent-1: #b61e3b;
  --color-accent-1-shade-1: #9f1a34;
  --color-accent-1-shade-2: #89162c;
  --color-accent-1-shade-3: #721325;
  --color-accent-1-shade-4: #5b0f1d;
  --color-accent-1-shade-5: #440b16;
  --color-accent-1-shade-6: #2d070f;
  --color-accent-1-shade-7: #170407;
  --color-accent-1-tint-1: #bf3a54;
  --color-accent-1-tint-2: #c8566c;
  --color-accent-1-tint-3: #d17284;
  --color-accent-1-tint-4: #db8f9d;
  --color-accent-1-tint-5: #e4abb5;
  --color-accent-1-tint-6: #edc7ce;
  --color-accent-1-tint-7: #f6e3e6;
  --color-accent-2: #455561;
  --color-accent-2-shade-1: #3c4a55;
  --color-accent-2-shade-2: #344049;
  --color-accent-2-shade-3: #2b353d;
  --color-accent-2-shade-4: #232b31;
  --color-accent-2-shade-5: #1a2024;
  --color-accent-2-shade-6: #111518;
  --color-accent-2-shade-7: #090b0c;
  --color-accent-2-tint-1: #5c6a75;
  --color-accent-2-tint-2: #748089;
  --color-accent-2-tint-3: #8b959c;
  --color-accent-2-tint-4: #a2aab0;
  --color-accent-2-tint-5: #b9bfc4;
  --color-accent-2-tint-6: #d1d5d7;
  --color-accent-2-tint-7: #e8eaeb;
  --color-accent-3: #047940;
  --color-accent-3-shade-1: #046a38;
  --color-accent-3-shade-2: #035b30;
  --color-accent-3-shade-3: #034c28;
  --color-accent-3-shade-4: #023c20;
  --color-accent-3-shade-5: #022d18;
  --color-accent-3-shade-6: #011e10;
  --color-accent-3-shade-7: #010f08;
  --color-accent-3-tint-1: #238a58;
  --color-accent-3-tint-2: #439b70;
  --color-accent-3-tint-3: #62ab88;
  --color-accent-3-tint-4: #82bca0;
  --color-accent-3-tint-5: #a1cdb7;
  --color-accent-3-tint-6: #c0ddcf;
  --color-accent-3-tint-7: #e0eee7;
}

/*-----------------------------------------------------------------------------
1.2. General
-----------------------------------------------------------------------------*/

/* Widths include border, padding, and content. */
*,
*::after,
*::before {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

/*-----------------------------------------------------------------------------
1.3. Skip links
-----------------------------------------------------------------------------*/

.skip-link {
  background-color: black;
  color: white;
  left: -100vw;
  padding: 0 0.5em;
  position: absolute;
  text-decoration: none;
  top: 1rem;
  z-index: 999;
}
.skip-link:focus {
  left: auto;
}

/*=============================================================================
2. Typography and layout
=============================================================================*/

/*-----------------------------------------------------------------------------
2.1. General
-----------------------------------------------------------------------------*/

body {
  font-family: var(--font-body), sans-serif;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-heading), sans-serif;
  line-height: 1.25em;
  margin: 0;
}
h1 {
  color: var(--color-accent-1-shade-1);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
h2 {
  color: var(--color-accent-1);
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
h3 {
  color: var(--color-accent-1-tint-1);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

kbd {
  background-color: #eee;
  border: 1px solid #bbb;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  color: #333;
  display: inline-block;
  line-height: 1;
  padding: 2px 3px;
  white-space: nowrap;
}

/*-----------------------------------------------------------------------------
2.2. Header
-----------------------------------------------------------------------------*/

header {
  align-items: flex-end;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  transform-style: preserve-3d;
  z-index: -1;
}
.logo-contact {
  background-color: #ffffffc0;
  border: 3px solid var(--color-accent-3);
  border-radius: 10px;
  font-family: var(--font-heading), sans-serif;
  font-size: 1.2rem;
  padding: 1rem;
  position: absolute;
  top: 5rem;
}
.wsb-logo {
  min-width: 60px;
  max-width: 230px;
  width: 100%;
}
address {
  font-style: normal;
  margin-top: 0.5rem;
  position: relative;
  white-space: pre-wrap;
}

/*-----------------------------------------------------------------------------
2.3. Navigation
-----------------------------------------------------------------------------*/

@media only screen and (max-width: 728px) {
  #landmark-nav {
    display: none;
  }
}
nav {
  --transition-duration: 150ms;

  background-color: var(--color-accent-2-tint-7);
  padding: 0.5rem 1rem;
  width: max-content;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  margin: 0.5rem 0;
  text-decoration: none;
}
nav a {
  color: black;
  line-height: 1.25em;
  text-decoration: none;
  transition:
    background-color var(--transition-duration) ease-in,
    color var(--transition-duration) ease-in;
}
nav a::after {
  background-color: currentColor;
  content: "";
  display: block;
  height: 0.1em;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-duration) ease-in;
}
/* Note: Order of :hover, :focus, and :active matters! Typically, a user will
first hover over an element, then bring it into focus, then activate it.
:active only gets triggered with mouse; keyboard has absolutely no effect. */
nav a:focus,
nav a:active {
  color: var(--color-accent-1);
  outline-color: var(--color-accent-1);
}
/* Override focus and active. */
nav a:hover {
  color: var(--color-accent-1-tint-3);
  outline-color: var(--color-accent-1-tint-3);
}
nav a:hover::after,
nav a:focus::after,
nav a:active::after {
  transform: scaleX(1);
}

#landmark-hamburger {
  display: none;
  width: 100%
}
@media only screen and (max-width: 728px) {
  #landmark-hamburger {
    display: block;
  }
}
#landmark-hamburger ul {
  align-items: center;
  column-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#landmark-hamburger li {
  margin: 0;
}
.menu-hamburger {
  --line-width: 3px;
/* border: 1px solid red; */
  align-items: center;
  display: flex;
  flex-direction: column;
  height: calc(var(--line-width) * 5);
  justify-content: center;
  width: calc(var(--line-width) * 6.5);
}
.menu-hamburger__top-bun,
.menu-hamburger__meat,
.menu-hamburger__bottom-bun {
  background-color: #333;
  border-radius: var(--line-width);
  height: var(--line-width);
  transition: color var(--transition-duration) ease-in;
  width: calc(var(--line-width) * 6);
}
.menu-hamburger__top-bun,
.menu-hamburger__bottom-bun {
  transition:
    border-radius var(--transition-duration) ease-in,
    margin var(--transition-duration) ease-in;
}
.menu-hamburger__top-bun {
  border-top-left-radius: var(--line-width);
  border-top-right-radius: var(--line-width);
  margin-bottom: var(--line-width);
}
.menu-hamburger:hover .menu-hamburger__top-bun,
.menu-hamburger:hover .menu-hamburger__bottom-bun {
    background-color: #f49b2f;
}
.menu-hamburger:hover .menu-hamburger__top-bun {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.menu-hamburger__bottom-bun {
  border-bottom-left-radius: var(--line-width);
  border-bottom-right-radius: var(--line-width);
  margin-top: var(--line-width);
}
.menu-hamburger:hover .menu-hamburger__bottom-bun {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.menu-hamburger__meat {
  transition:
    height var(--transition-duration) ease-in,
    width var(--transition-duration) ease-in;
}
.menu-hamburger:hover .menu-hamburger__meat {
  background-color: #6d4b33;
  height: calc(var(--line-width) * 1.33);
  width: calc(var(--line-width) * 6.5);
}

/*-----------------------------------------------------------------------------
2.4. Main content
-----------------------------------------------------------------------------*/

main {
  background-attachment: fixed;
  background-color: var(--color-accent-3-tint-6);
  background-image: url("../images/background-green.jpg");
  background-position: center;
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.5em;
}
.main-content {
  background-color: white;
  max-width: 60ch;
  padding: 0.5rem 1rem;
}

/*-----------------------------------------------------------------------------
2.5. Footer
-----------------------------------------------------------------------------*/

footer {
  background-color: var(--color-accent-2);
  color: white;
  display: flex;
  font-size: 0.75rem;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.25rem 1rem;
}

/*=============================================================================
3. Components
=============================================================================*/

/*-----------------------------------------------------------------------------
3.1. Scrollbars
-----------------------------------------------------------------------------*/

::-webkit-scrollbar {
  background-color: white;
  width: 1rem;
}
::-webkit-scrollbar-track {
  background: var(--color-accent-2-tint-5);
  border-radius: 100vw;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
}
::-webkit-scrollbar-thumb {
  background: var(--color-accent-1);
  border-radius: 100vw;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
}

/*-----------------------------------------------------------------------------
3.2. Parallax images
-----------------------------------------------------------------------------*/

.parallax-container {
  --layer1-zindex: 0px;
  --layer2-zindex: -4px;
  --layer3-zindex: -6px;
  --layer1-scale: 100%;
  --layer2-scale: 110%;
  --layer3-scale: 120%;

  background-color: #cdf;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 100px;
}
@media only screen and (min-width: 769px) {
  .parallax-container {
    --layer1-zindex: 0px;
    --layer2-zindex: -10px;
    --layer3-zindex: -20px;
    --layer1-scale: 100%;
    --layer2-scale: 110%;
    --layer3-scale: 120%;
  }
}
.parallax-layer1,
.parallax-layer2,
.parallax-layer3 {
  object-fit: cover;
  position: absolute;
  width: 100%;
}
.parallax-layer1 {
  transform: translateZ(var(--layer1-zindex)) scale(var(--layer1-scale));
}
.parallax-layer2 {
  bottom: 0px;
  transform: translateZ(var(--layer2-zindex)) scale(var(--layer2-scale));
}
.parallax-layer3 {
  bottom: 0px;
  transform: translateZ(var(--layer3-zindex)) scale(var(--layer3-scale));
}

/*-----------------------------------------------------------------------------
3.3. Buttons
-----------------------------------------------------------------------------*/