@font-face {
    font-family: 'Zilla Slab';
    src: url("font/zilla_slab_bold.woff");
    font-weight: 600;
    font-style: normal;
}

body {
    font-family: 'Zilla Slab';
    background: linear-gradient(90deg, white 20px, transparent 1%),
                linear-gradient(white 20px, transparent 1%),
              black;
    background-size: 22px 22px;
    text-align: center;
}

.text-block {
    background-color: white;
    padding: 0 10px;
}

a {
    color: #f91f8b;
    text-decoration: none;
}

@media (min-width: 500px) {
    body {
        background-position-y: calc(20vh + 12px);
        background-position-x: 3px;
    }

    .text-block {
        width: fit-content;
        width: -moz-fit-content;
        width: -webkit-fit-content;
        margin: auto;
    }

    #title {
        font-size: 60pt;
        margin-top: 20vh;
        margin-bottom: 10px;
    }
    
    #subtitle {
        font-size: 30pt;
        margin-top: 10px;
    }

    #contact {
        font-size: 14pt;
    }
}

@media (min-width: 500px) and (max-width: 750px) {
    #title {
        font-size: 40pt;
        margin-bottom: 10px;
    }
    
    #subtitle {
        font-size: 20pt;
        margin-top: 10px;
        padding-bottom: 3px;
    }

    #contact {
        font-size: inherit;
    }
}

@media (max-width: 500px) {
    body {
        margin: 0;
    }

    .text-block {
        width: 100vw;
        padding: 0;
    }

    #title {
        font-size: 20pt;
        margin-top: 26px;
        margin-bottom: 14px;
    }

    #subtitle {
        font-size: 16pt;
        margin-bottom: 24px;
    }
}