.header {
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
}



.logo {
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.nav {
  display: flex;
  gap: 10px;

  padding-right: 20px;
  padding-left: 20px;
}

.nav a {
  display: block;
  text-decoration: none;
  border: solid;
  padding: 10px;
  background-color: yellow;
}

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  margin: 0;
}

.intro {
  background-image: url("https://img.welt.de/img/wissenschaft/mobile139756706/3072505017-ci102l-w1024/Megaptera-novaeangliae-Humpback-Whale.jpg");
  color: #ffffff;

  background-repeat: no-repeat;

  min-height: 100vh;
  background-size: cover;
  background-position: 75% 75%;

  padding: 100px;

  display: grid;
  grid-template-columns: 1fr 1fr;
}

.intro-content {
  font-size: 1.5em;
}

.intro-title {
  text-transform: uppercase;
}

.intro-button {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  background-color: #0038d1;
  padding: 15px;

  display: inline-block;
  box-shadow: inset 0 4px darkblue, inset 0 -4px #blue, 0 4px rgb(0 0 0 / 25%);

  transition: all 0.25s, opacity 0.75s 0.5s;
}

.intro-button:hover {
  background-image: linear-gradient(#3d3938, #171615);
  box-shadow: inset 0 0 #fff, inset 0 0 rgb(112, 0, 216);
}

.header {
  background-color: gray;
}

.intros {
  background-image: url("https://dbdzm869oupei.cloudfront.net/img/alfombretaratoli/preview/21901.png");
  color: #ffffff;
}

.meertiereintro {
  display: flex;
  justify-content: center;
}

.buttonforsea {
  display: flex;
  justify-content: center;
}

.bg-image {
  background-image: url("https://i.pinimg.com/originals/ef/9d/28/ef9d28b8353c62a72ea200e688b1014b.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  text-shadow: 5px 5px #000000;

  min-height: 100vh;

  display: grid;
  place-content: center;
}

.bg-content {
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-titlelebens {
  display: flex;
  justify-content: center;
}

.überschriftLeben {
  padding: 25px;
}

.img-index {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-size: 2em;
  padding-left: 50px;
}

.textmeerestiere {
  background-color: blue;
  padding: 20px;
  text-shadow: none;
}

.textmeerestiere2 {
  background-color: blue;
  padding: 20px;
  text-shadow: none;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.haiimg {
  max-weight: 200px;
}

.bg-fixed {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.navgefährlich {
  border: solid darkblue;
  display: flex;
  background-color: grey;
}

.bg-fixed--1 {
  background-image: url("https://image.geo.de/30506586/t/VX/v2/w1440/r1.5/-/grizzly-s-144478324.jpg");
}

.bg-fixed--2 {
  background-image: url("https://image.geo.de/30042270/t/dL/v3/w1440/r1.3333/-/flusspferd-gross-jpg--17170-.jpg");
}

.bg-fixed--3 {
  background-image: url("https://www.igb-berlin.de/sites/default/files/styles/mainimage_content/public/media-images/mainimages/Gemeine%20Hausm%C3%BCcke%20%28Culex%20pipiens%29%20%28c%29%20Pixabay.jpg?itok=Vhens9wE");
}

/* OPTIONALES STYLING */
.optional {
  padding: 30px;
  text-align: center;
}

.stechmücken {
  align-items: center;
  padding: 30px;
  text-align: center:
}


.bg-fixed--4 {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/7a/Deathstalker_%28Leiurus_quinquestriatus%29_6.jpg");
}

.bg-fixed--5 {
  background-image: url("https://www.planet-wissen.de/natur/tierwelt/gift_als_waffe/grazileineseewespemitihrentoedlichententakeln100~_v-gseapremiumxl.jpg");
}

.bg-fixed--6 {
  background-image: url("https://cdn.mdr.de/wissen/fasten-tiere-100-resimage_v-variantSmall16x9_w-960.jpg?version=33384");
}

/* OPTIONALES STYLING */
.optional {
  padding: 30px;
  text-align: center;
}

.krokodil {
  align-items: center;
  padding: 30px;
  text-align: center:
}

.bg-fixed--7 {
  background-image: url("https://assets.deutschlandfunk.de/FILE_0b7dd6857d7a88445131a05901b46403/1920x1080.jpg?t=1597489687474");
}

.bg-fixed--8 {
  background-image: url("https://www.herold.at/blog/wp-content/uploads/2018/07/Bandwurm-Mensch-Adobe-Stock-c-Juan-Gaertner-1-1280x720.jpg");
}

.bg-fixed--9 {
  background-image: url("https://c8.alamy.com/zoomsde/9/b29220685ee3486999773a3713456578/d0exxc.jpg");
}

/* OPTIONALES STYLING */
.optional {
  padding: 30px;
  text-align: center;
}

.rotekobra {
  align-items: center;
  padding: 30px;
  text-align: center:
}

.bg-fixed--10 {
  background-image: url("https://img.fotocommunity.com/trichternetzspinne-94d65d5e-9000-43fd-beeb-837960b8c55a.jpg?height=1080");
}


.navigation {
  align-items: flex-end;
  border: solid;
  position: fixed;
  top: 0;
  right: 0;
  background-color: yellow;
  list-style-type: none;
  padding: 20px;
  color: darkblue;
}

html {
  scroll-behavior: smooth;
}

.landtiertext {
  border: solid darkblue;
  background-color: yellow;
  color: darkblue;
  text-decoration: none;
}

.leopa {
  font-size: 2em;
  display: flex;
  justify-content: center;
  color: darkgrey;
  text-shadow: saddlebrown;
  background-color: yellow;
}

.leopaintro {
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: yellow;
}

.leopatext {
  text-shadow: red;
  display: flex;
  justify-content: flex-start;
  color: black;
  padding: 30px;
  border: solid;
  background-image:url(https://static.nationalgeographic.de/files/styles/image_3200/public/LeopardKingdom_03.jpg?w=1900&h=1069);
}

.revolver {

  padding-left: 150px;
  font-size: 2em;
  text-shadow: none;
  background-image: url(https://imgl.krone.at/scaled/1995038/v12522b/full.jpg);

}


.revolver2 {
padding-left: 150px
  font-size: 2em;
  text-shadow: none;
  background-image: url(https://imgl.krone.at/scaled/1995038/v12522b/full.jpg);

}

.leopaintro2 {
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: yellow;
}

.leopatext2 {
  text-shadow: red;
  display: flex;
  justify-content: flex-end;
  color: white;
  padding: 30px;
  border: solid black;
  background-image:url(https://media.diepresse.com/images/uploads/d/3/1/5807409/leopaord3_1588235627053987.jpg);
}

.leopaintro3 {
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: yellow;
}

.leopatext3 {
  text-shadow: red;
  display: flex;
  justify-content: flex-start;
  color: white;
  padding: 30px;
  border: solid black;
  background-image:url(https://static.spektrum.de/fm/912/f1920x1080/Leopard-iStock-479115296_Freder.jpg);
}

.löweintro {
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
}

.löwetext {
  text-shadow: red;
  display: flex;
  justify-content: flex-start;
  color: white;
  padding: 30px;
  border: solid black;
  background-image:url(https://www.prowildlife.de/wp-content/uploads/2022/02/loewe-familie.jpg);
}

.löweintro2 {
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
}

.löwetext2 {
  text-shadow: red;
  display: flex;
  justify-content: flex-end;
  color: white;
  padding: 30px;
  border: solid black;
  background-image:url(https://imgproxy.natucate.com/8JP3Y45pFpb6qMWtIw30yef9AsUc4MrC534mESoqsnQ/rs:fill/g:ce/w:1780/h:1001/aHR0cHM6Ly93d3cubmF0dWNhdGUuY29tL21lZGlhL3BhZ2VzL2Jsb2cvd2lzc2VuLzEyNzAwMGQzLTUxYjYtNGYxZi1hN2UwLTg1ODZlMmViMDQzMi8xOTEzODUxMDA0LTE1OTI1NzQ2MzAvbG9ld2Uta29lbmlnLWRlci10aWVyd2VsdC5qcGc);
}

.löweintro3 {
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
}

.löwetext3 {
  text-shadow: red;
  display: flex;
  justify-content: center;
  color: white;
  padding: 30px;
  border: solid black;
  background-image:url(https://storyonedata.blob.core.windows.net/orginalimages/f60f6b51-8781-4605-b888-d7da84dec3f1.png);
}

.secret {
  text-decoration: none;
  color: white;
}

.homebuttons {
  text-decoration: none;
  color: black;
}

.intron-button {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  background-color: #d16500e1;
  padding: 15px;

  display: inline-block;
  box-shadow: inset 0 4px rgba(192, 108, 11, 0.774), inset 0 -4px #blue, 0 4px rgb(0 0 0 / 25%);

  transition: all 0.25s, opacity 0.75s 0.5s;
}

.intron-button:hover {
  background-image: linear-gradient(#3d3938, #171615);
  box-shadow: inset 0 0 #fff, inset 0 0 rgb(112, 0, 216);
}

.navigationfix {
  
}