@font-face {
    font-family: 'Radiogrotesk';
    src: url('fonts/RadioGrotesk.otf') format('opentype');
  }

@font-face {
    font-family: 'EditorialOld';
    src: url("fonts/EditorialOld.otf") format("opentype");
}


body.index { 
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fa3b41;
  }


  /**/


h1.title {
    color: #000;

    font-family: 'EditorialOld', sans-serif;
    font-size: 40px;
    font-weight: normal;
    line-height: 120%;

    margin: 0 2vh 3vh 2vh;
}

p {
    font-family: 'Radiogrotesk', sans-serif;
    font-size: 18px;
    line-height: normal;

    margin: 0 2vh 0 2vh;
}

p.description {
    margin-bottom: 18px;
}

p.credit {
    font-size: 14px;
    text-align: right;

    margin-bottom: 35px;
}

div.credits {
    float: left;
    width: 50%;
}

p.info {
    text-align: right;
}

a {
    color: #000;
    text-decoration: dotted underline;
}

div.contactbox1 {
    height: 60px;
}

div.contactbox2 {
  height: 40px;
}

div.contactbox3 {
  height: 40px;
  border-bottom: 1px solid #000;
}

div.box30 {
  height: 30px;
}

div.experiences p {
  margin-bottom: 40px;
}

.documentation {
  display: flex;
  flex-direction: column;
}

.doc1,
.doc2 {
  width: 80%;
  height: auto;
  margin-bottom: 2vh;
}

.doc1 {
  margin-right: auto;
  margin-left: 2vh;
}

.doc2 {
  margin-left: auto;
  margin-right: 2vh;
}

/* Clear floats */
.documentation::after {
  content: "";
  display: table;
  clear: both;
}

p.warn {
  font-size: 12px;
}



  /**/

  
  #image-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
  }
  
  img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: none;
  }
  
  img.visible {
    display: block;
  }
  
  #button-container {
    position: absolute;
    bottom: 2vh;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

    #svg-container {
      background: none;
      color: inherit;
      border: none;
      padding: 0;
      font: inherit;
      cursor: pointer;
      outline: inherit;
    }
  
  /* Rotate animation for the SVG */
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  button svg {
    animation: rotate 5s linear infinite;
    /* Adjust the duration and timing function as needed */
    fill: #000000;
    width: 100px;
    height: 100px;
  }

  #menu-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d9d9d9;
    display: none; 
  }

  #menu-container.show {
    display: flex;
    flex-direction: column;
    animation: slide-up 0.5s ease-in-out; 

  }

  #menu-container button {
    position: fixed;
    left: 2vh;
    bottom: 2vh;
    z-index: 99999;

    color: #000000;
    border: none;

    font-family: 'Radiogrotesk', sans-serif;
    font-size: 36px;
    text-align: left;
    text-decoration: none;

    background-color: #d9d9d9;
  }

  #menu-container a.menu {
    font-size: 36px;
    font-family: 'RadioGrotesk', sans-serif;
    color: #000000;
    text-decoration: none;
    text-transform: uppercase;
    padding: 2vh 2vh 2vh 2vh;
    border-bottom: 1px solid #000;
  }

  #menu-container a.menu:hover {
    font-family: 'EditorialOld', sans-serif;
    font-size: 2.3em;
    font-style: italic;
    color: #000000;
    background-color: #fa3b41;
    text-transform: uppercase;
  }


  #imprint {
    font-family: 'Radiogrotesk', sans-serif;
    font-size: 2.5em;
    font-weight: normal ;
    position: absolute;
    padding: 2vh;
    bottom: 0;
    right: 0;
    background-color: #d9d9d9;
    text-decoration: none;
  }
  
  @keyframes slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }


  body.sub {
    background-color: #d9d9d9;
}

  button.back {
    position: fixed;
    left: 2vh;
    bottom: 2vh;
    z-index: 99999;

    background-color: #fa3b41;
    border: none;

    font-family: 'Radiogrotesk', sans-serif;
    font-size: 2em;
    text-align: center;
    color: #000000;
    text-decoration: none;
}

  button.shuffle {
    position: fixed;
    right: 2vh;
    bottom: 2vh;
    z-index: 99999;

    background-color: #fa3b41;
    color: #000000;
    border: none;

    font-family: 'Radiogrotesk', sans-serif;
    font-size: 2em;
    text-align: center;
    text-decoration: none;
}

p.t {
  text-decoration: dotted underline;
}

div.overview img {
  margin: 2vh;
}



#toggleBox {
  cursor: pointer;
}

#toggleBox .boxContent {
  display: none;
}

#toggleBox.opened .boxContent {
  display: block;
}


#toggleBox2 {
  cursor: pointer;
}

#toggleBox2 .boxContent {
  display: none;
}

#toggleBox2.opened .boxContent {
  display: block;
}


#toggleBox3 {
  cursor: pointer;
}

#toggleBox3 .boxContent {
  display: none;
}

#toggleBox3.opened .boxContent {
  display: block;
}



@media screen and (min-width: 768px) {
  /* Adjust the width of the container for larger screens */
  .sub {
    width: 50%; /* Set the width to 50% for the left half of the screen */
  }
}






  /* h1.description {
    margin: 2vh 2vh 1vh 2vh;
  }

  div.credit {
    display: flex;
    justify-content: flex-end;

    margin: 0;
  }

  p.name {
    margin: 0 2vh 0 0;

    font-family: 'Radiogrotesk', sans-serif;
    font-size: 0.8em;
    text-align: right;
  }

  p.description {
    margin: 4vh 2vh 12vh 2vh;

    font-family: 'Radiogrotesk', sans-serif;
    font-size: 1.2em;
  }
   */
  /* div.contact {
    margin-left: 2vh;
    margin-bottom: 2vh;
    text-align: left;

    font-family: 'Radiogrotesk';
    font-size: 1.2em;
  }

  a.person {
    text-decoration: none;
    color: #000000;
  }

  p.buro {
    font-family: 'Radiogrotesk';
    margin-left: 2vh;
    margin-bottom: 20vh;
    font-size: 1.2em;
  }

  p.presi {
    font-family: 'Radiogrotesk';
    margin-left: 2vh;
    font-size: 1.2em;
  }

  h2.quotes {
    font-family: 'EditorialOld', sans-serif;
    font-weight: normal;
    font-size: 1.8em;
    line-height: 100%;

    margin-top: 0;
    margin-left: 2vh;
    margin-right: 2vh;
} */