@font-face {
    font-display: swap;
    font-family: "Articulat CF Extra Light";
    src: local("Articulat CF Extra Light"),
         url("ArticulatCF-ExtraLight.woff2") format("woff2"),
         url("ArticulatCF-ExtraLight.woff") format("woff"),
         local("Helvetica Neue Light"),
         local("Roboto Light"),
         local("Segoe UI Light");
}

@font-face {
    font-display: swap;
    font-family: "Articulat CF Normal";
    src: local("Articulat CF Normal"),
         url("ArticulatCF-Normal.woff2") format("woff2"),
         url("ArticulatCF-Normal.woff") format("woff"),
         local("Helvetica Neue"),
         local("Roboto Regular"),
         local("Arial");
}

@font-face {
    font-display: swap;
    font-family: "Articulat CF Medium";
    src: local("Articulat CF Medium"),
         url("ArticulatCF-Medium.woff2") format("woff2"),
         url("ArticulatCF-Medium.woff") format("woff"),
         local("Helvetica Neue"),
         local("Roboto Medium"),
         local("Arial");
}

body {
    display: flex;
    flex-direction: column;
    background-color: #202020;
    color: #fff;
    height: 100vh;
    margin: 0;
    text-align: center;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font: 5rem "Articulat CF Normal", sans-serif;
    height: 100vh;
    line-height: 0.9;
    overflow-wrap: break-word;
    padding: 0.5em;
}

header {
    position: absolute;
    left: -1.1rem;
    background-color: #fb5300;
    font: 2rem "Articulat CF Medium", sans-serif;
    padding: 0.6rem;
    transform: skew(-30deg);
    width: 100px;
}

.skewfix {
    display: block;
    transform: skew(30deg);
}

footer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-top: 1px solid #fb5300;
    font: 1.2rem "Articulat CF Extra Light", sans-serif;
    height: 100px;
}

p {
    margin: 0;
}

a {
    border-bottom: 1px solid transparent;
    text-decoration: none;
    transition: border-bottom 0.2s ease;
}

a:hover {
    border-bottom: 1px solid;
}