* {
    margin: 0;
    padding: 0;
    outline: none;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    color: #000000;
    background: transparent;
    border: none;
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    /* radial-gradient(at top, #b0ccb0 0%, #ddd 100%) */
    /* background: url(https://github.com/misalagp/imgs/blob/main/noise.png?raw=true), radial-gradient(at top, #c5bce4 0%, #b2c0dc 100%); */
    background: url(https://github.com/misalagp/imgs/blob/main/noise.png?raw=true), radial-gradient(at top, #2d273e 40%, #162345 100%);
}

header {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
}

main {
  margin: 0 auto;
  max-width: 1500px;
  padding: 125px;

  /* -- TITLE -- */
  .title {
    padding: 5vh 0;
  }

  .title h1 {
    font-size: clamp(30px, 3vw, 60px);
    user-select: none;
    color: #fff;
  }

  h2 {
    padding-top: 50px;
    color: #fff;
  }

  h3 {
    padding-top: 25px;
    color: #fff;
  }

  h4 {
    padding-top: 10px;
    color: #fff;
  }

  p {
    text-align: justify;
    color: #fff;
    font-size: 16px;
  }

  p a {
    color: #fff;
    text-decoration: underline 0.5px solid;
  }

  li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 5px;
    color: #fff;
    text-align: justify;
  }

  li::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(../img/icon-bulletPoint.svg) no-repeat center center;
    background-size: contain;
    margin-top: 5px;
    margin-right: 10px;
    flex-shrink: 0;
    filter: invert();
  }

  span {
    color: #fff;
  }

  #bold{
    color: #fff;
    font-weight: bold;
  }

  .img-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    margin: 0 auto;
  }

  .img-wrapper img {
    width: 100%;
    margin-top: 5vh;
    margin-bottom: 5vh;
  }
}

video {
  display: flex;
  margin: 0 auto;
  width: clamp(0px, 100%, 1920px);
}


/* ---------------------------------------------- */
/* 1 Website WT */
.img-wrapper {
  a {
    width: clamp(0px, 100%, 1000px);
    margin: 0 auto;
  }

  #img-1-1 {
    width: clamp(0px, 100%, 1000px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* 2 Prog3 */
#img-wrapper-2-1 {
  
  #img-2-1, #img-2-2, #img-2-3, #img-2-4 {
    height: 100%;
    margin-bottom: 5vh;
  }

  #img-2-1 {
    width: clamp(0px, 100%, 300px);
  }

  #img-2-2, #img-2-3, #img-2-4 {
    height: clamp(0px, 100vh, 300px);
    width: fit-content;
  }
}

/* 3 Webprog GO */
.img-wrapper {
  #img-3-1 {
    width: clamp(0px, 100%, 300px);
  }

  #img-3-2 {
    margin-top: 0;
  }

  #img-3-2, #img-3-3, #img-3-4, #img-3-5 {
    width: clamp(0px, 100%, 700px);
    height: fit-content;
    margin-bottom: 0;
  }
}

/* 4 Einf. Games Eng.  */
.img-wrapper {
  #img-4-1, #img-4-2, #img-4-3 {
    width: clamp(0px, 100%, 1000px);
  }

  #img-4-6, #img-4-7 {
    width: clamp(0px, 100%, 500px);
    margin-right: 2vw;
  }

  #img-4-4, #img-4-5, #img-4-8 {
    width: clamp(0px, 100%, 500px);
  }
}

/* 5 Android App */
.img-wrapper {
  #img-5-1 {
    width: clamp(0px, 100%, 300px);
    filter: invert();
  }

  #img-5-2, #img-5-3, #img-5-4, #img-5-5, #img-5-6 {
    width: clamp(200px, calc(20% - 2vw), 350px);
  }
}

/* 6 DIO Website */
#img-wrapper-6-1, #img-wrapper-6-2 {
  justify-content: center;
}

.img-wrapper {
  #img-6-1, #img-6-2, #img-6-3, #img-6-4, #img-6-5, #img-6-6 {
    width: clamp(0px, 100%, 1000px);
  }
}

.collapsible {
  margin: 50px auto 0 auto;
  display: block;
  background-color: rgba(2, 2, 2, 0.25);
  transition: background-color 0.2s ease-in-out;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: clamp(0px, 100%, 1100px);
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;

  img {
    float: right;
    margin: auto;
    height: 20px;
    rotate: 90deg;
    transition: rotate 0.2s ease-in-out;
  }
}

.active, .collapsible:hover {
  background-color: rgba(0, 0, 0, 0.75);
  transition: background-color 0.2s ease-in-out;
}

.active {
  border-radius: 10px 10px 0 0;
  transition: max-height 0.5s ease-in-out;
  img{
    rotate: -90deg;
    transition: rotate 0.2s ease-in-out;
  }
}

.content {
  margin: 0 auto;
  display: block;
  width: clamp(0px, 100%, 1100px);
  padding: 0 18px;
  background-color: rgba(2, 2, 2, 0.25);
  border-radius: 0 0 10px 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

/* 7 WebProg */
#img-wrapper-7-1 {
  justify-content: center;
  gap: 2%;
  #img-7-1, #img-7-2 {
    width: clamp(0px, 48%, 800px);
    height: 100%;
  }
}

.img-wrapper {
  #img-7-3, #img-7-4 {
    width: clamp(0px, 100%, 500px);
  }
}

.grid-7-1 {
  display: grid;
  grid-template-columns: 215px 215px;
  grid-template-rows: 100%;
  gap: 15px 15px;
  grid-template-areas:
    ". .";
}

.grid-7-2 {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px;
  gap: 15px 15px;
  grid-template-areas: ". . . .";
}

.grid-7-2 div:nth-child(n) {
  border-radius: 10px;
  align-content: center;
  text-align: center;
}

.grid-7-2 div:nth-child(1) {
  background-color: rgba(86,86,86,255);
}

.grid-7-2 div:nth-child(2) {
  background-color: rgba(250,250,250,255);
}

.grid-7-2 div:nth-child(3) {
  background-color: rgba(252,210,2,255);
}

.grid-7-2 div:nth-child(4) {
  background-color: rgba(238,238,238,255);
}

/* --------------------------- */

/* 101 Film  */
.img-wrapper {
  #img-101-1, #img-101-2, #img-101-3, #img-101-4 {
    width: clamp(0px, 100%, 550px);
  }

  #img-101-1, #img-101-2 {
    margin-top: 2vh;
  }
}

/* 102 CD  */
.arrow-div {
    display: flex;
    flex-direction: column;
    margin-left: 37.5%;
    color: #fff;
    text-align: center;
    animation: bounce 3.6s ease infinite;
  }
  
  .arrow {
    margin: -5px auto 10px auto;
    height: 25px;
    transform-origin: 50% 50%;
    filter: invert(1);
  }
  
  @keyframes bounce {
    0% {
      transform: translateY(0);
    }
    5.55556% {
      transform: translateY(0);
    }
    11.11111% {
      transform: translateY(0);
    }
    22.22222% {
      transform: translateY(-5px);
    }
    27.77778% {
      transform: translateY(0);
    }
    33.33333% {
      transform: translateY(-5px);
    }
    44.44444% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(0);
    }
  }

.book-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.book {
    transition: opacity 0.4s 0.2s;
  }

  
  .page {
    width: 30vw;
    height: 44vw;
    background-color: #111111;
    float: left;
    margin-bottom: 0.5em;
    background: left top no-repeat;
    background-size: cover;
  }
  .page:nth-child(even) {
    clear: both;
  }
  .book {
    perspective: 250vw;
    margin: 0 auto;
    margin-bottom: 5vh;
  }
  .book .pages {
    width: 60vw;
    height: 44vw;
    position: relative;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border-radius: 4px;
    /*box-shadow: 0 0 0 1px #e3dfd8;*/
  }
  .book .page {
    float: none;
    clear: none;
    margin: 0;
    position: absolute;
    top: 0;
    width: 30vw;
    height: 44vw;
    transform-origin: 0 0;
    transition: transform 1.4s;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    cursor: pointer;
    user-select: none;
    background-color: #ffffff;
  }
  .book .page:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.7s;
    z-index: 2;
  }
  .book .page:nth-child(odd) {
    pointer-events: all;
    transform: rotateY(0deg);
    right: 0;
    border-radius: 0 4px 4px 0;
    background-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 10%);
  }
  .book .page:nth-child(odd):hover {
    transform: rotateY(-15deg);
  }
  .book .page:nth-child(odd):hover:before {
    background: rgba(0, 0, 0, 0.03);
  }
  .book .page:nth-child(odd):before {
    background: rgba(0, 0, 0, 0);
  }
  .book .page:nth-child(even) {
    pointer-events: none;
    transform: rotateY(180deg);
    transform-origin: 100% 0;
    left: 0;
    border-radius: 4px 0 0 4px;
    border-color: black;
    background-image: linear-gradient(to left, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 10%);
  }
  .book .page:nth-child(even):before {
    background: rgba(0, 0, 0, 0.2);
  }
  .book .page.grabbing {
    transition: none;
  }
  .book .page.flipped:nth-child(odd) {
    pointer-events: none;
    transform: rotateY(-180deg);
  }
  .book .page.flipped:nth-child(odd):before {
    background: rgba(0, 0, 0, 0.2);
  }
  .book .page.flipped:nth-child(even) {
    pointer-events: all;
    transform: rotateY(0deg);
  }
  .book .page.flipped:nth-child(even):hover {
    transform: rotateY(15deg);
  }
  .book .page.flipped:nth-child(even):hover:before {
    background: rgba(0, 0, 0, 0.03);
  }
  .book .page.flipped:nth-child(even):before {
    background: rgba(0, 0, 0, 0);
  }
  .page:nth-child(odd){
    background-position: right top;
  }
  
  .page > img {
    width: 31vw;
    height: 100%;
    border: 1px solid black;
  }

.img-wrapper {
    #img-102-1, #img-102-2, #img-102-3, #img-102-4, #img-102-5, #img-102-6, #img-102-7, #img-102-8 {
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
    }

    #img-102-1 {
        width: clamp(0px, 100%, 600px);
        filter: brightness(0) invert(1);
    }
    
    #img-102-2, #img-102-3, #img-102-4 {
        width: clamp(0px, 100%, 300px);
    }

    #img-102-5, #img-102-6 {
        width: clamp(0px, 100%, 400px);
    }

    #img-102-7, #img-102-8 {
        width: clamp(0px, 100%, 500px);
    }
}

/* 103 3D Mod */
.img-wrapper {
  #img-103-1 {
    width: clamp(0px, 100%, 1000px);
  }

  #img-103-2 {
    width: clamp(0px, 100%, 500px);
  }
}

/* 104 MG3 */
#img-wrapper-104-1 {
    flex-direction: column;
    align-items: center;

    #img-104-1, #img-104-2 {
        width: clamp(0px, 100%, 500px);
    }
}

.img-wrapper {
    #img-104-3, #img-104-4 {
        margin-left: auto;
        margin-right: auto;
        width: clamp(0px, 100%, 800px);
    }
}

#img-wrapper-104-2 {
    justify-content: center;

    #img-104-5, #img-104-6, #img-104-7 {
        width: fit-content;
        max-height: 220px;
        margin: 5vh auto;
        padding: 0 10px;
    }
}

.img-wrapper #img-104-8 {
    margin-left: auto;
    margin-right: auto;
    width: clamp(0px, 100%, 600px);
}

/* 105 3D Anim */
#img-wrapper-105-1, #img-wrapper-105-2, #img-wrapper-105-3, #img-wrapper-105-4 {
  flex-direction: column;
  align-items: center;
}

.img-wrapper {
  #img-105-1, #img-105-2, #img-105-3, #img-105-4 {
    width: clamp(0px, 100%, 1000px);
  }
}

/* 106 Fotos */
#img-wrapper-106-1 {
  display: grid;
  grid-template-rows: auto; 
  gap: clamp(0px, 5vw, 500px); 
  grid-template-areas: 
    ". . ."
    ". . ."
    ". . ."; 
}

#img-106-1, #img-106-2, #img-106-3, #img-106-4, #img-106-5, #img-106-6, #img-106-7, #img-106-8, #img-106-9 {
  width: 100%;
  margin: 0;
}

#img-106-1, #img-106-2, #img-106-3 {
  margin-top: 5vh;
}

#img-106-7, #img-106-8, #img-106-9 {
  margin-bottom: 5vh;
}


#img-106-10, #img-106-11, #img-106-12 {
  width: clamp(0px, calc(100%/3 - 2vw), 400px);
}


/* 107 GrafikdesingAR */
.img-wrapper {
  #img-107-1, #img-107-2, #img-107-3 {
    width: clamp(0px, 100%, 500px);
  }

  #vid-107-1, #vid-107-2, #vid-107-3 {
    width: clamp(0px, 100%, 500px);
  }
}

/* 108 MG1 */
.img-wrapper {
  #img-108-1, #img-108-2, #img-108-3 {
    width: clamp(0px, 100%, 500px);
  }
}

/* 109 PM */
.img-wrapper {
  --width1: 300px;
  --width2: 600px;

  #div-109-1 {
    width: clamp(0px, 100%, var(--width1));
  }

  #div-109-2 {
    width: clamp(0px, 100%, var(--width2));
  }

  p {
    width: fit-content;
    margin-bottom: -4vh;
  }

  #img-109-1, #img-109-2, #img-109-3, #img-109-4, #img-109-5 {
    max-height: 225px;
    width: fit-content;
  }

  #img-109-6, #img-109-7, #img-109-8, #img-109-9, #img-109-12, #img-109-13, #img-109-14, #img-109-15, #img-109-16, #img-109-19, #img-109-20 {
    width: clamp(0px, 100%, var(--width1));
  }

  #img-109-10, #img-109-11, #img-109-13, #img-109-17, #img-109-18, #img-109-21 {
    width: clamp(0px, 100%, var(--width2));
  }
}

/* 113 Sounddesign */
.img-wrapper {
  #img-113-1, #img-113-2 {
    width: clamp(0px, 100%, 800px);
  }
}

/* Media Querry */
@media screen and (max-width: 480px) {
  main {
    padding: 10%;
  }

  p {
    font-size: 16px;
  }
}