@import url("https://use.typekit.net/mng6flw.css");

body{
    font-size: 200px;
    text-align: center;
    background-image: url(background.png);
    background-size: cover;
}

p {
    margin: 0;
}

.eka {
    font-family: solvent, sans-serif; 
    margin-bottom: -80px;
    color: aliceblue;
    transform: rotate(+10deg);
}

.toinen {
    font-family: feneon-single, sans-serif;
    margin-bottom: -120px;
    color: rgba(81, 109, 201, 0.726);
    transform: rotate(-10deg);
    letter-spacing: 10px;
    -webkit-text-stroke: 5px #74174a;
}

.kolmas {
    font-family: sedgwick, sans-serif; 
    margin-bottom: -100px;
    color: rgba(255, 228, 196, 0.788);
    z-index: 2;
    position: relative;
}

.neljas {
    font-family: west-end-decorate-shadow, sans-serif; 
    margin-bottom: -80px;
    color: rgb(103, 100, 255);
    text-shadow: 10px 5px 0px #a8a7ff00;
    transform: rotate(-10deg);
}

.kaikki{
    transform: rotate(5deg);
}

@keyframes filling {
    from{
      background-position: center 25%;
    }
    to {
      background-position: center 50%;
    }
  }
  
  .container-text {
    background-image:  url(https://static.pexels.com/photos/4827/nature-forest-trees-fog.jpeg);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    color:  #FFFFFF;
    padding-top: 20px;
    animation: filling 3s ease forwards;
  }