/*
 * Copyright (c) 2026. Zahra A. S., All rights reserved.
 * This design is the intellectual property of Zahra A. S.
 * Unauthorized use, reproduction, or distribution of this design is prohibited.
 * For permissions, contact 182934048+zeashel@users.noreply.github.com
 */

:root {
    --cat-width-multiplier: 25;
    --general-padding: 30px;
    --x-padding: 3vh;
    --y-padding: 3vw;
    --main-fg: #e3e3de;
    --main-fg-faded: #e3e3de7b;
    --main-bg: #1a1613;
    --acc-fg: #ffff8f;
    --font-pixel: 'Silkscreen', monospace;
}

/* Silkscreen font import */
@font-face {
    font-family: 'Silkscreen';
    src: url('../fonts/Silkscreen-Regular.woff2') format('woff2');
    font-weight: 100 400; /* range of weights */
    font-style: normal;
}

/* Silkscreen font import (bold) */
@font-face {
    font-family: 'Silkscreen';
    src: url('../fonts/Silkscreen-Bold.woff2') format('woff2');
    font-weight: 500 800; /* range of weights */
    font-style: normal;
}

/* ===========================
 * TYPE SELECTORS
 * =========================== */

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

html, body {
    height: 100%;
    margin: 0;
}

html {
    font-size: 22px;
}

body {
    color: var(--main-fg);
    background-color: var(--main-bg);
    text-align: center;
    font-family: var(--font-pixel);
    display: flex;
    justify-content: center;
    align-items: center;
}

h1, h2, h3 {
    padding-bottom: var(--general-padding);
}

a {
    color: var(--acc-fg);
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center; /* main axis */
    align-items: center; /* cross axis */
}

main footer {
    width: 25rem;
    padding: var(--general-padding) 0;
}

/* ===========================
 * CLASSES
 * =========================== */

.font-bold {
    font-weight: 500;
}

.font-tiny {
    font-size: 0.8rem;
}

.wrapper {
    display: flex;
    justify-content: center; /* main axis */
    align-items: center; /* cross axis */
    padding: 3vw;
}

.pixel-art {
    image-rendering: crisp-edges; /* nearest neighbour */
}

.pixel-art.cat {
    width: clamp(300px, 30vw, 400px);
    height: auto;
}

.form-element,
.form-set {
    font-size: 1.25rem;
}

.form-set {
    display: flex;
    gap: 1rem;
    justify-content: center; /* main axis */
    align-items: center; /* cross axis */
    padding-bottom: 1vh;
}

.form-set.dob-toggle {
    margin-top: 1vh;
    gap: 0.35em;
    color: var(--main-fg-faded);
}

.form-set.dob-field {
    gap: 0.5rem;
    flex-direction: column;
}

.form-element {
    border: none;
    font-family: var(--font-pixel);
    color: var(--main-bg);
    width: 3.3em;
    padding: 1px;
    overflow: hidden;
}

.dob-field .form-element {
    width: auto;
    padding: 1px;
    margin: 0;
}

.nowrap {
    white-space: nowrap;
    overflow: hidden;
}

#useDOB {
    margin-top: 0.3em;
}

@media (max-width: 900px) {
    html {
        font-size: clamp(16px, 2vw, 22px);
    }
}

@media (max-width: 800px) and (max-height: 750px) {
    body {
        display: block;
        padding-top: 1vh;
    }
}

@media (max-width: 800px) {
    html {
        font-size: clamp(16px, 5vw, 22px);
    }

    main footer {
        width: clamp(0px, 90vw, 500px);
    }

    .wrapper {
        flex-direction: column;
    }

    .pixel-art.cat {
        padding: var(--x-padding) 0;
        width: clamp(15px, 50vw, 150px);
    }

    .form-set {
        flex-direction: column;
        gap: 0.5vh;
    }

    .form-set.dob-toggle {
        flex-direction: row;
        gap: 0.35em;
    }

    .form-element {
        margin-bottom: var(--x-padding);
    }

    #convertedAge,
    .form-element {
        font-size: 1.3em;
        width: 9.5em;
    }
}

@media (max-width: 420px) {
    :root {
        --general-padding: 5vw;
    }

    html {
        font-size: clamp(9px, 5vw, 22px);
    }
}