@font-face {
  font-family: Diatype;
  src: url("fonts/ABCDiatypeEdu-Medium.woff") format("woff");
  font-weight: 500;
}

@font-face {
  font-family: 'Diatype';
  src: url("fonts/ABCDiatypeEdu-Regular.woff") format("woff");
  font-weight: 400;
}

@font-face {
  font-family: 'Diatype';
  src: url("fonts/ABCDiatypeEdu-Heavy.woff2") format("woff");
  font-weight: 800;
}

html,
body {
  margin: 0;
  padding: 0;

  font-family: Diatype,
    Helvetica,
    Arial,
    sans-serif;

  scroll-snap-type: y mandatory;
}

/* Standard Einstellungen */
a {
  font-size: 2vw;
  color: inherit;
  text-decoration: none;
}

/* Flex Objekt (Startseite)  um zu definieren, wo Text (und Bilder) positioniert werden  */

section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Titeltext Startseite (vw und vh ist relativ zu Browser-Fenstergrösse*/

h2 {
  margin: 0;
  font-size: max(15vw, 15vh);
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  line-height: 0.95em;
  overflow-wrap: anywhere;
}

/* Container für Scroll Snap */

.container {
  scroll-snap-type: y mandatory;
  /* Vertikales Scrollen erzwingen */
  overflow-y: scroll;
  /* Ermöglicht vertikales Scrollen */
  height: 100vh;
  width: 100%;
  /* Höhe des Viewports */
}


/* Snap Scroll einstellen */

.project-asset {
  display: flex;
  /* Zentriert den Inhalt */
  justify-content: center;
  /* Zentriert den Inhalt horizontal */
  align-items: center;
  /* Zentriert den Inhalt vertikal */
  height: 100vh;
  /* Jedes Bild füllt die Höhe des Viewports */
}

.project-asset,
.project-end {
  scroll-snap-align: start;
  /* Bild wird beim Anfang des Viewports eingerastet */
}

section.project-asset > img,
section.project-asset > video {
  z-index: 2;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  /* Dass Bild sich nicht verformt bei verkleinern (responsive mässig) */

}

.play-btn {
  all: unset;
  position: absolute;
  z-index: 3;  
}

.play-btn img {
  height: 64px;
}

/* Titelbilder in Mitte anzeigen und Position fixxen */

section.project img {
  position: fixed;
  display: none;
  max-width: 60%;
  max-height: 60%;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Navigation */
.project-end-navigation {
  margin-top: auto;
  width: 100%;
  display: flex;
  z-index: 15;
  justify-content: space-between;
}

.project-end-navigation a {
  margin: 20px;
  font-weight: regular;
  z-index: 15;
  text-transform: uppercase;
  width: 4em;
}

.project-end-navigation a:nth-child(2) {
  text-align: center;
}

.project-end-navigation a:nth-child(3) {
  text-align: end;
}

.project-end-navigation a:hover{
  
}

#hover-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  z-index: 1000;
}


/* Most visible Bild wird angezeigt (Für Projektseite) */

section.most-visible img {
  display: block;
}

/* Text für Beschreibung von Projekten, Position fixed,in Hintergrund und margin */

p {
  z-index: 1;
  position: fixed;
  font-size: 2vw;
  margin: 20px;
  overflow-wrap: anywhere;
  font-family: 'Diatype';
  /* Diatype als Regular */
  font-weight: 400;
  /* Regular */
  hyphens: auto;
  word-break: break-word; /* Bricht lange Wörter bei Bedarf */
}



/* klasse für link (das sie unterstrichen werden) */
.link {
  text-decoration: underline;
}

/* klasse für link in Tabelle (das sie unterstrichen werden) */
.link_table {
  text-decoration: underline;
  font-family: 'Diatype';
  /* Diatype als Regular */
  font-weight: 400;
  hyphens: auto;
  font-size: 2.4vw;
}


/* Typo für Home also zurückkommen zu Start (Mit floating animation) */

h3 {
  z-index: 5;
  font-family: 'Diatype';
  font-weight: 400;
  font-size: 300px;
  line-height: 250px;
  color: rgb(255, 255, 255);
  text-align: center;
  hyphens: auto;
}


h4 {
  z-index: 1;
  position: fixed;
  font-size: 3vw;
  hyphens: auto;
  overflow-wrap: anywhere;
  font-family: 'Diatype';
  /* Diatype als Regular */
  font-weight: 400;
  /* Regular */
}

/* Emojis */

.emoji {
  position: absolute;
  top: -5%;
  font-size: 10vw;
  animation: fall linear infinite;
}


/* Animation für fallende Emojis */
@keyframes fall {
  to {
    transform: translateY(110vh);
    /* Bewegt das Emoji von oben nach unten */
  }
}

/* Zufällige Emojis an verschiedenen Startpositionen */
.emoji:nth-child(1) {
  left: 10%;
  animation-duration: 2s;
}

.emoji:nth-child(2) {
  left: 20%;
  animation-duration: 2.5s;
}

.emoji:nth-child(3) {
  left: 30%;
  animation-duration: 3.1s;
}

.emoji:nth-child(4) {
  left: 40%;
  animation-duration: 4.5s;
}

.emoji:nth-child(5) {
  left: 50%;
  animation-duration: 2s;
}

.emoji:nth-child(6) {
  left: 5%;
  animation-duration: 4.1s;
}

.emoji:nth-child(7) {
  left: 70%;
  animation-duration: 2.7s;
}

.emoji:nth-child(8) {
  left: 80%;
  animation-duration: 2s;
}

.emoji:nth-child(9) {
  left: 90%;
  animation-duration: 1.8s;
}

.emoji:nth-child(10) {
  left: 8%;
  animation-duration: 3.5s;
}

.emoji:nth-child(11) {
  left: 20%;
  animation-duration: 1.5s;
}

.emoji:nth-child(12) {
  left: 10%;
  animation-duration: 2.1s;
}

.emoji:nth-child(13) {
  left: 64%;
  animation-duration: 5s;
}

.emoji:nth-child(14) {
  left: 75%;
  animation-duration: 1.7s;
}

.emoji:nth-child(15) {
  left: 2%;
  animation-duration: 2.5s;
}

.emoji:nth-child(16) {
  left: 38%;
  animation-duration: 2.9s;
}

.emoji:nth-child(17) {
  left: 57%;
  animation-duration: 3.6s;
}

#emoji-container {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
}

#emoji-container.show {
  display: block;
}


/* about text mit column */
.container-about-text {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  z-index: 1;
  position: fixed;
  margin-top: 20px;
  hyphens: auto;
  font-size: 2.5vw;
}

.contact-table{
  width: 100%;
  margin-left: 20px;
  margin-right: 20px; 
}

.contact-table tr td{
  vertical-align: top;
  text-align: left;
  width: 50%;
  padding-bottom: 25px;
  font-family: 'Diatype';
  /* Diatype als Regular */
  font-weight: 400;
  hyphens: auto;
}

@media only screen and (max-width: 768px) {
  h2 {
    font-size: 17vw;
  }
  
  .contact-table {
    font-size: 20px; 
    margin-right: 20px;
    margin-left: 20px;
    width: 100%;
  }

  /* klasse für link in Tabelle (das sie unterstrichen werden) */
.link_table {
  text-decoration: underline;
  font-family: 'Diatype';
  /* Diatype als Regular */
  font-weight: 400;
  hyphens: auto;
  font-size: 20px;
}


  p {
    font-size: 1.2rem;
  }
  a {
    font-size: 1.2rem;
  }

  .project-end-navigation {
    position: fixed; /* Fixiert die Navigation */
    bottom: 0;       /* Am unteren Rand des Bildschirms */
    left: 0;         /* Am linken Rand beginnen */
         /* Breite 100%, damit es den ganzen Bildschirm einnimmt */
    padding: 10px 0; /* Optionales Padding */
    z-index: 0;
  }


}