@import url("https://cdn.jsdelivr.net/gh/vsalvino/computer-modern@main/fonts/serif.css");

:root {
    /* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --step--3: clamp(0.64rem, 0.6556rem + -0.0201vw, 0.651rem);
    --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
    --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);


    /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,s-l&g=s,l,xl,12 */


    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
    --space-4xl: clamp(9rem, 8.5909rem + 1.8182vw, 10rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
    --space-3xl-4xl: clamp(6.75rem, 5.4205rem + 5.9091vw, 10rem);

    /* Custom pairs */
    --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);


    /* Fonts */


    --font-serif: "Computer Modern Serif",
        'EB Garamond',
        Georgia,
        serif;
    --font-mono: 'SFMono-Regular',
        Consolas,
        'Liberation Mono',
        Menlo,
        monospace, arial;

    --color-text: #111;
    --color-border: rgb(232, 232, 232);
    --color-shadow: rgb(239, 239, 239);
    --color-py-keyword: #005cc5;
    --color-yellow: #ffdd00;
    /* Azul */
    --color-py-string: #da8c42;
    /* Vermelho */
    --color-py-comment: #6a737d;
    /* Cinza */
    --color-py-function-name: #6f42c1;
    /* Roxo */
}

/* 2. Reset Básico & Estilos Globais */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--color-text);
    background-blend-mode: overlay;
    background-attachment: fixed;
}

h1 {
    font-size: var(--step-5);
    line-height: 1.3;
    text-align: center;
    margin: 0;
}

h3 {
    font-weight: normal;
    font-style: italic;
}

h1+p {
    text-align: center;
    font-size: var(--step--2);
    color: gray;
    margin-bottom: 3rem;
}


/* 3. Layout */
.container {
    max-width: 1100px;
    margin-inline: auto;
    padding: 0 var(--space-2xs-xs);
}

hr {
    border: 0;
    height: 2px;
    background-color: var(--color-text);
    margin: var(--space-m) 0;
    border-radius: 1px;
}

.cadastro {
    font-size: var(--step-1);
    font-family: var(--font-mono);
    color: whitesmoke;
    padding: var(--space-s) var(--space-m);
    border-radius: 15px;
    border: 0;
    background-color: #FE8D0B;
    text-align: center;
    width: fit-content;
    margin: 0 auto;
    display: block;
    text-decoration: none;
}

.cadastro,
.cadastro a:visited {
    color: whitesmoke;
    text-decoration: none;

}


li+p {
    padding-left: 2rem;
}

/* 4. Estilos das Células */

.cell {
    padding: var(--space-2xs) var(--space-s);
    margin: var(--space-m) 0;
}

.cell-python {
    background-color: #fff;
    border-radius: 19px;
    box-shadow: 3px 3px var(--color-shadow);
    border: 0.15px solid var(--color-border);
    position: relative;
}

pre {
    overflow-x: auto;
    margin: 0;
    line-height: 1;
}

code {
    font-family: var(--font-mono);
    font-size: var(--step--2);

}

.cell-tag {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-s);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--color-py-comment);
    background-color: #f0f0f0;
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: 5px;
    opacity: 0.7;
}



/* 5. Syntax Highlighting Básico para Python */
.py-keyword {
    color: var(--color-py-keyword);
}

.py-string {
    color: var(--color-py-string);
}

.py-comment {
    color: var(--color-py-comment);
}

.py-function-name {
    color: var(--color-py-function-name);
}

/* 6. Navigation Bar */
header {
    border-bottom: 1px solid var(--color-border);
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs);

}

.logo img {
    width: var(--space-4xl);
}

.nav-left {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}


.contact-button {
    background-color: var(--color-yellow);
    color: #000;
    font-family: var(--font-mono);
    padding: var(--space-2xs) var(--space-s);
    border-radius: 5px;
    text-decoration: none;
}


/* marimo bg*/

.bg-gradient {
    background-image: url(./files/bg.svg);
    /* background-repeat: no-repeat;
    background-size: cover;*/
    z-index: -20;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100vw;
    height: 100vh;
}

.bg-gradient,
.noise {
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw
}

.noise {
    background-image: url(./files/nois.png);
    background-repeat: repeat;
    opacity: .22;
    z-index: -1
}