body {
    background-color:darkgrey;
}

    @font-face {
        font-family: 'Albertsthal Typewriter';
        src: url('Albertsthal Typewriter.ttf');
    }
    p{
        font-family:'Albertsthal Typewriter'
    }
@font-face {
    font-family: 'HERMES 1943';
    src: url('HERMES 1943.ttf') format('truetype');
}
@font-face {
    font-family: 'USIS 1949';
    src: url('USIS 1949.ttf') format('truetype');
}
h2 {font-family:'USIS 1949'}
h1{font-family:'HERMES 1943'}
.animace {
width:500px;height:500px}
.animace {
    width: 500px;
    opacity:1;
    height: 500px;
    background-color: red;
    position: relative;
 animation:infinite;
    animation-name: example;
    animation-duration:8s
}


@keyframes example {
    0% {
       
        left: 0px;
        top: 0px;

    }

    25% {
        
        left: 200px;
        top: 0px;
       
    }

    50% {
       
        left: 200px;
        top: 200px;
    }

    75% {
        
        left: 0px;
        top: 200px;
    }

    100% {
        
        left: 0px;
        top: 0px;
        
    }
}