* {
  box-sizing: border-box;
}

:root {
  --color-main: #224952;
  --color-highlight: #3f752d;
  --color-highlight-2: #974422;
  --color-highlight-3: #202a44;
  --color-text: #636363;
  --color-background: #4a6f87;
  --color-svg: brown;
  --color-svg-hover: silver;
}

body {
  line-height: 1.5;
  font-family: "Anton", sans-serif;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

.main {
  scroll-snap-type: y mandatory;
}

.scroll-area {
  scroll-snap-align: start;
}

main {
  margin: 0;
  padding: 0;
  /* max-width: 50rem; */
}

header nav ul {
  margin: 0;
}

.about main {
  display: flex;
  flex-direction: column;

  margin: 0;
  align-items: center;
}

.container {
  height: 100vh;
}

video {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.about img {
  max-width: 600px;
}

li a:hover {
  color: white;
  background-color: pink;
}

li a.href:hover {
  background-color: pink;
}

/* .menu-icon svg {
  width: 80px;
  height: auto;
} */

.menu-icon line {
  stroke: var(--color-main);
  stroke-width: 6px;
  stroke-linecap: round;
  transform-origin: center;
  transition: transform 300ms ease, background-color 300ms;
}

.menu-icon {
  position: fixed;
  inset: 2rem 0 0 1rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  width: 50px;
  height: 50px;
  padding: 10px;
  z-index: 1;
  stroke: var(--color-main);
}

.menu-icon line:first-child {
  transform: translateY(16%);
}

.menu-icon line:last-child {
  transform: translateY(-16%);
}

.menu-icon svg:hover line {
  stroke: var(--color-svg-hover);
}

.visually-hidden {
  display: none;
}

.close line:first-child {
  transform: rotate(135deg);
}

.close line:last-child {
  transform: rotate(-135deg);
}

.close .visually-hidden {
  display: flex;
  position: fixed;
  inset: 0 0 0 0;
  flex-direction: column;
  background-color: var(--color-background);
  justify-content: center;
  align-items: center;
  gap: 2rem;
  font-size: 1.5rem;
}

/* .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
} */

aside,
footer {
  padding: 0 1rem;
  margin: 0 auto;
}

footer {
  margin-top: 3rem;
}

h1,
h2,
h3,
h4 {
  font-family: "Merriweather", serif;
  color: var(--color-highlight-3);
}

h2 {
  background-image: linear-gradient(
    75deg,
    rgb(63, 23, 144) 0%,
    rgb(65, 29, 226) 20%,
    rgb(22, 57, 233) 29%,
    rgb(14, 59, 241) 36%,
    rgb(6, 115, 249) 43%,
    rgb(0, 98, 255) 50%,
    rgb(31, 147, 249) 57%,
    rgb(67, 244, 212) 64%,
    rgb(95, 241, 124) 71%,
    rgb(133, 239, 123) 80%,
    rgb(191, 239, 154) 100%
  );

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

p {
  font-family: "Anton", sans-serif;
  margin-bottom: 2rem;
}

.hero {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  justify-content: center;
  width: 100vp;
  margin: none;
}

.hero .text-overlay {
  position: absolute;
  /* backdrop-filter: blur(2px); */
  inset: 0;
  margin: 0;
}

.text-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2rem, 7vw, 7rem);
  text-shadow: 5px 5px #636363;
}

.hero .text-overlay p {
  font-size: 3rem;
  color: var(--color-highlight-3);
  margin: 0;
}

img {
  width: 100%;
  height: auto;
  /* max-width: 600px; */
  display: block;
}

/* .visually-hidden {
  display: none;
} */

/* ul {
  background-color: #224952;
  display: flex;
  justify-content: space-around;
} */

.world {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 5rem;
}

.earth {
  /* position: absolute; */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 300px;
  height: 300px;
  background-image: url(https://www.h-schmidt.net/map/map.jpg);
  border-radius: 50%;
  background-size: cover;
  box-shadow: -20px -20px 50px 2px #000 inset, 0 0 20px 2px #000;
  animation: spin 30s linear alternate infinite;
  animation-direction: normal;
}

@keyframes spin {
  100% {
    background-position: 100%;
  }
  100% {
    transform: rotate(-23.5deg);
  }
}

ul li {
  margin: 1rem 3rem;
}

.hero-image img {
  max-width: none;
  max-height: 800px;
  height: 100vh;
  width: 100%;
  object-fit: cover;
}

.cards img {
  height: 100%;
  object-fit: cover;
  transition: transform 300ms;
}

.cards img:hover {
  transform: scale(1.15);
}

.cards {
  display: flex;
  flex-direction: column;
  margin: 0 1rem;
  gap: 2rem;
  /* align-items: center; */
  /* flex: 1 1 45%; */
}

.card-row {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.card .text-overlay {
  /* position: relative; */
  /* top: -5rem; */
  display: flex;
  background-color: #224952;
  /* top: -5rem; */
  font-size: 1.25rem;
  padding: 1rem;
  text-align: center;
  margin: 0;
  /* height: 6.5rem; */
}

.card .image-wrapper {
  overflow: hidden;
}

.card {
  margin-bottom: 3rem;
  background-color: #224952;
}

.cardz {
  display: none;
}

.card p {
  text-align: center;
}

.card:hover {
  cursor: pointer;
}

a[href]:hover {
  background-color: #3f752d;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #eeefec;
}

.button:hover {
  background-color: #3f752d;
  cursor: pointer;
}

.button {
  padding: 1rem;
  border: 0.25rem solid var(--button-color);
  border-color: #202a44;
  background-color: #202a;
  transition: background-color 300ms;
  display: inline-block;
}

article {
  margin-bottom: 5rem;
}

/* contact page css */

.contact {
  background-color: #ebedf6;
  color: #202a44;
}

.contact main {
  display: flex;
  flex-direction: column;
}

.contact svg {
  width: 100%;
  height: auto;
}

.contact .image-wrapper {
  max-width: 300px;
  min-width: 100px;
  align-self: center;
}

.contact form {
  display: grid;
}

.contact form > label {
  display: block;
  margin-top: 1rem;
}

.contact form > label:first-of-type {
  margin-top: 0;
}

.contact .name {
  margin-top: 1rem;
}

.contact fieldset {
  display: grid;
  grid-template-columns: min-content 1fr;
  row-gap: 1rem;
  border: none;
  margin: 1rem;
  padding: 0;
  column-gap: 1rem;
}

.contact fieldset legend {
  grid-column: 1 / 3;
  width: 100%;
  margin: 1rem 0;
}

.contact .image-wrapper {
  max-width: 300px;
  height: auto;
  justify-self: center;
}
.contact input[type="checkbox"],
.contact input[type="radio"] {
  appearance: none;
  border: 1px solid black;
  width: 24px;
  height: 24px;
  display: grid;
  align-items: center;
  justify-items: center;
}

.contact input[type="radio"] {
  border-radius: 50%;
}

.contact input[type="radio"]::after {
  display: block;
  content: " ";
  width: 16px;
  height: 16px;
  background-color: #224952;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 300ms;
}

.contact input[type="checkbox"]:checked::after {
  content: " ";
  width: 5px;
  height: 12px;
  border-right: 5px solid #224952;
  border-bottom: 5px solid #224952;
  transform: rotate(37deg);
  transition: 300ms;
  margin-bottom: 7px;
  opacity: 1;
}

.contact input[type="radio"]:checked::after {
  transform: scale(1);
  transition: transform 300ms;
}

.contact form > label,
.contact form textarea {
  /* padding: 5px; */
  font-size: 1rem;
}

.contact button {
  justify-self: center;
}

@media (min-width: 401px) {
  .visually-hidden {
    background-color: #224952;
    display: flex;
    justify-content: space-around;
  }

  .cards {
    /* display: flex; */
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: space-around; */
    /* flex: 1 1 20%; */
  }

  .card .text-overlay {
    font-size: 1.25rem;
  }

  .card {
    flex: 1 1 40%;
    background-color: #224952;
  }

  .panel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95vw;
    height: 100vh;
  }

  .menu-icon {
    display: none;
  }

  .ballroom {
    width: 30vw;
    height: auto;
  }

  .left {
    order: -1;
  }
}

@media (min-width: 601px) {
  .contact form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1.5rem;
  }

  .contact form > label {
    padding: 0;
    margin: 0;
    justify-self: end;
  }

  .contact button {
    grid-column-start: 2;
    justify-self: start;
  }

  .contact .name {
    margin: 0;
  }

  .contact fieldset {
    grid-column-start: 2;
    display: grid;
    grid-template-columns: min-content 1fr;
  }
}

@media (min-width: 801px) {
  .cards {
    flex-wrap: nowrap;
  }

  /* .card {
    width: 22.5vw;
    height: auto;
  } */

  .card .text-overlay {
    font-size: 1rem;
  }
}