@font-face {
    font-family: 'Mercure';
    src: url('font/mi.woff2') format('woff2'),
        url('font/mi.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mercure';
    src: url('font/mr.woff2') format('woff2'),
        url('font/mr.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mercure Transcript';
    src: url('font/mt.woff2') format('woff2'),
        url('font/mt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mercure Ulysses';
    src: url('font/mu.woff2') format('woff2'),
        url('font/mu.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body{
    margin: 0;
}

h1{
    font-family: 'Mercure Ulysses', serif;
    font-weight: 100;
    margin: 0px;
    font-size: 5vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline;
    white-space: nowrap;
}

.topdiv {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}