/* ===================== Webfonts ===================== */

@font-face {
    font-family: 'fira_sans';
    src: url('f/fira/firasans-bold-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'fira_sans';
    src: url('f/fira/firasans-bolditalic-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'fira_sans';
    src: url('f/fira/firasans-italic-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'fira_sans';
    src: url('f/fira/firasans-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===================== allgemeine Regeln ===================== */

body {
    background: black;
    background: linear-gradient(to top, #000000, #222222 40%, #000000);
    min-height: 101vh;
    outline: 1px solid red;
    color: #fff;
    font: 100%/1.5 'fira_sans', Georgia, Times, Serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-rendering: optimizeLegibility;
}
ul {
    list-style-type: none;
}

/* ===================== header ===================== */

header {
    background: black;
    color: white;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;

    hgroup {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem;
    }

    h1,
    h2 {
        font-weight: normal;
        font-size: 100%;
    }
}

/* ===================== main ===================== */

main {
    display: block;
    width: clamp(310px, 80%, 1200px);
    padding-top: clamp(2.6rem, 10vh, 6rem);
    margin: 0 auto;

    ul {
        text-transform: capitalize;
        font-size: 130%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    li {
        background: radial-gradient(ellipse at top left, #574cab, #16122a);
        transition: all 0.3s;

        &:hover {
            scale: 95%;
            background: radial-gradient(ellipse at top left, #6d5fd3, #382e6b);
        }
    }

    a:link,
    a:visited {
        text-decoration: none;
        display: block;
        text-align: center;
        padding: 2rem 0;
        color: #fff;
    }

    a:focus {
        border: 4px solid orange;
    }
}