@font-face {
    font-family: "Dolphins";
src: url("dolphins.ttf");
}

body {
    background-color:#5a5a5a;
    color: #00bfff;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display: flex;
    min-height: 100vh;
    margin: 0 auto;
    flex-direction: column;
    overflow-x: hidden;
   
}

main {
  
    flex: 1;
    justify-content: center;
    align-items: center;
  }

.kacheln {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px;

}

.kacheln a {
  border-radius: 2%;
  font-size: 6rem;
  padding: 1rem;
  height: 1em;
  width: 2em;
  margin: 5px;
  background-color: whitesmoke;

  text-align: center;
}

.fab, .far{
  
    background-color: grey;
    color: black;
    align-items: center;
  
 
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
  }
  
  .fa-instagram:hover {
    background: rgb(180, 69, 152);
    color: white;
  }
  
  .fa-xing:hover {
    background: rgb(12, 204, 12);
    color: white;
  }
  
  .fa-envelope:hover {
    background: rgb(0, 17, 255);
    color: white;
  }

  .fa-telegram:hover {
    background: rgb(110, 202, 255);
    color: white;
  }

  .fa-github:hover {
    background: rgba(24, 24, 24, 0.746);
    color: white;
  }

  .fa-orcid:hover {
    background: rgb(165, 205, 57);
    color: white;
  }

  .fa-researchgate:hover {
    background: #40ba9b;
    color: white;
  }

.rb {
    margin-top: 0.1em;
    margin-left: 0.1em;
    margin-right: 0.1em;
    width: 100%;
    -webkit-animation: rainbow 1s infinite;
    -o-animation: rainbow 1s  infinite; 
    -z-animation: rainbow 1s infinite;
    animation: rainbow 1s  infinite;
    font-family: 'Dolphins';
    color:  #228dff;
    flex-wrap: wrap;
    font-size: 8vw;
}

.move {
    animation: float 1s ease-out infinite;
}

.lookdown {
    animation: rotate 0.5s;    
    animation-fill-mode: forwards;
}


  
  @keyframes float {
    0%,100%{
        transform: translate(0, 0) rotate(5deg)  
    }
    50% {
       transform: translate(0, 10em) rotate(-5deg);
    }
  }


  
  @keyframes rotate {
	100% {transform: translate(0, 50vh) rotate(-90deg);}	
  }

a {
  text-decoration: none;
  }
  

  iframe {
    margin: 80px 0px;
    }