@font-face {
    font-family: "diagramm-regular";
    src: url("/fonts/diagramm-regular.ttf") format("ttf"),
}

html{
    background: url(img/water.jpg) no-repeat center fixed violet; 
    -webkit-background-size: cover; 
    background-size: cover; 
    padding: 0;
    margin: 0;
}
body{
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}


a{
    display: inline-block;
    text-decoration: none;
}

.portfolio a:hover p, .contact a:hover p{
    background-color: blue;
}

.lea{
    flex: 1;
    display: flex;
}
.portfolio{
    flex: 5;
    display: flex;

}
.contact{
    flex: 3;
    display: flex;

}

.lea a{
    animation: 4s linear infinite alternate slidein;
    font-size: 3em;
    padding: 20px;
}
.portfolio a{
    animation: 6s linear infinite  slidein2;
    font-size: 4em;
}

.contact a{
    animation: 3s linear infinite alternate slidein3;
    font-size: 2em;
    position:relative;
}

div a p{
    background-color: violet;
    padding: 10px;
}

p{
    font-family: diagramm-reglular;
    color: #41ee0c;
    font-weight: bold;
    display: block;
}



@keyframes slidein {
    from {
         transform: scale(0.5, 1);
    }
         
    to   { 
        transform: scale(1, 0.5); 
    }
  }

  @keyframes slidein2 {
    from {
         transform: scale(0.7, 1.5);
    }

    50%{
        transform: scale(1, -1); 
    }
         
    80%{ 
        transform: scale(0.5, 0.5); 
    }
    100%{
        transform: scale(0.7, 1.5);
    }
  }

  @keyframes slidein3 {
    from {
        transform: skewX(-60deg);
        -webkit-transform: skewX(-60deg); /* Safari & Chrome */
        -moz-transform: skewX(-60deg); /* Firefox */
        -ms-transform: skewX(-60deg); /* Internet Explorer */
        -o-transform: skewX(-60deg); /* Opera */
   }
        
   to   { 
    transform: skewX(30deg);
    -webkit-transform: skewX(30deg); /* Safari & Chrome */
    -moz-transform: skewX(30deg); /* Firefox */
    -ms-transform: skewX(30deg); /* Internet Explorer */
    -o-transform: skewX(30deg); /* Opera */
   }
  }

  @media all and (max-width: 1200px){ /*smartphones*/
    .portfolio a{
        margin-left: calc(70% - 70px);
        font-size: 2em;
    }
    .contact a{
        margin: 30%;
        font-size: 1em;
    }
    .lea a{
        margin-left: 10%;
        font-size: 1.5em;
    }
  }

  @media all and (min-width: 1201px){ /*ordis*/
    .portfolio a{
        margin-left: 70%;
    }
    .contact a{
        margin: 0 20% 0 30%;
    }
    .lea a{
        margin-left: 10%;
    }
  }