/* fonts */
@font-face {
    font-family: 'w-head';
    src: url('assets/w-head.woff2') format('woff2');
    font-weight: bold;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('assets/Tomorrow-Regular.woff2') format('woff2');
}

/* General elements */
html, body {
    background: black;
    color: white;
    margin: 0;
    font-family: 'Tomorrow', 'Helvetica Neue', 'Roboto', 'Ubuntu', 'Segoe UI', sans-serif;
    scrollbar-color: white black;
}

h1, h2, h3 {
    font-family: 'w-head', 'Iosevka NF', 'Menlo', 'Liberation Mono', monospace;
    text-transform: uppercase;
}

h1 {
    font-size: clamp(1.5em, 10vw, 3em);
    letter-spacing: clamp(0px, 1vw, 13px);
}

h2 {
    font-size: clamp(1.5em, 8vw, 2.5em);
    letter-spacing: clamp(0px, 0.5vw, 6px);
}

h3 {
    font-size: clamp(1.25em, 6vw, 1.5em);
    letter-spacing: clamp(0px, 0.25vw, 3px);
}

img {
    float: left;
    margin-right: 1em;
    width: clamp(50px, 25vw, 200px);
}

a {
    color: #009688;
    transition: color 0.15s ease-out;
}

a:hover { color: #00796B; }
small { color: #777; }
footer { margin-top: 8em !important; /* Fuck you CSS */ }
.circle { border-radius: 50%; }

/* Layout */
.hero {
    background: linear-gradient(
          rgba(0, 0, 0, 0.55), 
          rgba(0, 0, 0, 0.85)
        ), url('assets/header-1280.webp') no-repeat center center;
    background-size: cover;
    background-position-y: 40%;
    padding: 30px 0;
}

.c {
    max-width: 650px;
    margin: 40px auto;
    line-height: 1.6;
    font-size: 18px;
    padding: 0 40px;
}

.c + .c { margin-top: 4em; }

.card > h3 {
    margin-top: 0;
    margin-bottom: -0.3em;
}

.card > p { margin: 0.5em 0; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
}