/*
This file relies on other files being already loaded:
- clean-slate.css
- simple-layout.css
*/

/* MacStack Style */

:root {
    --primary: white;
    --secondary: #999;
    --accent: #00ffc3;

    --bg1: #0a0a0a;
    --bg2: #141414;
    --bg3: #242424;
    --bg4: #343434;
    --bg5: #444444;

    --font-size-s: 0.8rem;
    --font-size-m: 1rem;
    --font-size-l: 1.75rem;
    --font-size-xl: 3rem;

    --line-height: 1.5;
}

@font-face {
    font-family: "CustomFont";
    src: url("fonts/Geist-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CustomFont";
    src: url("fonts/Geist-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CustomFont";
    src: url("fonts/Geist-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CustomFontMono";
    src: url("fonts/GeistMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family:
        "CustomFont",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--secondary);
    background-color: var(--bg1);
}

nav {
    background-color: var(--bg2);
    padding: var(--space-xs) 0;
    box-shadow: 0 0 350px rgba(0, 255, 195, 0.8);
}

header {
    padding-top: 62px;
    padding-bottom: 42px;
}

header img {
    width: 150px;
    height: 150px;
    margin-bottom: -15px;
    margin-left: auto;
    margin-right: auto;
}

section {
    margin-bottom: var(--space-xxl);
}

section .container {
    background: var(--bg2);
    padding: var(--space-xl);
    margin-bottom: var(--space-xxl);
    transition: box-shadow 0.5s ease;
    border-radius: var(--space-s);
}

h1,
h2 {
    text-align: center;
    font-size: var(--font-size-l);
    color: var(--primary);
    margin-bottom: calc(var(--space-xl) - 15px);
    font-weight: normal;
}

h2 a {
    color: var(--accent);
}

h3 {
    font-size: var(--font-size-s);
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: var(--accent);
    margin-bottom: var(--space-s);
}

h4 {
    font-size: var(--font-size-m);
    margin-bottom: var(--space-xs);
    color: var(--primary);
    font-weight: bold;
}

footer {
    padding: var(--space-l) 0;
    background-color: var(--bg2);
}

a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--accent);
    text-decoration: underline;
}

button {
    border-radius: 100px;
    min-width: 90px;
    background: var(--bg3);
    color: var(--secondary);
    padding: var(--space-xs) var(--space-m);
    transition:
        transform 0.2s,
        color 0.2s;
}

button:hover {
    transform: scale(1.05);
    color: var(--accent);
}

code {
    font-family:
        "CustomFontMono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    background: var(--bg3);
    padding: 2px 6px;
    border-radius: var(--space-xs);
}

/* NAVBAR LOGO */

.logo.horizontal {
    color: var(--primary);
    align-items: center;
    font-weight: bold;
}

.logo img {
    height: 40px;
}

/* SETUP SCRIPT */

.terminal {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    /* half of: button text + button padding + terminal padding */
    border-radius: calc(
        (var(--font-size-m) * var(--line-height) + 2 * var(--space-xs) +
                2 * var(--space-s)) / 2
    );
    background: black;
    padding: var(--space-s);
    padding-left: var(--space-m);
}

.terminal.horizontal {
    gap: var(--space-s);
}

.terminal > span {
    font-family:
        "CustomFontMono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    color: var(--accent);
    overflow-wrap: anywhere; /* best modern way to break URLs */
    word-break: break-all;
}

/* SETUP STEPS */

.step.horizontal {
    gap: var(--space-s);
}

.step-number {
    /* Centering (The "Modern" way) */
    display: grid;
    place-items: center;
    line-height: 1;

    /* Sizing */
    width: var(--space-l);
    height: var(--space-l);
    border-radius: 50%;

    /* Protection against being squished */
    flex-shrink: 0;

    /* Shift vertically to align with text */
    margin-top: calc(
        ((var(--font-size-m) * var(--line-height)) - var(--space-l)) / 2
    );

    /* Aesthetics */
    background-color: var(--bg3);
    font-weight: bold;
}

.step-content {
    /* Stretch to fill available space */
    flex: 1;
}

/* TABLE */

table {
    border-collapse: collapse;
}

th {
    font-weight: normal;
    text-transform: uppercase;
}

td:first-child {
    width: 25%;
}

tbody td {
    border-top: 1px solid var(--bg5);
    padding-top: var(--space-m);
}