/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Poppins:wght@400;500;600&display=swap"); 
/*Verlinkt eine Schriftart von Google Fonts, welche für die Überschrift der Seite, die Überschrift der einzelnen Sektionen und die "Christmas"-Button in der oberen linken Ecke und im Footer verwendet wird.*/

/*Ab hier werden Variablen und allgemeine Einstellungen vorbereitet. Mit einem "*" werden alle Objekt aufgerufen. Ein Objektaufruf ohne ein Punkt davor bezieht sich auf alle Objekte dieser Art (z.B. "img{...}" ruft alle Bilder auf*/

/*=============== VARIABLES CSS ===============*/                     /*Erstellen von Variablen, damit nicht jedes mal der gesamte Textz eingegeben werden muss sondern nur die Variable*/
:root {
  --header-height: 3.5rem;                                            /*Erstellt die höhe des Headers*/
  --animate-snow-1: animate-snow-1 5s infinite ease-in-out;           /*Erstellt die Variable der Animation der Schneeflocken (pulsieren)*/
  --animate-snow-2: animate-snow-2 5s infinite ease-in-out;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/                      /*Erstellt verschiedene Farben, die in Zukunft für Texte, Buttons oder den Hintergrund verwendet werden*/
  --first-color: hsl(210, 80%, 54%);
  --first-color-alt: hsl(210, 80%, 50%);
  --title-color: hsl(210, 24%, 90%);
  --text-color: hsl(210, 16%, 70%);
  --white-color: #fff;
  --body-color: hsl(210, 32%, 4%);

  /*========== Font and typography ==========*/                       /*Erstellen von Variablen mit Verschiedenen Schriftarten und -größen*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;                                 /*Erstellt die Variable, welche die Schriftart für die gesamte Website (ausgenommen Überschriften) enthält*/
  --second-font: "Dancing Script", cursive;                           /*Erstellt die Variable, welche die Schriftart für Überschriften enthält*/
  --biggest-font-size: 2.5rem;                                        /*Bis Zeile 29 werden Variablen mit verschiedenen Schriftgrößen erstellt*/
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/                               /*Erstellt die Variablen, die für die Schriftstärke festlegen*/
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;
  
  /*========== z index ==========*/                                   /*Definiert Z-Index-Variablen für Tooltip-Ebenen (10) und fixierte Elemente (100)*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* Responsive typography */                                           /*Erstellt die Variablen, die Schriftgrößen für eine Bildschirmgröße von 1024 und mehr pixel festlegen*/
@media screen and (min-width: 1024px) {
  :root {
    --biggest-font-size: 5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* {                                                                   /*Hier wird das "Grundgerüst" erstellt, mit dem Stern werden alle Objekte angesprochen und übernehmen diese Werte, solange es später nicht anders festgelegt wird.*/
  box-sizing: border-box;                                             
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth ;                                           /*Aktiviert weiches Scrollen zum Beispiel bei Sprüngen zu Ankern*/
}

body {                                                                /*legt für den Body Standard-Werte von Schriftart, -größe, -farbe und die Hintergrundfarbe fest*/
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
}

h1, h2, h3 {                                                          /*legt für alle h1, h2 und h3-Überschriften die Schriftfarbe und -stärke fest*/
  color: var(--title-color);
  font-weight: var(--font-medium);
}

ul {
  list-style: none;                                                   /*Entfernt Standard-Aufzählungszeichen und Nummerierung bei Listen*/
}

a {
  text-decoration: none;                                              /*Entfernt Textdekorationen wie Unterstreichungen*/
  color: #ffffff;
}

img {
  max-width: 100%;                                                    /*Stellt die maximale Breite von Bildern auf 100%*/  
  height: auto;                                                       /*Die Höhe der Bilder wird entsrprechen der Seitenverhältnisse automatisch berechnet und übernommen, damit sie nicht gestreckt oder gestaucht werden*/
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {                                                          
  max-width: 1024px;                                                  /*Alle Objekte der Klasse container bekommen eine maximale breite von 1024 pixel*/
  margin-inline: 1.5rem;                                              /*Setzt den äußeren Abstand für die Seiten der Objekte mit der Klasse container auf 1.5 rem (24 px)*/
}

.grid {                                                               /*definiert ein Grid-Layout mit einem Abstand von 1.5rem zwischen den Elementen*/
  display: grid;
  gap: 1.5rem;
}

.section {
  padding-block: 5rem 1rem;                                           /*Legt den inneren abstand von allen Sektionen fest (oben:5rem/unten1rem)*/
}
.section__title {                                                     /*Legt die Schriftgröße, -Art, die Ausrichtung und den aüßeren Abstand für die Überschrift fest*/
  font-size: var(--h1-font-size);
  font-family: var(--second-font);
  text-align: center;
  margin-bottom: 1.5rem;
}

.main {
  overflow: hidden; /* For animations */                              /*Versteckt überfließende Inhalte um Animationen sauber darzustellen*/
}

/* Snow animation */                                                  /*Erstellt die pulsierende Animation für die Schneeflocken, die überall auf der Seite verteilt zu finden sind*/
@keyframes animate-snow-1 {
  0%, 100% {
    transform: scale(.5);                                             /*Setzt die Größe der Schneeflocke zum Anfang und zum ende der Animation auf 50%*/
  }
  50% {
    transform: scale(1);                                              /*Setzt die Größe der Schneeflocke zur Halbzeit der Animation auf 100%*/
  }
}
@keyframes animate-snow-2 {
  0%, 100% {
    transform: scale(1);                                              /*Setzt die Größe der Schneeflocke zum Anfang und zum ende der Animation auf 100%*/
  }
  50% {
    transform: scale(.5);                                             /*Setzt die Größe der Schneeflocke zur Halbzeit der Animation auf 50%*/
  }
}

/*=============== HEADER & NAV ===============*/
.header{
    position: fixed;                                                  /*setzt die Position des Headers fest*/
    width: 100%;                                                      /*Setzt die breite des Headers auf die volle Bildschirmbreite (max. 1024px)*/
    background-color: transparent;                                    /*Setzt die Hintergrundfarbe auf Transparent*/
    top: 0;                                                           /*Positioniert den Header am oberen Rand des Bildschirms*/
    left: 0;                                                          /*Positioniert den Header so weit links wie möglich*/
    z-index: var(--z-fixed);                                          /*Fixiert den Header an der Stelle, die vorher festgelegt wurde*/
    transition: background .4s;                                       /*Fügt eine Übergangsanimation für die Hintergrundfarbe ein*/
}

.nav{                                                                 
    position: relative;                                               /*Setzt die Position der Navbar relativ zum Bezugselement (Header)*/
    height: var(--header-height);                                     /*Setzt die Höhe der Navbar auf die höhe der Variable header-heigth*/
    display: flex;                                                    /*Aktiviert Flexbox für das Layout der Navbar*/
    justify-content: space-between;                                   /*Verteilt den Inhalt der Navbar gleichmäßig*/
    align-items: center;                                              /*Richtet den Inhalt der Navbar vertikal mittig in dieser aus*/
}

.nav__logo,
.nav__toggle,
.nav__close{                                                          /*Aktiviert bei den Elementen nav__logo(Logo im Header, nav__toggle(Button zum Öffnen des Menus bei kleinen Geräten)*/
    display: flex;                                                    /*und nav__close(Button zum schließen des Menus bei kleineren Geräten) Felxbox für das Layout und setzt die Schrift*/
    color: var(--white-color);                                        /*bzw. Icon-Farbe auf die Variable white-color*/
}

.nav__logo img{                                                       /*legt die breite des Logo-Bildes fest und dreht es um 10 Grad gegen den Uhrzeigersinn*/
    width: 30px;                                                      
    transform: rotate(-10deg)
}

.nav__logo{                                                           /*Setzt die Elemente von nav__logo zentriert, mit einem Abstand von 0,25rem und definiert die Schriftart und -größe*/
    align-items: center;
    column-gap: .25rem;
    font-family:  var(--second-font);
    font-size: var(--h2-font-size);
}

.nav__toggle{                                                         /*legt bei nav__toggle die größe und die Art des Mauszeigers fest*/
    font-size: 1.25rem;
    cursor: pointer;
}

@media screen and (max-width: 767px){                                 /*setzt für eine Bildschirmbreite bis 767px folgende Dinge fest: Position, Hintergrundfarbe, Breite, inneren Abstand und einen Übergang*/
    .nav__menu{
        position: fixed;
        top: -100%;
        left: 0;
        background-color: var(--body-color);
        width: 100%;
        padding-block: 3.5rem;
        transition: top .4s;
    }
}

.nav__list{                                                           /*setzt für nav__list Flexbox, die richtung, in die es flexibel ist, eine Textausrichtung und einen Zeilenabstand fest*/
    display: flex;
    flex-direction: column;
    text-align: center;
    row-gap: 2rem;
}

.nav__link{                                                           /*setzt für nav__link Schriftfarbe und -strärke fest und fügt einen Übergang hinzu*/
    color: var(--white-color);
    font-weight: var(--font-medium);
    transition: color .4s;
}

.nav__link:hover{                                                     /*legt fest, was passiert, wenn man mit der Maus über einen NAvigationslink hovert*/
    color: var(--first-color);
}

.nav__close{                                                          /*legt die Position von nav__close, die größe und den cursor fest*/
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 1.5rem;
    cursor: pointer;

}

.nav__img-1,
.nav__img-2{                                                          /*legt die Positionierung der beiden Bilder in der Navbar fest*/
    position: absolute;
}

.nav__img-1{                                                          /*legt für die erste Schneeflocke im Navigations-Menu die breite, Position und eine rotation fest*/
    width: 40px;
    top: 6rem;
    left: 2.5rem;
    transform: rotate(-15deg);

}

.nav__img-2{                                                          /*legt für die zweite Schneeflocke im Naviagations-Menu die Breite, Position und eine rotation fest*/
    width: 60px;
    top: 1rem;
    left: 2rem;
    transform: rotate(15deg);
}




/* Show menu */
.show-menu{                                                           /*legt die Position vom Menu fest, sofern es Angezeigt wird*/
    top: 0;

}



/* Change background header */
.bg-header{                                                           /*legt die Hintergrundfarbe vom Menu fest, wenn der in JavaScript feestgelegte Wert beim Scrollen*/ 
  background: var(--body-color);                                      /*erreicht oder überschritten wurde*/
}

/* Active link */
.active-link{                                                         /*legt die Hintergrundfarbe der Navbar fest, wenn der in JavaScript festgelegte Wert nicht erreicht wurde*/
  color: var(--first-color);
}

/*=============== HOME ===============*/
.home{                                                                /*legt für den Hom-Bereich die Positionierung, die Hintergrundfarbe, die höhe, den inneren Abstand fest und versteckt*/
    position: relative;                                               /*überfließende Inhalte*/
    background: linear-gradient(180deg,
                hsl(210, 88%, 20%),
                hsl(210, 70%, 58%));  
    height: 650px;
        padding-top: 7rem;
        overflow: hidden;
}

.home__title{                                                         /*Legt für die Seitenüberschrift Schriftfarbe, -größe und -art sowie die Textausrichtung und den äußeren Abstand fest*/
    color: var(--white-color);
    font-size: var(--biggest-font-size);
    font-family: var(--second-font);
    text-align: center;
    margin-top: 1.5rem;

}

.home img{                                                            /*legt für die Bilder im Home-Bereich eine Positionierung fest*/
    position: absolute;
}

.home__mountain-1,
.home__snow{                                                          /*legt für Bild(er) im Home-Bereich eine Position fest*/
    bottom: 0;

}

.home__village,
.home__pine,
.home__moon,
.home__trineo{                                                        /*legt für Bild(er) im Home-Bereich eine Position fest*/
    left: 0;
    right: 0;
    margin: 0 auto;
}

.home__village{                                                       /*legt für Bild(er) im Home-Bereich eine Position und eine breite fest*/
    width: 260px;
    bottom: 1rem;

}

.home__pine{                                                          /*legt für Bild(er) im Home-Bereich eine und eine breite Position fest*/
    width: 250px;
    bottom: 4rem;
}

.home__mountain-2{                                                    /*legt für Bild(er) im Home-Bereich eine Position fest*/
    bottom: 3rem;
}

.home__mountain-3{                                                    /*legt für Bild(er) im Home-Bereich eine Position fest*/
    bottom: 6rem;
}

.home__moon{                                                          /*legt für Bild(er) im Home-Bereich eine Position und eine breite fest*/
    width: 300px;
    bottom: 8.5rem;
}

.home__trineo{                                                        /*legt für Bild(er) im Home-Bereich eine Position und eine breite fest*/
    width: 250PX;
    bottom: 14.5rem;
}


/*=============== ABOUT ===============*/
.about__container{                                                    /*legt für die Klasse "about__container" eine Positionierung und einen Zeilenabstand fest*/
    position: relative;
    row-gap: 3.5rem;
}

.about__data{                                                         /*legt die Textausrichtung in "about__data" fest*/
    text-align: center;
}

.about__description{                                                  /*legt den äußeren Abtand der Beschreibung fest*/
    margin-bottom: 2rem;
}

.about__img{                                                          /*legt für das Bild eine Breite und eine Positionierung fest*/
    width: 320px;
    justify-self: center;
}

.about__snow-1,
.about__snow-2{                                                       /*legt für die beiden Schneeflocken eine breite und eine Positionierung fest*/
    width: 50px;
    position: absolute;

}

.about__snow-1{                                                       /*legt für die erste Schneeflocke eine Position und eine Animation fest*/
    top: 12rem;
    left: 1.5rem;
    animation: var(--animate-snow-1);
}

.about__snow-2{                                                       /*legt für die zweite Schneeflocke eine Position und eine Animation fest*/
    right: -.75rem;
    bottom: .5rem;
    animation: var(--animate-snow-2);
}


/*=============== BUTTON ===============*/
.button{                                                              /*legt für die Buttons eine Farbe, den inneren Abstand, den Ecken-radius, eine Schriftfarbe und -stärke sowie*/ 
    display: inline-block;                                            /*einen Übergang und eine Textausichtung fest*/
    background-color: var(--first-color);
    padding: 1rem 2rem;
    border-radius: 4rem;
    color: var(--white-color);
    font-weight: var(--font-medium);
    transition: background .4s, box-shadow .4s;
    text-align: center;
}

.button:hover{                                                        /*legt fest, dass die Hintergrundfarbe geändert und ein Schatten/Leuchteffekt hinzugefügt wird, wenn */
    background-color: var(--first-color-alt);
    box-shadow: 0 8px 32px hsla(210, 80%, 54%, 7);
}

/*=============== SEND ===============*/
.send__container{                                                     /*legt eine Positionierung, eine Ausrichtung des Inhalt und eine Spalte mit einer festen breite fest*/
  position: relative;
  grid-template-columns: 400px;
  justify-content: center;
}

.send__card{                                                          /*legt die Textausrichtung in den einzelnen "Karten" unter "send" fest*/
  text-align: center;
}

.send__img{                                                           /*Legt bei den Bildern eine breite und einen unteren, äußeren Rand fest*/
  width: 180px;
  margin-bottom: .75rem;
}

.send__title{                                                         /*legt die Schriftgröße und einen unteren, äußeren Rand bei "Send Love This Christmas" fest*/
  font-size: var(--h3-font-size);
  margin-bottom: .5rem;
}

.send__description{                                                   /*legt die Schriftgröße und einen inneren Rand bei den Texten fest*/
  font-size: var(--small-font-size);
  padding-inline: 1.5rem;
}

.send__snow-1,
.send__snow-2,
.send__snow-3{                                                        /*legt für die 3 Schneeflocken eine Positionierung und die breite fest*/
  width: 50px;
  position: absolute;
}

.send__snow-1{                                                        /*legt die Position und eine Animation für die erste Schneeflocke fest*/
  left: 0;
  top: 7rem;
  animation: var(--animate-snow-1);
}

.send__snow-2{                                                        /*legt die Position und eine Animation für die zweite Schneeflocke fest*/
  top: 23rem;
  right: 0;
  animation: var(--animate-snow-2);
}

.send__snow-3{                                                        /*legt die Position und eine Animation für die dritte Schneeflocke fest*/
bottom: 10rem;
left: 0;
animation: var(--animate-snow-1);
}

/*=============== CELEBRATE ===============*/
.celebrate__container{                                                /*legt die Positionierung und einen Zeilenabstand fest*/
  position: relative;
  row-gap: 3.5rem;
}

.celebrate__data{                                                     /*Legt die Textausrichtung fest*/
  text-align: center;
}

.celebrate__description{                                              /*legt einen äußeren Abstand am unteren Rand fest*/
  margin-bottom: 2rem;
}

.celebrate__img{                                                      /*legt die breite und eine Positionierung für das "celebrate"-Bild fest*/
  width: 320px;
  justify-self: center;
}

.celebrate__snow-1,
.celebrate__snow-2{                                                   /*legt die breite und eine Positionierung für die beiden Schneeflocken in der Sektion "celebrate" fest*/
  width: 50px;
  position: absolute;
}

.celebrate__snow-1{                                                   /*legt die Position und eine Animation für die erste Schneeflocke fest*/
  top: 1.5rem;
  left: 1.5rem;
  animation: var(--animate-snow-1);
}

.celebrate__snow-2{                                                   /*legt die Position und eine Animation für die zweite Schneeflocke fest*/
  top: 18rem;
  right: 0;
  animation: var(--animate-snow-2);
}

/*=============== FOOTER ===============*/
.footer{                                                              /*versteckt überfließende Inhalte*/
  overflow: hidden;
}

.footer__container{                                                   /*legt eine Positionierung, einen Inneren Abstand und die Textausrichtung fest*/
  position: relative;
  padding-block: 4.5rem 2rem;
  text-align: center;
}

.footer__logo,
.footer__social-link,
.footer__copy{                                                        /*legt die Schriftfarbe fest*/
  color: var(--white-color);
}

.footer__logo{                                                        /*Stellt das Element inline dar, legt die Schriftgröße und -stärke fest und setzt einen aüßeren Rand an der Unterseite*/
  display: inline;
  font-size: var(--h2-font-size);
  font-family: var(--second-font);
  margin-bottom: 1rem;
}

.footer__social{                                                      /*aktiviert Flexbox, legt die Inhaltausrichtung und einen Spaltenabstand fest*/
  display: flex;
  justify-content: center;
  column-gap: 1.5rem;
}

.footer__social-link:hover{                                           /*legt fest, dass sich die Farbe ändert, wenn die Maus über den Icons hovert*/
  color: var(--first-color);
}

.footer__copy{                                                        /*legt Elementdarstllung, äußeren Abstand an der Oberseite und die Schriftgröße fest*/
  display: block;                                                     /*stellt das Element als Block dar, damit es die gesamte verfügbare/benötigte Breite einnimmt*/
  margin-top: 2rem;
  font-size: var(--smaller-font-size);
}

.footer__snow-1,
.footer__snow-2{                                                      /*legt die Positionierung der Schneeflocken fest*/
  position: absolute;
}

.footer__snow-1{                                                      /*legt die Breite, die Position und eine Animation der ersten Schneeflocke fest*/
  width: 50px;
  top: 3.5rem;
  left: 0;
  animation: var(--animate-snow-1);
}

.footer__snow-2{                                                      /*legt die Breite, die Position und eine Animation der zweiten Schneeflocke fest*/
  width: 70px;
  top: 3.5rem;
  right: -1.5rem;
  animation: var(--animate-snow-2)
}
/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{                                                  /*legt die Breite, den Radius der Ecken und die Hintergrundfarbe der Scrollleiste fest*/
  width: 0.6rem;
  border-radius: .5rem;
  background-color: hsl(210, 8%, 15%);
}

::-webkit-scrollbar-thumb{                                            /*legt die Farbe und den Eckenradius des Schiebereglers fest*/
  background-color: hsl(210, 8%, 25%);
  border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover{                                      /*legt die Farbe des Schiebereglers fest, wenn die Maus darüber hovert*/
  background-color: hsl(210, 8%, 35%);
}
/*=============== SCROLL UP ===============*/
.scrollup{                                                            /*legt die Positionierung, die Position, die Hintergrundfarbe, die Darstellung, einen inneren Abstand, einen Eckenradius, */
  position: fixed;                                                    /*eine Schriftgröße, eine Farbe, die Stapelreihenfolge und einen Übergang fest*/
  right: 1rem;
  bottom: -50%;
  background-color: var(--white-color);
  display: inline-flex;
  padding: .45rem;
  border-radius: .45rem;
  font-size: 1rem;
  color: var(--body-color);
  z-index: var(--z-tooltip);
  transition: bottom .3s, transform .3s;
}

.scrollup:hover{                                                      /*legt fest, dass der "Scroll Up-Pfeil beim mit der Maus darüber hovern etwas nach oben bewegt*/
  transform: translateY(-.25rem);
}
/* Show Scroll Up */
.show-scroll{                                                         /*legt den Abstand vom Scroll Up-Pfeil zum unteren Rand fest, wenn er angezeigt wird*/
  bottom: 3rem;
  
}

/*=============== BREAKPOINTS ===============*/                       /*Ab hier werden Breakpoints (Umbruchpunkte) festgelget. Diese sind dazu da, um die Webseite auf verschiedengroßen*/
/* For medium devices */                                              /*Endgeräten vernünfitg dargestellt werden */
@media screen and (min-width: 576px){                                 /*Hier wird die Breite für zwei Bilder (Dorf und Bäume im Hintergrund) und die Breite für die Sektionen "about" und*/ 
  .home__village{                                                     /*"celebrate", für eine Bildschrirmbreite von mindestens 576px bis maximal 766px festgeleget. Des weiteren wird eine feste*/
    width: 360px;                                                     /*Spaltenbreite für die container "about" und "celebrate" festgelegt.*/
  }
  .home__pine{
    width: 330px;
  }
  .about__container,
  .celebrate__container{
    grid-template-columns: .6fr;
    justify-content: center;
  }
} 

@media screen and (min-width:767px){                                  /*Hier wird für eine Bildschirmbreite von 767px bis 1023px folgende Dinge festgelegt: das Menu und die beiden zugehörigen*/
  .nav__toggle,                                                       /*Bilder sollen nicht angezeigt werden, stattdessen wird die Navbar angezeigt.*/
  .nav__close,                                                        /*Desweiteren wird festgelget, wie die Navbar angezeigt werden soll, wie hoch die "home"-Sektion sein soll, die Breiten von */
  .nav__img-1,                                                        /*insgesamt 4 Bildern (Dorf, Bäume im Hintergrund, Mond, Schlittengespann). Bei den letzten drei Bildern wird außerdem noch */
  .nav__img-2{                                                        /*der Abstand zum unteren Rand des Bezugselements festgelegt. Als letztes wird noch festgelegt, wie Breit die Spalten im*/
    display: none;                                                    /*"send__container" sein soll und welchen Abstand die einzelnen Spalten haben sollen.*/
  }

  .nav__list{
    flex-direction: row;
    column-gap: 4rem;
  }
  .home{
    height: 800px;
  }
  .home__village{
    width: 460px;
  }

  .home__pine{
    width: 400px;
    bottom: 7rem;
  }

  .home__moon{
    width: 450px;
    bottom: 12rem;
  }

  .home__trineo{
    width: 350px;
    bottom: 20rem;
  }

  .send__container{
    grid-template-columns: repeat(2, 400px);
    column-gap: 5rem;
  }
}
/* For large devices */
@media screen and (min-width: 1024px){                                /*Hier wird für eine Breite ab 1024px folgende Dinge festgelegt: ein oberer und unterer Abstand, die Schriftgröße der Über-*/
  .section{                                                           /*schrift, die höhe der Navbar, die Breite und der Abstand der Spalten sowie die Ausrichtung der Inhalte in */
    padding-block: 7rem 3rem;                                         /*"about__container", die Textausrichtung in "about__data", die Breite und die Anordnug des Bildes in der Sektion"about", */
  }                                                                   /*die Position der beiden Schneeflocken in der Sektion "about", die Anordnug und die Abstand sowie ein innerer Abstand*/
                                                                      /*der "Karten" in der Sektion "send", ein äußerer Abstand am unteren Rand der Bilder in der Sektion "send", die Schriftgröße*/
  .home__title{                                                       /*in der Sektion "send", die Position der drei Schneeflocken in der Sektion "send", die Größen und der Abstand der Spalten*/
    font-size: 4rem;                                                  /*sowie die Ausrichtung der Inhalte in dem container "celebrate", die Textausrichtung in der Sektion "celebrate", die Breite*/
  }                                                                   /*des Bildes in der Sektion "celebrate", die Position der beiden Schneeflocken in der Sektion "celebrate", die inneren */
                                                                      /*im footer, die Abstände der Social Media Icons im footer, die größe der social Media Icons, die Position der beiden Schnee-*/
  .nav{                                                               /*flocken, den äußeren Abstand auf der oberseite des Copyright-Vermerks und der Abstand des Scroll Up-Pfeils zur rechten*/
    height: calc(var(--header-height) + 1.5rem);                      /*Seite des Bildschirmes*/
  }

  .about__container{
    grid-template-columns: 500px 335px;
    align-items: center;
    column-gap: 6rem;
  }

  .about__data,
  .about__data .section__title{
    text-align: initial;
  }

  .about__img{
    width: 500px;
    order: -1;
  }

  .about__snow-1{
    top: 0;
    left: 0;
  }

  .about__snow-2{
    right: 10rem;
    bottom: 3.5rem;
  }

  .send__container{
    grid-template-columns: repeat(2, 220px);
    column-gap: 7.5rem;
    row-gap: 7.5rem;
    padding-top:4rem;

  }

  .send__img{
    margin-bottom: 1rem;
    border-color: white;
    border: 1px solid;
  }

  .send__description{
    font-size: var(--normal-font-size);
  }

  .send__snow-1{
    left: -1rem;
    top: -1rem;
  }
  .send__snow-2{
    top: 3rem;
  }
  .send__snow-3{
    left: 27rem;
    bottom: 0;
  }

  .celebrate__container{
    grid-template-columns: 400px 500px;
    align-items: center;
    column-gap: 6rem;
  }

  .celebrate__data,
  .celebrate__data .section__title{
    text-align: initial;
  }

  .celebrate__img{
    width: 500px;
  }

  .celebrate__snow-1{
    top: 4.5rem;
    left: 14rem;
  }

  .celebrate__snow-2{
    right: 2rem;
  }

  .footer__container{
    padding-block: 5.5rem 3rem;
  }

  .footer__social{
    column-gap: 2rem;
  }

  .footer__social-link{
    font-size: 1.5rem;
  }

  .footer__snow-1{
    top: 6.5rem;
    left: 10rem;
  }

  .footer__snow-2{
    top: 5.5rem;
    right: 4rem;
  }

  .footer__copy{
    margin-top: 4rem;
  }

  .scrollup{
    right:3rem;
  }
}

@media screen and (min-width: 1064px){                                /*Hier wird für eine Bildschirmbreite ab 1064px ein äußerer Abstand festgelegt */
  .container{
    margin-inline: auto;

  }
}

@media screen and (min-width: 1200px){                                /*hier wird für eine Bildschirmbreite ab 1200px folgende Dinge festgelegt: die höhe der Sektion "home", die Schriftgröße der*/
  .home{                                                              /*Überschrift, die Breite aller Bilder in der Sektion "home" und die Abstände bestimmter Bilder (Dorf, Hintergrundbäume, */
    height: 980px;                                                    /*Hintergrundberge, Mond und Schlittengespann) vom unteren Rand der Sektion "home"*/
  }

  .home__title{
    font-size: var(--biggest-font-size);
  }

  .home__mountain-1,
  .home__mountain-2,
  .home__mountain-2,
  .home__snow{
    width: 100%;
  }

  .home__village{
    width: 750px;
    bottom: 4rem;
  }

  .home__pine {
    width: 720px;
    bottom: 12.5rem;
  }

  .home__mountain-1,
  .home__mountain-2{
    bottom: -5rem
  }

  .home__moon{
    width: 600px;
    bottom: 14rem;
  }

  .home__trineo{
    width: 500px;
    bottom: 28rem;
  }
}

/* For 2K+ resolutions */

@media screen and (min-width: 1700px){                                /*Hier wird für eine Bildschirmbreite ab 1700px die höhe und ein automatischer aüßerer Abstand der Sektion "home" festgelegt*/
  .home{
    height: 990px;
    margin-inline: auto;
  }
}