.portfolio-wrapper {
  max-width: 100%;
  height: 100vh;
  margin: 0;
  padding: 3rem 0 5rem 0;
}

/* ###################################################################### */
/* ### Typing-Text ### */
/* ###################################################################### */

.wrapper {
  margin: 3rem 0 2rem 1rem;
}

.typing {
  width: 9ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 4em;
  color: #333;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}


/* .portfolio-wrapper h1 {
  color: #ffcc33;
  font-size: 4rem;
  margin: 3rem 0; 
}*/

/* ###################################################################### */
/* ### Text mit RKL-Effekt ### */
/* ###################################################################### */
/*
  .flicker {
    font-size: 5rem;
    font-family: 'Merienda', sans-serif;
    margin: 2rem auto 1rem auto;
    color: #33333371;
    background: -webkit-gradient(linear, left top, right top, from(#ff8800), to(#1d1c1c), color-stop(0.8, #FF4F00)) no-repeat;
    background: gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.8, #ff8800)) no-repeat;
    background-size: 200px 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: flick 3s infinite;
  }
  @keyframes flick {
    0% {
      background-position: top left;
    }
    100% {
      background-position: top right;
    }
  }
  
  @media only screen and (max-width: 480px) {
   .flicker {
  color: #ffcc33;
  font-size: 5.5rem;
  margin: 3rem 0 2rem 0;
  text-align: center; 
  }
}
*/

/* ###################################################################### */
/* ### Portfolio-Bilderblock ### */
/* ###################################################################### */

.portfolio-grid {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  list-style: none;
  align-items: center;
  grid-gap: 0.5rem;
  grid-template-areas: 
  "box1 box1 box2 box3"
  "box1 box1 box4 box5"
  "box6 box7 box8 box8"
  "box9 box10 box8 box8"
  }
  
  @media only screen and (max-width: 480px) {
   .portfolio-grid {
   display: grid;
   grid-template-columns: 50% 50%;
   list-style: none;
   align-items: center;
   grid-gap: 0.5rem;
   grid-template-areas: 
   "box1 box1"
   "box1 box1"
   "box2 box3"
   "box4 box5"
   "box6 box7"
   "box8 box9"
   "box10 box11"
    }
  } 
 
 .portfolio-grid li {
  transition: 250ms;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3)  ; 
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3)  ; 
   -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3)  ; 
  animation: fadein 1s ease-out normal backwards;
  max-width: 100%;
 } 
  
 .portfolio-grid li:hover {
   z-index: 2;
   position: relative;
   box-shadow: 0 1.5rem 2.8rem rgba(0,0,0,0.30), 0 1rem 1rem rgba(0,0,0,0.30);
   transform: translate(0,-0.1rem) scale(1.02);
  } 
 
 .portfolio-grid li:nth-child(1) {
   grid-area: box1;
   max-height: 100%;
   object-fit: cover;
   animation-delay: 0ms;
  } 
 
 .portfolio-grid li:nth-child(2) {
   grid-area: box2;
   animation-delay: 100ms;
 } 
 
  .portfolio-grid li:nth-child(3) {
    grid-area: box3;
    max-height: 100%;
    object-fit: cover;
    animation-delay: 200ms;
  } 
  .portfolio-grid li:nth-child(4) {
    grid-area: box4;
    max-height: 100%;
    object-fit: cover;
    animation-delay: 200ms;
  } 
  
  .portfolio-grid li:nth-child(5) {
    grid-area: box5;
    max-height: 100%;
    object-fit: cover;
    animation-delay: 300ms;
  } 
  .portfolio-grid li:nth-child(6) {
    grid-area: box6;
    max-height: 100%;
    object-fit: cover;
    animation-delay: 100ms;
  } 
  .portfolio-grid li:nth-child(7) {
    grid-area: box7;
    max-height: 100%;
    object-fit: cover;
    animation-delay: 200ms;
  } 
  .portfolio-grid li:nth-child(8) {
    grid-area: box8;
    max-height: 100%;
    object-fit: cover;
    animation-delay: 400ms;
  } 
  
  .portfolio-grid li:nth-child(9) {
    grid-area: box9;
    max-height: 100%;
    object-fit: cover;
    animation-delay: 200ms;
  } 
  .portfolio-grid li:nth-child(10) {
    grid-area: box10;
    max-height: 100%;
    object-fit: cover;
    animation-delay: 300ms;
  } 
  .portfolio-grid li:nth-child(11) {
    
  } 
  .portfolio-grid li:nth-child(12) {
    
  } 

.portfolio-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      }  

@keyframes fadein {
  0% {transform: scale(0);}
  80% {transform: scale(1.05);}
  100% {transform: scale(1);}
}