@font-face {
    font-family: lavinia;
    src: url(../font/Lavinia.otf);
}

body {
    background: #000000;
    background: linear-gradient(180deg, #253745 0%, #9cadb5 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    font-family: lavinia;
}

img {
    width: 50vw;
    animation: 3s ease-in 250ms 1 normal both running slideout;
    @media (min-width: 840px) {
        width: 20vw;
    }
}

h1 {
    color: #9cadb5;
    font-size: 1.5rem;
    text-transform: uppercase;
    animation: 3s ease-in 250ms 1 normal both running slidein;
    @media (min-width: 840px) {
        font-size: 3rem;
    }
}

@keyframes slidein {
    from { 
        transform: translate(-20%); 
        opacity: 0;
    }
    to   { 
        transform: translate(0); 
        opacity: 1;
    }
  }
@keyframes slideout {
    from { 
        transform: translate(20%); 
        opacity: 0;
    }
    to   { 
        transform: translate(0); 
        opacity: 1;
    }
  }