html {
  scroll-behavior: smooth;
}

body {
  background-color: rgb(39, 40, 41);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: lightgrey;
}

.bodycontainer {
  border: 0.25em solid rgba(235, 168, 60, 0.744);
  background-color: rgb(52, 53, 58);
  margin: 2.5em;
  border-radius: 0.5em;
}

/*Nav stylen*/
nav {
  position: sticky;
  top: 0;
  background-color: rgb(52, 53, 58);
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1000;
}

nav a {
  margin: 1.7em;
  text-decoration: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: lightgrey;
  font-weight: 600;
}

nav a:hover {
  text-decoration: underline;
  color: rgba(235, 168, 60, 0.744);
}

/*Animationen erstellen*/
.typing {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid lightgrey;
}

/*erste anmiation*/
#first {
  width: 0;
  animation: typing1 2s steps(6) forwards, blink-caret1 0.7s, step-end infinite,
    stop-blink 0s forwards 2s;
}

#second {
  width: 0;
  animation: typing2 3s steps(29) forwards 2.5s,
    blink-caret2 0.7s step-end infinite 2.5s, stop-blink 2.5s forwards 5.5s;
}

@keyframes typing1 {
  from {
    width: 0;
  }

  to {
    width: 7ch;
  }
}

@keyframes typing2 {
  from {
    width: 0;
  }

  to {
    width: 30ch;
  }
}

@keyframes blink-caret1 {
  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: lightgrey;
  }
}

@keyframes blink-caret2 {
  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: lightgrey;
  }
}

@keyframes stop-blink {
  from {
    border-color: lightgrey;
  }

  to {
    border-color: transparent;
  }
}

/*Header stylen*/
header h1 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  justify-content: start;
  margin-left: 2em;
  margin-top: 5.5em;
  color: lightgrey;
}

header b {
  font-size: 2.5em;
  color: rgba(235, 168, 60, 0.744);
}

.intro {
  position: relative;
  justify-content: space-evenly;
  display: flex;
}

#bild {
  width: 27em;
  margin-right: 1.5em;
  height: auto;
  justify-content: flex-end;
  filter: grayscale (50%);
  opacity: 0.8;
}

.social {
  display: flex;
  justify-content: flex-start;
  gap: 0.75em;
  position: absolute;
  bottom: 0;
  left: 4em;
}

#github,
#linkedin {
  width: 1.5em;
  height: auto;
}

.border {
  position: relative;
  width: 95%;
  border-bottom: 3px solid rgba(235, 168, 60, 0.744);
  margin: 3em auto;
}

/*Aside stylen*/
aside {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: lightgrey;
}

aside h2 {
  margin-left: 1.8em;
  font-size: xx-large;
  color: rgba(235, 168, 60, 0.744);
}

aside h3 {
  margin-left: 5em;
  margin-right: 5em;
}

/*Section stylen*/
section h2 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: rgba(235, 168, 60, 0.744);
  font-size: xx-large;
  margin-left: 1.8em;
}

/*Article stylen*/
article h3 {
  display: grid;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin-left: 5em;
  margin-right: 5em;
  color: lightgrey;
  justify-self: center;
}

article {
  display: grid;
  grid-template-columns: repeat (4fr);
  gap: 1em;
  margin-left: 2em;
  margin-right: 2em;
}

article .window1 {
  grid-column: 1;
  background-color: rgb(99, 101, 111);
  border-radius: 5px;
}

article .window2 {
  grid-column: 2;
  background-color: rgb(99, 101, 111);
  border-radius: 5px;
}

article .window3 {
  grid-column: 3;
  background-color: rgb(99, 101, 111);
  border-radius: 5px;
}

article .window4 {
  grid-column: 4;
  border-radius: 5px;
  background-color: rgb(99, 101, 111);
}

.window1:hover {
  background-color: rgba(235, 168, 60, 0.744);
}

.window2:hover {
  background-color: rgba(235, 168, 60, 0.744);
}

.window3:hover {
  background-color: rgba(235, 168, 60, 0.744);
}

.window4:hover {
  background-color: rgba(235, 168, 60, 0.744);
}

article .window1 img {
  display: flex;
  justify-self: center;
  margin-top: 5em;
  margin-bottom: 2.5em;
  width: 7em;
  height: auto;
}

article .window2 img {
  display: flex;
  justify-self: center;
  margin-top: 5em;
  margin-bottom: 2.5em;
  width: 10em;
  height: auto;
}

article .window3 img {
  display: flex;
  justify-self: center;
  margin-top: 5em;
  margin-bottom: 2.5em;
  width: 5.5em;
  height: auto;
}

article .window4 img {
  display: flex;
  justify-self: center;
  margin-top: 5em;
  margin-bottom: 2.5em;
  width: 10em;
  height: auto;
}

/*Projekte stylen*/
.portfolio {
  display: flex;
  gap: 1em;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-left: 2em;
  margin-right: 2em;
}

.project {
  position: relative;
  justify-self: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  height: auto;
  border-radius: 5px;
}

.portfolio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.project:hover img {
  transform: scale(1.1);
  filter: brightness(0.4);
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(235, 168, 60, 0.498);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.3s ease;
  text-align: center;
  padding: 1em;
}

.project:hover .overlay {
  opacity: 1;
}

.overlay {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: lightgrey;
  font-weight: 600;
}

.overlay a:hover {
  color: black;
}

.overlay a {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: lightgrey;
  font-weight: 600;
}

/*Footer stylen*/
footer a {
  color: lightgrey;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin-left: 1em;
  margin-right: 1em;
  font-weight: 600;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
  color: rgba(235, 168, 60, 0.744);
}

footer {
  display: flex;
  position: sticky;
  bottom: 0;
  background-color: rgb(52, 53, 58);
  width: 100%;
  align-items: center;
  justify-content: center;
}

/* Container füllt fast die Bildschirmbreite */
.current-project-container {
  display: flex;
  justify-content: center;
  margin: 2em auto;
  width: 95%;
}

/* Projektfenster groß und proportional */
.current-project {
  width: 100%;
  max-width: 1200px; /* optional, damit es auf sehr großen Bildschirmen nicht zu breit wird */
  aspect-ratio: 16/9; /* proportional, verhältnis wie ein typisches Banner */
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.current-project img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* füllt den Container */
  object-position: top; /* obere Bildhälfte sichtbar */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.current-project .overlay {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertikal zentrieren */
  align-items: center; /* horizontal zentrieren */
  text-align: center; /* Text selbst zentrieren */
  padding: 1em;
  color: lightgrey;
  font-weight: 600;
}