@font-face {
    font-family: 'Windows';
    src: url(./fonts/windows_regular-webfont.woff) format('woff'), url(./fonts/windows_regular-webfont.woff2) format('woff2'), url(./fonts/Windows-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Hubot Sans';
    src:
      url('./fonts/Hubot-Sans.woff2') format('woff2 supports variations'),
      url('./fonts/Hubot-Sans.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-stretch: 75% 125%;
  }
  html {
    font-family: 'Hubot Sans';
  }

.instructions-link {
    animation: highlight 2s infinite;
    text-decoration: none;
}

@keyframes highlight {
    0%, 100% {
        color: #ff0000;
    }
    50% {
        color: #003cff;
    }
}


.title {
    font-family: 'Hubot Sans';
    font-weight: bolder;
    font-size: 50px;
}

.subtitle {
    font-family: 'Hubot Sans';
    font-weight: 600;
    font-size: 30px;
}

.knopje {
    border: 1px solid #000;
    background: linear-gradient(180deg, #8C8C8C 25%, #434343 75%);
    display: inline-block;
    font: 19px "Windows", monospace;
    padding: 0 5px;
    font-size: 13px;
    color: darkred;
    text-decoration: none;

}

.knopje:hover {
    text-decoration: none;
}

.knopje:active {
    background: linear-gradient(180deg, #b0b0b0 25%, #504f4f 75%);
}