:root {
  /*  Farben   */
  --blue: #2B395E;
  --lighter_blue: #738bb0;
  /*  Graustufen   */
  --white: #fff;
  --dark_white: #f7f7f7;
  --grey: #8991a4;
  --dark_grey: #262e40;
  --dark_grey_trans: #262e406f;
  --deblue_grey: #1D2330;
  --black: #111317;
}

/*  Allgemeine Bausteine  */
body {
  font-family: "Roboto", "Plus Jakarta", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--dark_grey);
}

header {
  background-color: var(--blue);
  color: var(--white);
  text-align: center;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3em;
}

.overlay {
    /*z-index: 500;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55); /* Adjust the alpha value for the desired transparency */
}

a {
  color: inherit;
}

/*  Klassen  */
/*  index.php  */
  /*  header  */
    /*  logo  */
    .header-left h1 {
      margin: 0;
      font-family: 'Azeret Mono', monospace;
    }
    
    .header-left a {text-decoration: none;}

    /*  navigator  */
    
    nav {display: none;}
@media only screen and (min-width: 680px) {
	nav {display: block;}

    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      font-family: "Roboto", "Plus Jakarta", sans-serif;
    }
    nav li {
      margin-right: 20px;
    }
    nav a {
      text-decoration: none;
      color: var(--white);
      font-weight: bold;
    }
}

    /*  email  */
    .header-right button {
      background-color: transparent;
      color: var(--white);
      padding: 8px 16px;
      border: 1px solid var(--grey);
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      font-family: "Roboto", "Plus Jakarta", sans-serif;
    }
    .header-right button:hover {
      background-color: var(--grey);
      transition: 0.2s;
      transition-timing-function: linear;
    }
@media only screen and (max-width: 310px) {
	.header-right {display: none;}
	.header-left {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);}
}

  /*  about me section  */

  .about-me {
    height: calc(100vh - 5em);
    background-color: var(--deblue_grey);
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .about-me-content {
    width: 100%;
    padding: 20px;
    background-size: 100% auto;
    /*max-height: calc((100vh - 2em) * 10 / 16);*/
    overflow: hidden;
    z-index: 999;
  }
  #mepic {
    overflow: hidden;
    height: 100%;
    object-fit: cover;
    object-position: 100% 0%;
    position: absolute;
    z-index: 1;
    right: 0;
  }

  path {
      fill: var(--lighter_blue);
  }
    
  .about-me-title,
  .about-me-text {
    margin-right: 20px;
    margin-left: 40px;
    flex-shrink: 0;
    color: var(--white);
  }
  .about-me-title {
    font-size: 48px;
    margin-bottom: 10px;
    font-family: 'Azeret Mono', monospace;
    max-width: 90vw;
  }
@media only screen and (max-width: 340px) {.about-me-title {font-size: 32px;}}
  .about-me-text {
    max-width: 85vw;
    font-size: 20px;
    text-align: left;
    line-height: 1.5;
    letter-spacing: 0.05px;
  }
@media only screen and (min-width: 630px) {.about-me-text {max-width: 60vw;}}

  /* portfolio */
  .section {
    height: 65vh; /* Adjusted height */
    width: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    margin-top: 3vh;
  }
  #projects {flex-direction: column; height: 97vh;}
  @media only screen and (min-width: 500px) {#projects {height: 65vh;}}
    /*Beschreibung*/
    .left-third {
      width: 100%;
      background-color: var(--dark_grey);
      color: var(--white);
      padding: 40px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-family: "Roboto", "Plus Jakarta", sans-serif;
      margin-top: -3vh;
    }
    .left-third p {
      font-size: 18px;
      margin-top: 0px;
    }
    .left-third h2 {
      font-family: 'Azeret Mono', monospace;
      font-size: 24px;
    }
@media only screen and (min-width: 940px) {
	#projects {flex-direction: row;}
	.left-third {width: 33.3333%; margin-top: 0;}
}

    /*slideshow*/
    .slideshow-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      height: inherit;
    }
@media only screen and (min-width: 940px) {.slideshow-container {width: 66.6667%;}}
    .slide {
      width: 100%;
      height: 100%;
      display: none;
    }
    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
      #bandpic {
        object-position: 50% 0%;
      }
      /*slide text*/
      .slide-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: var(--white);
      }
      .slide-text {
        font-size: 18px;
        font-family: "Roboto", "Plus Jakarta", sans-serif;
        text-decoration: none;
        color: var(--white);
      }
      .slide-title {
        font-size: 24px;
        margin-bottom: 10px;
        font-family: 'Azeret Mono', monospace;
      }
      /*slide buttons*/
      .next, .prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        color: var(--white);
        background-color: var(--dark_grey);
        border: none;
        padding: 10px; 
        cursor: pointer;
        transition: background-color 0.3s;
      }
      .next:hover, .prev:hover {
        background-color: var(--grey);
      }
      .next {
        right: 0;
      }
      .prev {
        left: 0;
      }

  /*kontaktformular*/
  .leftthirds {
    /*width: 66.6667%;*/
    width: 100%;
    /*overflow: hidden;*/
    position: /*relative*/absolute;
    z-index: -1;
  }
  .leftthirds img {
    width: 100%;
    height: 75vh;
    object-fit: cover;
    object-position: 0% 100%;
  }
  .rightthird {
    position: absolute;
    right: 40px;
    top: 50%;
    translate: 0 -50%;
    width: clamp(300px, calc(100% - 80px), 450px);
    background-color: var(--dark_grey_trans);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--white);
    padding: 40px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Roboto", "Plus Jakarta", sans-serif;
    text-align: right;
    border-radius: 10px;
  }
  .rightthird p {
    font-size: 1em;
    margin-top: 0px;
  }
  .rightthird h2 {
    font-family: 'Azeret Mono', monospace;
    font-size: 1.2em;
  }
  .rightthird a {
    text-decoration: none;
    color: var(--white);
    font-family: 'Roboto Mono', monospace;
  }
  @media only screen and (max-width: 380px) {
    .rightthird {
  	width: 100vh; 
  	border-radius: 0;
  	right: 0;
  }}

  /*scroller*/
    .scroller {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        height: fit-content;
    }

    .scrolling-section {
        display: flex;
        width: 100%; /* Set the total width to 300% to accommodate three boxes */
        animation: 60s slide infinite linear; /*60s*/
        /*display: inline-block;*/
        /*white-space: nowrap;*/
    }

    .box {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        
        color: var(--white);
        padding: 20px;
    }


    .v-al {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;

      /*border: 2px solid var(--grey);
      border-radius: 1em;*/
      padding: 1.5em;
    }

    .raz {
      width: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      /*justify-content: center;*/
    }
    
/*animations-value: breite der box mal anzahl der verschiedenen Boxen*/
@keyframes slide {from {transform: translateX(0);} to {transform: translateX(-400%);}}

@media only screen and (min-width: 570px) {@keyframes slide {from {transform: translateX(0);} to {transform: translateX(-266.6668%);}}}
@media only screen and (min-width: 570px) {.box {flex: 0 0 66.6667%;}}
@media only screen and (min-width: 830px) {@keyframes slide {from {transform: translateX(0);} to {transform: translateX(-200%);}}}
@media only screen and (min-width: 830px) {.box {flex: 0 0 50%;}}
@media only screen and (min-width: 1170px) {@keyframes slide {from {transform: translateX(0);} to {transform: translateX(-133.3332%);}}}
@media only screen and (min-width: 1170px) {.box {flex: 0 0 33.3333%;}}
      /*scroller content*/
      .quote {
        display: flex;
        flex-direction: column;
        height: 2.6667em; /*1.3333em pro geschr. Zeile*/
        justify-content: space-around;
        margin-bottom: 0;
      }

      .rezpic {
        display: none;
        width: 4em;
        height: 4em;
        object-fit: cover;
        border-radius: 50%;
      }

      .quote p {
        margin: 0 0 0 0; /*letzte müsste 10 für mit bild*/
      }

      .rezaut {
        font-style: italic;
      }

      .reztext {
        margin: 0;
        padding: 0;
      }

      .stars {
        padding: 0;
        margin: 0 10px 0 0; /*zwote und dritte vertauschen für mit bild*/
      }

      .star {
        height: 1em;
        width: 1em;
        object-fit: cover;
        /*margin: 0 5px 0 0;*/
        padding: 0;
      }

      .reztitle {
        font-weight: bold;
        display: none; /*->height of .quote*/
      }

  /*footer*/
  footer {
    background-color: var(--deblue_grey);
    color: var(--white);
    text-align: center;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Roboto", "Plus Jakarta", sans-serif;
  }
  .footer-left {display: none;}
@media only screen and (min-width: 560px) {
  .footer-left {
    display: flex;
    align-items: center;
  }
  .footer-left img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .footer-left h2 {
    font-family: 'Azeret Mono', monospace;
    margin: 0;
    padding-right: 25px;
  }}
  .footer-right {
    margin: 0;
  }
  .footer-right {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .footer-right img {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }
  .bicon {
    margin-left: 10px;
  }
  .copyright {
    font-size: 14px;
    padding: 0 25px;
  }
    .copyright a {
      text-decoration: none;
      color: inherit;
    }

/*Impressum.php*/
  #impbody {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #impressum {
    color: var(--white);
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    padding: 40px;
  }
  #impressum h1 {
    font-family: 'Azeret Mono', monospace;
  }
  #impressum a {
    color: inherit;
  }