:root {
    /* margins */
    font-size: 20px;
    --margin-xxs: .25rem;
    --margin-xs: .5rem;
    --margin-s: .75rem;
    --margin-m: 1rem;
    --margin-l: 1.25rem;
    --margin-xl: 1.75rem;
    --margin-xxl: 2.5rem;
    --margin-xxxl: 4rem;

    /* colors */
    --gray10: oklch(0.1 0 0);
    --gray30: oklch(0.3 0 0);
    --gray50: oklch(0.5 0 0);
    --gray70: oklch(0.7 0 0);
    --gray90: oklch(0.9 0 0);
    --gray95: oklch(0.95 0 0);
    --gray-overlay: oklch(0.90 0 0 / 0.9);
    --white: oklch(1.0 0 0);
    --primary: oklch(0.39 0.1 264);
    --secondary: oklch(0.79 0.17 70);

    /* landing page */
    --ff: "Inter", sans-serif;
    --h1: bold max(30px, 3.2vw) / max(34px, 4vw) var(--ff);
    --h2: bold max(22px, 2.75vw) / max(24px, 3vw) var(--ff);
    --h3: bold max(18px, 2.2vw) / max(18px, 2.5vw) var(--ff);
    --btn: bold max(16px, 1.5vw) / max(24px, 2.25vw) var(--ff);
    --p: max(16px, 1.5vw)/max(24px, 2.25vw) var(--ff);

    /* UIs
     * --h1ui: bold 3rem/1.2em var(--ff);
     * --h2ui: bold 2.25rem/1.2em var(--ff);
     * --h3ui: bold 1.5rem/1.2em var(--ff);
     * --bigui: 1rem/1.6em var(--ff);
     * --pui: .8rem/1.6em var(--ff);
     * --smallui: .75rem/1.8em var(--ff);
     */

    /* others */
    --border-radius: 12px;
    --small-border-radius: 6px;
    --transition: 0.3s ease;
}

body {
    background: var(--gray95);
    margin: auto;
    max-width: 1280px;
    width: 90%;
    color: var(--gray10);
    font: var(--p);
    padding-top: var(--margin-xxl);
}

header {
    min-height: 60px;
    background: var(--white);
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    border-bottom: 1px solid var(--gray90);
    box-shadow: 0px 4px 4px var(--gray90);
    display: flex;
    flex-wrap: wrap;
}

a.logo {
    margin: 0;
    padding: var(--margin-s);
    color: var(--primary);
    font: var(--h2);
    background: var(--white);
    display: block;
    width: clamp(220px, 40%, 400px);
}

section {
    margin: var(--margin-xxl) auto;
}

section.coming-soon {
    text-align: center;
}

.details > div {
    margin: var(--margin-l) auto;
    background: linear-gradient(in oklch to bottom right, var(--gray10), var(--primary));
    color: var(--gray95);
    border-radius: var(--border-radius);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font: var(--p);
    padding: var(--margin-m);
    gap: var(--margin-l);
    flex-direction: row;
    box-shadow: 0px 4px 4px var(--gray30);
}

div.even {
    background: linear-gradient(in oklch to top right, var(--gray10), var(--primary));
}

div {
    flex: 1;
    min-width: min(500px, 60vw);
}

div.img {
    display: flex;
    align-items: center;
}

h1 {
    font: var(--h1);
    margin: var(--margin-xxxl) 0px 0px;
}

h2 {
    font: var(--h2);
    margin: 0px;
}

p {
    font: var(--p);
}

a, button {
    background: var(--primary);
    color: var(--gray95);
    margin-top: var(--margin-xs);
    padding: var(--margin-s) var(--margin-xl);
    text-decoration: none;
    display: inline-block;
    font: var(--btn);
    border-radius: var(--border-radius);
    border: none;
}

a:hover, button:hover {
    scale: 1.05;
    transition: var(--transition);
}

img {
    width: 100%;
    border-radius: var(--border-radius);
    display: block;
    margin: auto;
}

.main-logo {
    flex: 7;
}

.social-logos {
    flex: 1;
    min-width: 80px;
    justify-content: right;
    display: flex;
    align-items: center;
    margin: auto;
}

.social {
    background: none;
    height: 18px;
    margin: 0;
    padding: var(--margin-xxs);
    align-items: center;
}

#insta {
    height: 24px;
}

@media (min-width: 1000px) {
    .social {
        height: 30px;
    }
    #insta {
        height: 38px;
    }
}

.social > svg:hover {
    fill: var(--primary);
    stroke: var(--primary);
}

#modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gray-overlay); /* Gray out background */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#modal-overlay.active {
    display: block;
}

.modal-form {
    background: var(--gray95);
    margin: var(--margin-xxxl) auto;
    padding: var(--margin-xl);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px var(--gray50);
    width: clamp(300px, 80%, 600px);
    box-sizing: border-box;
}

.modal-form > div {
    margin-bottom: var(--margin-xxl);
}

.modal-form h2 {
    display: inline;
}

.form-group {
    margin-bottom: var(--margin-l);
}

.form-group label {
    display: block;
    margin-bottom: var(--margin-xs);
    color: var(--gray30);
    font: var(--h3);
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--gray90);
    border-radius: var(--border-radius);
    font: var(--p);
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    /*box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);*/
}

.close-btn {
    margin: 0px;
    padding: 0px;
    float: right;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--gray70);
}

.close-btn:hover {
    color: var(--gray30);
}