@import url('/fonts/fonts.css');

:root {
    /* Colors */
    --b: #111;
    --w: #fff;
    --g-100: #eee;
    --g-200: #ddd;
    --g-300: #999;

    /* Fonts */
    --font-main: 'Inter', sans-serif;
    --font-mono: 'Geist Mono', monospace;
    --font-serif: 'Editorial New', serif;
}

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

body {
    /* Flex and Grid */
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 100dvh;

    /* Font and Color */
    font: 12px var(--font-main);
    color: var(--b);
}

main {
    display: flex;
    flex: 1;
    flex-direction: column;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
}

a { text-decoration: none; color: inherit; }

/* Sitewide Elements */
.header, .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 24px;
    width: 100%;
}

.header-logo {
    font-family: var(--font-mono);
}

.header-logo-strong {
    font-family: var(--font-main);
}

.header-navigation ul {
    /* Flex and Grid */
    display: flex;
    gap: 32px;

    /* Font and Color */
    list-style: none;
}

.footer {
    background-color: var(--g-100);
    border-top: 1px solid var(--g-200);
}

.footer-navigation ul {
    /* Flex and Grid */
    display: flex;
    gap: 16px;

    /* Font and Color */
    list-style: none;
}

.footer-link {
    color: var(--g-300);
}

.footer-cc {
    font: 10px var(--font-mono);
    color: var(--g-300);
}

/* Sitewide Content */
.selected, .underline:hover {
    text-decoration: underline; text-underline-offset: 4px;
}

.heading {
    font: 500 50px var(--font-main);
    letter-spacing: -2px;
}

.tag {
    /* Flex and Grid */
    margin: 4px 0;

    /* Font and Color */
    font: 10px var(--font-main);
    color: var(--g-300);
}

.text {
    margin: 0 0 16px 0;
}

.click {
    /* Flex and Grid */
    display: inline-flex;
    justify-content: center;
    min-width: 96px;
    margin: 8px 0;
    padding: 8px;

    /* Font and Color */
    color: var(--b);
    border: 1px solid var(--b);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.click:hover {
    background-color: var(--b);
    color: var(--w);
}

/* index.html */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    min-height: calc(100dvh - 64px);
}

.hero-tagline {
    font: 10px var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 2;
    color: var(--g-300);
}

.hero-tagline::after {
    /* Flex and Grid */
    display: inline-block;
    width: 6px;
    height: 12px;
    margin: 0 6px;
    vertical-align: -2px;
    animation: blink 1s step-end infinite;

    /* Font and Color */
    content: '';
    background-color: var(--g-300);
}

.hero-title {
    font: 500 50px var(--font-main);
    letter-spacing: -2px;
}

.hero-cta {
    display: flex;
    gap: 8px;
}

.scroll {
    /* Flex and Grind */
    display: inline-block;
    position: absolute;
    bottom: 32px;
    animation: bounce 2s ease-in-out infinite;

    /* Font and Color */
    font: 10px var(--font-mono);
    color: var(--g-300);
}

.mini {
    padding: 16px 0 32px 0;
}

.mini-heading {
    /* Flex and Grind */
    padding: 0 0 16px 0;

    /* Font and Color */
    font: 10px var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--g-300);
}

.catalog-tiles {
    padding: 0 0 16px 0;
}

.catalog-tiles ul {
    /* Flex and Grid */
    display: flex;
    padding: 4px 0;
    gap: 8px;

    /* Font and Color */
    list-style: none;
}

/* catalog.html */
.catalog-tile {
    /* Flex and Grid */
    padding: 4px 6px;
    
    /* Font and Color */
    background-color: var(--g-100);
    color: var(--g-300);
    border: 1px solid var(--g-200);
    border-radius: 4px;
    box-shadow: 0 0 0 0 var(--g-200);
    transition: box-shadow 0.1s ease, background-color 0.15s ease, color 0.15s ease;
}

.catalog-tile:hover, .catalog-tile.selected {
    box-shadow: 0 0 0 1px var(--g-200);
    background-color: var(--g-200);
    color: var(--b);
}

/* contact.html */
.contact-info {
    /* Flex and Grid */
    width: 100%;
    margin: 0 0 16px 0;
    outline: none;
    padding: 4px 0;

    /* Font and Color */
    font: inherit;
    color: var(--b);
    border: none;
    border-bottom: 1px solid var(--g-300);
}

.contact-message {
    min-height: 100px;
    resize: vertical;
}

.contact-info::placeholder {
    color: var(--g-300);
    transition: color 0.2s ease;
}

.contact-info:focus::placeholder {
    color: transparent;
}

/* Animations */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}