/* Selected Fonts */
@font-face {
  font-family: 'IBMPlexMono_Regular';
  src: url(assets/fonts/IBMPlexMono-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'IBMPlexMono_Italic';
  src: url(assets/fonts/IBMPlexMono-Italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Thonburi_Regular';
  src: url(assets/fonts/SF_Thonburi_Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Thonburi_Semibold';
  src: url(assets/fonts/SF_Thonburi_Semibold.woff2) format('woff2');
}

@font-face {
  font-family: 'iconfont';
  src: url(assets/fonts/icomoon.woff) format('woff');
}

/* ALLGEMEIN*/

* {
  box-sizing: border-box; 
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Hide scrollbar for Chrome, Safari, and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge */
body {
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Firefox */
html {
  scrollbar-width: none; /* Firefox */
}

body{
  background-color: white;
  display:flex;
  flex-direction: column;
  width: 100%; 
}

hr{
  border: 2px solid rgb(0, 0, 0);
  margin: 0;        
  padding: 0;
}

/* NAVBAR */
nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 3vh;
  padding-bottom: 3vh;
  padding-left: 2vw;
  padding-right: 2vw;
  height: 32px;
  border-bottom: 2px solid black;
}

.logoContainer{
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: 'IBMPlexMono_Italic';
  font-size: 1.2vw;
}

.logo{
  height: 1.5vw;
}

nav a{
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0;
  text-decoration: none;
  font-family: 'Thonburi_Regular';
  font-size: 1.2vw;
  color:black;
}

nav a:hover p{        
  font-family: 'IBMPlexMono_Italic';
  text-decoration: underline;
}

nav a img{
  height: 1.5vw;
}

/* Content */
/* SECTION 1*/
.section_1{
  height: 85vh;
  padding-top: 10vh;
  padding-bottom: 10vh;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
}

.hero-text {
  font-family: 'Thonburi_Semibold';
  font-size: 56px;
  line-height: 1.2;
}

.hero-text .sf-part {
  font-family: 'Thonburi_Semibold';
}

.hero-text .ibm-part {
  font-family: 'IBMPlexMono_Italic';
}

/* Wörter für SplitText */
.word {
  display: inline-block;
  white-space: nowrap;
}

#s1_p1{
  font-family: 'Thonburi_Semibold';
  font-size: 2.5vw;
  margin-bottom: 15px; 
}

#s1_p2{
  font-family: 'Thonburi_Semibold';
  font-size: 4vw;
  margin-top: 0;  
}

#s1_p2 em{
  font-family: 'IBMPlexMono_Italic';
  font-size: 56px;
}

/* Get started button */
.getStartedButton{
  height: 6vw;            
  width: 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-radius: 100px;
  border: 2px solid black;
  font-family: 'Thonburi_Semibold';
  font-size: 1.75vw;
  text-decoration: none;
  color: black;
  transition: width 0.4s;
}

.getStartedButton img{
  height: 1.75vw;
}

.getStartedButton p{
  display: none;
  white-space: nowrap;
}

.getStartedButton:hover{
  transition-timing-function: ease;
  width: 18vw;
}
.getStartedButton:hover p{
  display: block;
}

.getStartedButton.pink{
  background-color: #FF83CD;
}

.getStartedButton.green{
  background-color: #DEFF7A;
}

/* SECTION 2 Fische*/
.section_2{
  background-color: #569CC2;
  height: 100vh;
  display: flex;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.section_2 p{
  font-family: 'Thonburi_Semibold';
  font-size: 2.5vw;
  align-self: flex-end;
  padding-right: 5vw;
  padding-bottom: 10vh;
}

.section_2 .imgContainer{
  position: absolute;
}

.section_2 .imgContainer img{
  position: absolute;
  height: 120vh;
}

/* Position & Transition */
#visual_fische{
  left: -135vw;
  transform: translate(10, -10vh); 
  transition: left 1s, transform 1s;
}

.section_2:hover #visual_fische {
  left: -120vw;
  transform: translate(0, 0);
}

#visual_fische_boids{
  left: -110vw;
  transform: translate(0, -20vh);
  transition: left 1s, transform 1s;
}

.section_2:hover #visual_fische_boids {
  left: -90vw;
  transform: translate(0, -25vh);
}

/* SECTION 3 Insekten*/
.section_3{
  background-color: #DEFF7A;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.section_3 p{
  font-family: 'Thonburi_Semibold';
  font-size: 2.5vw;
  align-self: flex-end;
  padding-left: 5vw;
  padding-bottom: 10vh;
}

.section_3 .imgContainer{
  position: absolute;
}

.section_3 .imgContainer img{
  position: absolute;
  height: 140vh;
}

/* Position & Transition */
#visual_insekten{
  right: -150vw;
  transform: translate(0, -10vh);
  transition: right 1s, transform 1s;
}

.section_3:hover #visual_insekten{
  right: -130vw;
  transform: translate(0, -20vh); 
}

#visual_insekten_boids{
  right: -120vw;
  transform: translate(0, -15vh);
  transition: right 1s, transform 1s;
}

.section_3:hover #visual_insekten_boids{
  right: -100vw;
  transform: translate(0, -20vh);
}

/* SECTION 4 Vogel*/
.section_4{
  background-color: #FF83CD;
  height: 100vh;
  display: flex;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.section_4 p{
  font-family: 'Thonburi_Semibold';
  font-size: 2.5vw;
  align-self: flex-end;
  padding-right: 5vw;
  padding-bottom: 10vh;
}

.section_4 .imgContainer{
  position: absolute;
}

.section_4 .imgContainer img{
  position: absolute;
  height: 120vh;
}

#visual_insekten{
  height: 130vh;
}

/* Position & Transition */
#visual_vogel{
  left: -140vw;
  transform: translate(0, 20vh); 
  transition: left 1s, transform 1s;
}

.section_4:hover #visual_vogel{
  left: -110vw;
  transform: translate(0, -10vh);            
}

#visual_vogel_boids{
  left: -110vw;
  transform: translate(0, -10vh);
  transition: left 1s, transform 1s;
}

.section_4:hover #visual_vogel_boids{
  left: -85vw;
  transform: translate(0, -30vh);
}

/* SECTION 5*/
.section_5{
  height: 90vh;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
}

#s5_p1{
  font-family: 'Thonburi_Semibold';
  font-size: 4.5vw;
}

#s5_p2{
  font-family: 'Thonburi_Semibold';
  font-size: 2vw;
}

#s5_p1 em{
  font-family: 'IBMPlexMono_Italic';
}

/* SECTION 6*/
.section_6{
  height: 120vh;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
}

#s6_p1{
  font-family: 'Thonburi_Semibold';
  font-size: 4.5vw;
}

#s6_p2{
  font-family: 'Thonburi_Semibold';
  font-size: 2vw;
}

#s6_p1 em{
  font-family: 'IBMPlexMono_Italic';
}

#s6_p2 em{
  font-family: 'iconfont';
  font-style: normal;
}

#s6_i{
  display: flex;
  justify-content: center;
  margin: 8vh 0 8vh 0;
}

/* SECTION 7*/
.section_7{
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
}

#s7_p1{
  font-family: 'Thonburi_Semibold';
  font-size: 2.5vw;
}

#s7_p2{
  font-family: 'Thonburi_Semibold';
  font-size: 4vw;
  line-height: 1.1;
}

#s7_p2 em{
  font-family: 'IBMPlexMono_Italic';
  font-size: 4vw;
}

/* SECTION 8 Impressum*/
.section_8{
  height: 30vh;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
}

.section_8 p{
  font-family: 'Thonburi_Semibold';
  font-size: 1.5vw;
  text-align: center;
}

.section_8 p em{
  font-family: 'IBMPlexMono_Italic';            
}