@font-face {
    font-family: 'Verbatim Wide';
    src: local('Verbatim Wide Bold'), local('Verbatim-Wide-Bold'),
        url('Verbatim-WideBold.woff2') format('woff2'),
        url('Verbatim-WideBold.woff') format('woff'),
        url('Verbatim-WideBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

.ibm-plex-sans-light {
    font-family: "IBM Plex Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.ibm-plex-sans-regular {
    font-family: "IBM Plex Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.ibm-plex-sans-medium {
    font-family: "IBM Plex Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.ibm-plex-sans-bold {
    font-family: "IBM Plex Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

body {
    background-color: #f9f9f9;
}

h1 {
    font-family: 'Verbatim Wide', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #000;
}

a, a:link, a:visited {
    text-decoration: none;
    color: #f48c1c;
}

.hero {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}