* {
    margin: 0; 
    padding: 0; 
}
.wrap {
    position: fixed;
    z-index: 10000;
    background-color: rgb(212, 212, 212);
    top: 30vh;
    left: 10vw;
    width: 55px;
}

.wrap a {
    color: black;
    text-decoration: none;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align:right;
    margin: 5px 1px;
}



/* --------- projects ------ */


  .container {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .box {
    background-image: url(https://media.giphy.com/media/hEc4k5pN17GZq/giphy.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 20vh;
    width: 30vh;
    position: absolute;
  }
  .box p {
    text-align: center;
    vertical-align: middle;
    line-height: 20vh; 
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  
  p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
  
  





.blue {
    background-image: url(2.jpg);
  }
  .blue2 {
    background-image: url(1.jpg);
  }


.red {
  background-color: rgb(0, 255, 0);
  animation-name: example;
  animation-duration: 0.2s; 
  animation-iteration-count: infinite;
}
@keyframes example {
  0% {background-color: rgb(255, 0, 0);}
  25% {background-color: rgb(255, 0, 255);}
  50% {background-color: rgb(0, 0, 255);}
  75% {background-color: rgb(0, 255, 0);}
  100% {background-color: rgb(251, 255, 0);}
}

  .red p {
    color: lightgray;
  }

  .blur {
  filter: blur(10px);
  }

  .eins {
    width: 100px;
    height: 100px;
    background-color: white;
    position: fixed;
    right: 200px;
    top: 200px;
  }
  .zwei {
    z-index: -10;
    width: 100px;
    height: 100px;
    background-color: white;
    position: fixed;
    right: 170px;
    top: 230px;
  }


  .big {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 100;
    color: lightgray;
}

.bigger {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 100;
    font-size: 60vh;
    color: pink;
}

.noV{
  visibility: hidden;
}

.V {
  visibility: visible;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 8vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 100;
    color: black;
    animation: hui 0.2s infinite;
}

@keyframes hui {
  0% {color: rgb(255, 0, 200);}
  25% {color: green;}
  50% {color: blue;}
  75% {color: red;}
  100% {color: yellow;}
}