style.scss

---
---

$background-color: black;
$foreground-color: white;

$font: 'Fira Code', Menlo, monospace;
$base-font-size: 15px;
$h1-font-size: 3 * $base-font-size;
$h5-font-size: 1.5 * $base-font-size;
$lead-font-size: 1.5 * $base-font-size;

$link-color: #63b6ff;
$link-hover-fallback-color: #00ff00;
$link-hover-gradient: linear-gradient(135deg, $link-hover-fallback-color, #00aa00);

$base-spacing: 16px;

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background-color: $background-color;
    color: $foreground-color;
    width: 100%;
}

body {
    font-family: $font;
    font-size: $base-font-size;
}

input, button {
    font-family: inherit;
}

h1 {
    font-size: $h1-font-size;
    margin-bottom: $base-spacing;
}

h5 {
    font-size: $h5-font-size;
}

.lead {
    font-size: $lead-font-size;
    margin-bottom: $base-spacing;
}

p {
    margin-bottom: $base-spacing / 2;
}

#main {
    margin: ($base-spacing * 2) 0;
}

.container {
    max-width: 840px;
    margin: 0 auto;
    width: 100%;
    padding: 0 ($base-spacing * 2);
}

.center {
    text-align: center;
    width: 100%;
}

.links {
    margin-bottom: ($base-spacing * 2);

    a {
        margin-right: $base-spacing;
    }

    a:last-child {
        margin-right: 0;
    }
}

.section-title {
    margin-top: ($base-spacing * 4);
}

.members {
    margin-top: $base-spacing;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.member {
    width: 240px;
    padding: $base-spacing $base-spacing;
}

.hero-logo {
    max-width: 100%;
    width: 360px;
    display: block;
    margin: 0 auto;
}

a {
    color: $link-color;
    text-decoration: none;

    &:hover, &:focus {
        color: $link-hover-fallback-color;
        background-image: $link-hover-gradient;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.ctfs {
    list-style: none;
}

// https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

.member-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}