@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Special+Elite&display=swap");

/* Scrollbar */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Overall styling */

* {
  scroll-behavior: smooth;
}

body,
html {
  overflow-x: hidden;
}

body {
  background-color: var(--graaMoerk);
}

.grotesk {
  font-family: "aktiv-grotesk", sans-serif;
}

.meno {
  font-family: "meno-banner", serif;
}

.baskerville {
  font-family: "baskerville-display-pt", serif;
}

.special {
  font-family: "Special Elite", cursive;
}

.container {
  padding: 2rem;
}

.row {
  max-width: 1680px;
  margin: 0 auto;
}

.fade-in {
  animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Farvepalette  */

:root {
  --hvid: #f7f7f7;
  --lysBrun: #e7cdb2;
  --brunMoerk: #766556;
  --graa: #7c7c7c;
  --graaMoerk: #252525;
}

/* Side menu styling  */

.menu {
  font-family: "Open Sans", sans-serif;
  position: fixed;
  right: 4rem;
  top: 60%;
  transform: translateY(-40%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 999;
}

.link {
  font-size: 2rem;
  color: var(--hvid);
  text-decoration: none;
  margin-bottom: 1rem;
  font-weight: 100;

  transition: all 0.3s ease;
}

.link:hover {
  transform: scale(1.1);
}

.link:active {
  transform: scale(0.9);
}

.link__selected {
  color: var(--hvid);
  position: relative;
  font-size: 3.5rem;
  font-weight: 500;
}

.link__selected::before {
  content: "¬";
  position: absolute;
  font-size: 3.5rem;
  color: var(--hvid);
  bottom: 0;
  left: -3rem;
  transition: all 0.3s ease;
}

/* Landing page styling */

.landing {
  height: 100vh;
  width: 100vw;
  background-image: url("./img/bg_landing.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.landing__title {
  font-size: 6rem;
  color: var(--hvid);
  font: 200;
  margin-bottom: 3rem;
}

.landing__para {
  font-size: 2.2rem;
  color: var(--hvid);
  max-width: 45rem;
  line-height: 1.2;
  margin-block: 4rem;
}

/* Landing page socials */

.socials__wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 3rem;
  column-gap: 2rem;
}

.socials__link {
  color: var(--hvid);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.3rem;
  transition: all 300ms;
}

.socials__link:hover {
  color: var(--lysBrun);
}

section {
  width: 100vw;
  height: 100vh;
}

#second {
  height: 100vh;
}

#third {
  /* height: auto; */
}

#fourth {
  background-color: var(--graaMoerk);
  height: 50vh;
}

.interactive {
  background-image: url("./img/interactive_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.row_1,
.row_2,
.row_3 {
  height: calc(100% / 3);
  width: 100%;
  display: flex;
}

.fa-solid {
  color: white;
  font-size: 1.5rem;
  padding: 4px;
  background-color: #dcdcdc;
  border-radius: 50%;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  z-index: 1;
  box-shadow: 3px 2px 19px 0px rgba(0, 0, 0, 0.517);
}

.button {
  position: relative;
}

.fa-solid:hover {
  background-color: #bfbfbf;
}

.fa-solid:active {
  background-color: #a3a3a3;
  scale: 0.9;
}

.row_1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 7rem;
  column-gap: 22rem;
}

.row_2 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-left: 7rem;
}

.row_3 {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 18rem;
  padding-left: 7rem;
}

.ryk {
  transform: translateY(2rem);
}

/* Card styling */

.info-card {
  position: absolute;
  background-color: var(--lysBrun);
  color: var(--graaMoerk);
  padding: 12px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  transition: all 200ms ease-in-out;
  visibility: hidden;
  opacity: 0;
  width: 15rem;
  height: auto;
  z-index: 10;
  display: flex;
  flex-direction: column;
}
#card_1 {
  transform: translate(5%, -5%);
}
#card_2 {
  transform: translate(10%, 5%);
}

#card_4 {
  transform: translate(-90%, -110%);
}

#card_5 {
  transform: translate(-95%, -110%);
}

.card__show {
  visibility: visible;
  opacity: 1;
}

.info-card__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.info-card__para {
  font-size: 1.2rem;
  font-weight: 100;
  margin: 1rem 0;
}

.info-card__video {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
  scale: 3;
}

.info-card__video--wrapper {
  width: 100%;
  height: 15rem;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.info-card__img--wrapper {
  display: flex;
  width: 100%;
  height: 15rem;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.info-card__img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
}

.audio {
  width: 100%;
  margin-top: 1rem;
}

#groen {
  scale: 1;
  transition: scale 800ms ease-in-out, transform 600ms ease-in-out;
}

#groen:hover {
  scale: 5;
  transform: translateY(-80px);
}

footer {
  background-image: url("./img/footer.JPG");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100vw;
  height: 60vh;
}

.footer__container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Scroll effect  */

.hidden {
  opacity: 0;
  transition: opacity 2.5s;
}

.show {
  opacity: 1;
  transition: opacity 2.5s;
}

/*


Third section styling


*/

#third {
  height: 250vh;
  background-color: #252525;
}

.history__section {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: calc(100% / 3);
  display: flex;
  flex-direction: column;
  align-content: center;
  background-attachment: fixed;
}

.history__section--first {
  background-image: url("./img/baggrund-et.jpg");
  color: var(--hvid);
}

.history__wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 2rem 1rem;
}

.history__section--first h2 {
  text-align: center;
  font-size: 4rem;
}

.history__img {
  width: 100%;
}

.history__img--wrapper {
  width: 35%;
  position: relative;
  overflow: hidden;
}

.mySlides {
  scale: 2;
  object-fit: contain;
}

.slide__wrapper {
  overflow-y: hidden;
}

.history__img--wrapper:hover .history__img--text {
  opacity: 1;
}

.history__img--text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #252525ab;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.history__img--text h2 {
  font-size: 2rem;
  color: var(--hvid);
  text-align: center;
  font-style: italic;
}

.history__para {
  width: 50%;
  padding: 2rem;
  font-size: 1.7rem;
  max-width: 500px;
  line-height: 2.2rem;
  color: var(--hvid);
}

.history__section--second {
  background-image: url("./img/baggrund-to.jpg");
}

.history__section--third {
  background-color: var(--graaMoerk);
}

/* Third section third styling */

.card_cafe_img {
  transform: rotate(84deg);
  transform-origin: center center;
  height: 35rem;
}

.card_flip {
  position: relative;
  background-color: transparent;
  display: flex;
  justify-content: center;
  width: auto;
  height: auto;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.card_flip_inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.card_flip:hover .card_flip_inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.card_flip_front,
.card_flip_back {
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.card_flip_front {
  color: black;
}

/* Style the back side */
.card_flip_back {
  transform: rotateY(180deg);
}

.card_flip_text {
  position: absolute;
  top: 18vh;
  left: 33.3%;
  transform: translate(-50%, -50%);
  width: 33%;
  transform: rotate(-5.8deg);
  line-height: 1.6;
  text-align: left;
}

.card_flip_header {
  position: absolute;
  top: 13vh;
  left: 32.4%;
  transform: translate(-50%, -50%);
  width: 33%;
  transform: rotate(-5.8deg);
  line-height: 1.6;
  text-align: left;
  font-size: 1.3rem;
  opacity: 0.85;
  font-weight: bold;
}

.card_flip_text::first-letter {
  initial-letter: 2;
  padding: 4px;
}

/* 


Fourth section styling
*/

#fourth {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 70vh;
}

.citat__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 70%;
  margin: 0 auto;
}

.citat__wrapper h2 {
  color: var(--hvid);
  font-size: 3rem;
  text-align: center;
  margin-bottom: 4rem;
}

.citat__wrapper p {
  font-size: 1.7rem;
  color: var(--lysBrun);
  text-align: center;
  max-width: 50rem;
}

/* Fifth */

#fifth {
  height: 70vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: -2;
}

.video__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 45rem;
  height: 25rem;
  background-color: #e7cdb2c2;
  transform: translateX(-12rem);
}

.video__text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  height: 30%;
  text-transform: uppercase;
}

.video__title {
  font-size: 2.5rem;
  color: var(--graaMoerk);
  text-align: center;
}

.video__subheader {
  font-size: 1.5rem;
  color: var(--brunMoerk);
  text-align: center;
  text-align: left;
  margin-left: 5rem;
  letter-spacing: 0.2rem;
}

.video__para {
  text-align: left;
  margin-left: 5rem;
  color: var(--graaMoerk);
  font-size: 0.6rem;
  text-align: right;
}

.video__para_stor {
  font-size: 3rem;
  margin-left: 0.3rem;
  transform: translateY(-0.4rem);
}

.vaeg__container--flex {
  display: flex;
  flex-direction: row;
  margin-top: 0.5rem;
}

.video__date {
  margin-left: 5rem;
  margin-top: 2rem;
  color: var(--graaMoerk);
}

.video__date_2 {
  margin-left: 4.4rem;
  color: var(--graaMoerk);
}