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

:root {
    --xxs: .25rem;
    --xs: .5rem;
    --s: .75rem;
    --m: 1rem;
    --l: 1.25rem;
    --xl: 1.75rem;
    --xxl: 2.5rem;
    --xxxl: 4rem;

    --accent1: rgb(90, 140, 160);
    --accent1: oklch(0.6500 0.0525 200);
    --accent2: rgb(231, 123, 0);
    --accent2: oklch(0.6500 0.1850 50);
    --text-main: black;
    --text-sub: rgb(70, 70, 70);
    --background: white;

    --github-gray: #24292e;
    --linkedin-blue: #0a66c2;
}

.gap-xxs {
    gap: var(--xxs);
}

.gap-m {
    gap: var(--m)
}

.gap-xxl {
    gap: var(--xxl);
}

.subtext {
    color: var(--text-sub);
    font-size: var(--m);
}

a {
    text-decoration: none;
    color: var(--text-main);
    position: relative;
}

a.link:hover {
    color: var(--text-main);
}

body {
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 1.125rem;
    min-height: 100dvh;
    width: 100%;
    justify-content: center;
    align-items: start;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-flow: row wrap;
}

.page-wrapper {
    min-height: 100dvh;
    padding: 1rem;
    box-sizing: border-box;
    width: 640px;
}

#branding {
    font-weight: bold;
    font-size: var(--xxl);
    color: var(--accent1);
}

.button-container {
    justify-content: center;
}