/*
 * myCSS
 * Version: 1.0
 * Author: Marcelo Freri
 * August, 2026
 *
 * Usage:
 * <link rel="stylesheet" type="text/css" href="css/styles.css" />
 * <link rel="stylesheet" type="text/css" href="css/mystyles.css" />
*/



/* Settings */
:root {
    /* Animations */
    --speed: 0.2s;

    /* Responsive thresholds */
    --thr-sm: 512px;
    --thr-md: 854px;
    --thr-lg: 1280px;
    --thr-xl: 1600px;

    /* Text Sizes */
    --text-sm: .85rem;
    /*--text-md: 1rem;*/
    --text-lg: 1.2rem;
    --text-xl: 2rem;
    --text-xxl: 4rem;
    --text-button: 16px;
    --text-code: .85rem;

    /* Gray Palette */
    --black:   #111;
    --dark:    #222;
    --gray:    #666;
    --silver:  #ccc;
    --white:   #fff;

    /* Color Palette */
    --pink:    #f99;
    --coral:   #f96;
    --salmon:  #c66;
    --red:     #c00;
    --brown:   #630;
    --adobe:   #c63;
    --orange:  #f60;
    --mustard: #f90;
    --beige:   #fc9;
    --yellow:  #cc0;
    --olive:   #990;
    --green:   #090;
    --emerald: #363;
    --jade:    #096;
    --mint:    #6c9;
    --sky:     #69c;
    --cyan:    #09c;
    --celtic:  #36c;
    --denim:   #06c;
    --blue:    #003;
    --violet:  #339;
    --purple:  #c3c;

    /* Theme Variables */
    /* myCSS WS Dark */
    --color-bg:      var(--black);
    --color-link:    var(--denim);
    --color-text:    var(--silver);
    --color-title:   var(--denim);
    --color-accent:  var(--denim);
    --color-surface: var(--dark);

    /* Others */
    --roundness: 8px;
    --thickness: 1px;
    --icon-size: 1.6rem;
}



/* Fonts */
@font-face {
    font-family: "Antic Sans";
    src: url(font/Antic.ttf);
}
@font-face {
    font-family: "Antic Serif";
    src: url(font/AnticDidone.ttf);
}
@font-face {
    font-family: "Fira Code";
    src: url(font/FiraCode.ttf);
}
@font-face {
    font-family: "GNU Free Sans";
    src: url(font/FreeSans.ttf);
}
@font-face {
    font-family: "GNU Free Serif";
    src: url(font/FreeSerif.ttf);
}
@font-face {
    font-family: "GNU Free Mono";
    src: url(font/FreeMono.ttf);
}
@font-face {
    font-family: "Inter Variable";
    src: url(font/Inter-Variable.ttf);
}
@font-face {
    font-family: "Montserrat";
    src: url(font/Montserrat-Regular.ttf);
}
* {
    --font-monospace: "GNU Free Mono";
    --font-sans: "GNU Free Sans";
    --font-serif: "GNU Free Serif";

    --font-size: 19px;
}
html {
    font-family: var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: var(--font-size, 16px);
    font-weight: 400;
}



/* Flex System */
.flex-col,
.flex-col-spaced,
.flex-col-with-margins,
.flex-row,
.flex-row-spaced,
.flex-row-with-margins {
    display: flex;
}
.flex-col-spaced,
.flex-row-spaced {
    justify-content: space-between;
}
.flex-col-with-margins,
.flex-row-with-margins {
    justify-content: space-around;
}
.flex-col,
.flex-col-spaced,
.flex-col-with-margins {
    flex-direction: column;
}
.flex-secondary-center {
    align-items: center;
}
.flex-secondary-end {
    align-items: flex-end;
}
.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.flex-3 {
    flex: 3;
}
.flex-wrap {
    flex-wrap: wrap;
}



/* Grid System */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--element-min-width, 240px), 1fr));
    gap: 2em calc(2 * var(--spacing, 8px));
}



/* Gaps for both, Flexbox and Grid */
.gap-0 {
    gap: 0;
}
.gap-05 {
    gap: .5rem;
}
.gap-1 {
    gap: 1rem;
}
.gap-2 {
    gap: 2rem;
}
.gap-3 {
    gap: 3rem;
}



/* Base styles for responsiveness
 *
 * For a correct operation, this block must be
 * at the end of this CSS file.
 *
*/
/* Small devices (sm) */
@media only screen and (max-width: 512px) {
    html {
        font-size: calc(.9 * var(--font-size));
        --spacing: .5rem;
    }
    .collapse-100 {
        width: 100%;
    }
    .flex-collapsible-sm {
        flex-direction: column;
    }
    .sm-hide {
        display: none;
    }
}
/* Medium devices (md) */
@media only screen and (min-width: 512px) and (max-width: 854px) {
    html {
        font-size: var(--font-size);
        --spacing: 1rem;
    }
    .flex-collapsible-md {
        flex-direction: column;
    }
    .md-hide {
        display: none;
    }
}
/* Large devices (lg) */
@media only screen and (min-width: 854px) and (max-width: 1280px) {
    html {
        font-size: var(--font-size);
        --spacing: 1.5rem;
    }
    .flex-collapsible-lg {
        flex-direction: column;
    }
    .lg-hide {
        display: none;
    }
}
/* Extra-Large devices (xl) */
@media only screen and (min-width: 1280px) {
    html {
        font-size: calc(1.1 * var(--font-size));
        --spacing: 2rem;
    }
    .flex-collapsible-xl {
        flex-direction: column;
    }
    .xl-hide {
        display: none;
    }
}



/* Basic */
* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: var(--color-link);
    position: relative;
    opacity: .9;
}
a:hover {
    opacity: 1;
}
/*
a::after {
    content: "";
    display: block;
    background-color: var(--color-accent);
    height: var(--thickness);
    transform: scaleX(0);
    transform-origin: center;
}
a:hover::after {
    transition: transform var(--speed) ease;
    transform: scaleX(1);
}
*/

body {
    /* Set as a grid for the fixed footer */
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: var(--font-sans), system-ui, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
}

button {
    font-size: 1.1rem;
    padding: .5rem;
    border-color: var(--color-accent);
    border-radius: var(--roundness);
}

code {
    background-color: var(--color-surface);
    font-family: var(--font-monospace), monospace;
    font-size: var(--text-sm, .9em);
    padding: 0 .3em;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-title);
    margin: 2em 0 .25em 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

hr {
    height: var(--thickness);
    border-width: 0;
    background-color: var(--color-accent);
}

li {
    line-height: 1.5em;
}
li::marker {
    color: var(--color-accent);
}

p {
    line-height: 1.5em;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

table {
    border-collapse: collapse;
    margin-top: 1em;
    margin-bottom: 1em;
}
table tr th {
    background-color: var(--color-title);
    color: var(--color-bg);
    font-family: var(--font-serif), serif;
    font-size: var(--text-sm, .9em);
    padding: .7em .6em;
    text-align: left;
}
table tr td {
    font-size: var(--text-sm, .9em);
    padding: .7em .6em;
}
table tr:nth-child(odd) {
    background-color: var(--color-surface);
}



/* Main Classes */
.banner-xs, .banner-sm, .banner-md, .banner-lg, .banner-xl {
    /* background-image: url();*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner-xs {
    height: 128px;
}
.banner-sm {
    height: 240px;
}
.banner-md {
    height: 480px;
}
.banner-lg {
    height: 720px;
}
.banner-xl {
    height: 960px;
}

.btn {
    background-color: var(--color-accent);
    color: var(--color-bg);
    border: var(--thickness) solid var(--color-accent);
    text-decoration: none;
    font-size: var(--text-button, 16px);
    font-weight: 600;
    padding: .75em 1.5em;
    border-radius: 60px;
    cursor: pointer;
    opacity: .9;
}
.btn:hover {
    /*background-color: var(--color-accent);*/
    color: var(--color-bg);
    text-decoration: none;
    opacity: 1;
}

/*
.card {
    width: 16rem;
    padding: 1rem 2rem;
    border: var(--thickness) solid var(--color-accent);
    background-color: var(--color-surface);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    font-size: var(--text-sm);
}
*/
.card {
    width: fit-content;
    font-size: var(--text-sm);
    text-align: center;
    margin: .5em calc(.5 * var(--spacing));
    padding: 1em;
    background-color: var(--color-surface);
    border: var(--thickness) solid var(--color-surface);
    border-radius: var(--roundness);
}
.card:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.code-block {
    background-color: var(--color-surface);
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding: 1rem var(--spacing);
    width: fit-content;
    min-width: 40%;
    line-height: calc(1.5 * var(text-sm, .9em));
    font-family: var(--font-monospace), monospace;
    font-size: var(--text-sm);
}

.container-25 {
    width: 25%;
}
.container-50 {
    width: 50%;
}
.container-75 {
    width: 75%;
}
.container-fit {
    width: fit-content;
}
.container-sm, .container-md, .container-lg, .container-xl {
    width: 100%;
    min-width: 0;
}
.container-sm {
    max-width: var(--thr-sm);
}
.container-md {
    max-width: var(--thr-md);
}
.container-lg {
    max-width: var(--thr-lg);
}
.container-xl {
    max-width: var(--thr-xl);
}
.container-main {
    margin: 0 auto;
    padding: 1rem calc(3 * var(--spacing));
    max-width: var(--thr-lg);
}

.img {
    /*max-width: 100%;*/
    width: 100%;
    height: 100%;
    object-fit: none;
}

.social {
    img {
        height: var(--icon-size, 1.6rem);
        -webkit-filter: grayscale(40%);
        filter: grayscale(40%);
        margin: 0 .6rem;
    }
    img:hover {
        -webkit-filter: none;
        filter: none;
    }
}



/* Modifiers */
/* Margins */
.mar-05 {
    margin: .5rem calc(.5 * var(--spacing));
}
.mar-1 {
    margin: 1rem var(--spacing);
}
.mar-2 {
    margin: 2rem calc(2 * var(--spacing));
}
.mar-3 {
    margin: 3rem calc(4 * var(--spacing));
}
.mar-4 {
    margin: 4rem calc(8 * var(--spacing));
}
.mar-5 {
    margin: 5rem calc(16 * var(--spacing));
}
.mar-6 {
    margin: 6rem calc(32 * var(--spacing));
}
.mar-x-05 {
    margin-left: calc(.5 * var(--spacing));
    margin-right: calc(.5 * var(--spacing));
}
.mar-x-1 {
    margin-left: var(--spacing);
    margin-right: var(--spacing);
}
.mar-x-2 {
    margin-left: calc(2 * var(--spacing));
    margin-right: calc(2 * var(--spacing));
}
.mar-x-3 {
    margin-left: calc(4 * var(--spacing));
    margin-right: calc(4 * var(--spacing));
}
.mar-x-4 {
    margin-left: calc(8 * var(--spacing));
    margin-right: calc(8 * var(--spacing));
}
.mar-x-5 {
    margin-left: calc(16 * var(--spacing));
    margin-right: calc(16 * var(--spacing));
}
.mar-x-6 {
    margin-left: calc(32 * var(--spacing));
    margin-right: calc(32 * var(--spacing));
}
.mar-y-05 {
    margin-top: .5rem;
    margin-bottom: .5rem;
}
.mar-y-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.mar-y-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.mar-y-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.mar-y-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
}
.mar-y-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
}
.mar-y-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}
.mar-b-05 {
    margin-bottom: .5rem;
}
.mar-b-1 {
    margin-bottom: 1rem;
}
.mar-b-2 {
    margin-bottom: 2rem;
}
.mar-b-3 {
    margin-bottom: 3rem;
}
.mar-b-4 {
    margin-bottom: 4rem;
}
.mar-b-5 {
    margin-bottom: 5rem;
}
.mar-b-6 {
    margin-bottom: 6rem;
}
.mar-l-05 {
    margin-left: calc(.5 * var(--spacing));
}
.mar-l-1 {
    margin-left: var(--spacing);
}
.mar-l-2 {
    margin-left: calc(2 * var(--spacing));
}
.mar-l-3 {
    margin-left: calc(4 * var(--spacing));
}
.mar-l-4 {
    margin-left: calc(8 * var(--spacing));
}
.mar-l-5 {
    margin-left: calc(16 * var(--spacing));
}
.mar-l-6 {
    margin-left: calc(32 * var(--spacing));
}
.mar-r-05 {
    margin-right: calc(.5 * var(--spacing));
}
.mar-r-1 {
    margin-right: var(--spacing);
}
.mar-r-2 {
    margin-right: calc(2 * var(--spacing));
}
.mar-r-3 {
    margin-right: calc(4 * var(--spacing));
}
.mar-r-4 {
    margin-right: calc(8 * var(--spacing));
}
.mar-r-5 {
    margin-right: calc(16 * var(--spacing));
}
.mar-r-6 {
    margin-right: calc(32 * var(--spacing));
}
.mar-t-05 {
    margin-top: .5rem;
}
.mar-t-1 {
    margin-top: 1rem;
}
.mar-t-2 {
    margin-top: 2rem;
}
.mar-t-3 {
    margin-top: 3rem;
}
.mar-t-4 {
    margin-top: 4rem;
}
.mar-t-5 {
    margin-top: 5rem;
}
.mar-t-6 {
    margin-top: 6rem;
}

/* Padding */
.pad-05 {
    padding: .5rem calc(.5 * var(--spacing));
}
.pad-1 {
    padding: 1rem var(--spacing);
}
.pad-2 {
    padding: 2rem calc(2 * var(--spacing));
}
.pad-3 {
    padding: 3rem calc(4 * var(--spacing));
}
.pad-4 {
    padding: 4rem calc(8 * var(--spacing));
}
.pad-5 {
    padding: 5rem calc(16 * var(--spacing));
}
.pad-6 {
    padding: 6rem calc(32 * var(--spacing));
}
.pad-x-05 {
    padding-left: calc(.5 * var(--spacing));
    padding-right: calc(.5 * var(--spacing));
}
.pad-x-1 {
    padding-left: var(--spacing);
    padding-right: var(--spacing);
}
.pad-x-2 {
    padding-left: calc(2 * var(--spacing));
    padding-right: calc(2 * var(--spacing));
}
.pad-x-3 {
    padding-left: calc(4 * var(--spacing));
    padding-right: calc(4 * var(--spacing));
}
.pad-x-4 {
    padding-left: calc(8 * var(--spacing));
    padding-right: calc(8 * var(--spacing));
}
.pad-x-5 {
    padding-left: calc(16 * var(--spacing));
    padding-right: calc(16 * var(--spacing));
}
.pad-x-6 {
    padding-left: calc(32 * var(--spacing));
    padding-right: calc(32 * var(--spacing));
}
.padd-y-05 {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.pad-y-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.pad-y-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.pad-y-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.pad-y-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.pad-y-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.pad-y-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.pad-b-05 {
    padding-bottom: .5rem;
}
.pad-b-1 {
    padding-bottom: 1rem;
}
.pad-b-2 {
    padding-bottom: 2rem;
}
.pad-b-3 {
    padding-bottom: 3rem;
}
.pad-b-4 {
    padding-bottom: 4rem;
}
.pad-b-5 {
    padding-bottom: 5rem;
}
.pad-b-6 {
    padding-bottom: 6rem;
}
.pad-l-05 {
    padding-left: calc(.5 * var(--spacing));
}
.pad-l-1 {
    padding-left: var(--spacing);
}
.pad-l-2 {
    padding-left: calc(2 * var(--spacing));
}
.pad-l-3 {
    padding-left: calc(4 * var(--spacing));
}
.pad-l-4 {
    padding-left: calc(8 * var(--spacing));
}
.pad-l-5 {
    padding-left: calc(16 * var(--spacing));
}
.pad-l-6 {
    padding-left: calc(32 * var(--spacing));
}
.pad-r-05 {
    padding-right: calc(.5 * var(--spacing));
}
.pad-r-1 {
    padding-right: var(--spacing);
}
.pad-r-2 {
    padding-right: calc(2 * var(--spacing));
}
.pad-r-3 {
    padding-right: calc(4 * var(--spacing));
}
.pad-r-4 {
    padding-right: calc(8 * var(--spacing));
}
.pad-r-5 {
    padding-right: calc(16 * var(--spacing));
}
.pad-r-6 {
    padding-right: calc(32 * var(--spacing));
}
.pad-t-05 {
    padding-top: .5rem;
}
.pad-t-1 {
    padding-top: 1rem;
}
.pad-t-2 {
    padding-top: 2rem;
}
.pad-t-3 {
    padding-top: 3rem;
}
.pad-t-4 {
    padding-top: 4rem;
}
.pad-t-5 {
    padding-top: 5rem;
}
.pad-t-6 {
    padding-top: 6rem;
}



/* Others */
.centered {
    margin-left: auto;
    margin-right: auto;
}
.ghost-anchor {
    position: absolute;
    top: calc(-1 * 5 * var(--spacing));
}
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
}
.sticky-footer {
    position: fixed;
    bottom: 0;
    z-index: 99;
}
.hero-image {
    /* background-image: url(); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}



/* Text */
.interline-10 {
    line-height: 1em;
}
.interline-15 {
    line-height: 1.5em;
}
.interline-20 {
    line-height: 2em;
}
.subtitle {
    margin-top: 0;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-spaced {
    letter-spacing: .5em;
}
.text-sm {
    font-size: var(--text-sm, .9em);
}
.text-md {
    font-size: var(--font-size, 1rem);
}
.text-lg {
    font-size: var(--text-lg, 1.2em);
}
.text-xl {
    font-size: var(--text-xl, 2em);
}
.text-xxl {
    font-size: var(--text-xxl, 4em);
}

.monospace {
    font-family: var(--font-monospace), monospace;
}
.sans {
    font-family: var(--font-sans), sans-serif;
}
.serif {
    font-family: var(--font-serif), serif;
}



/* COLORS */
.bg {
    background-color: var(--color-bg);
}
.hero {
    a {
        color: var(--color-bg);
    }
    color: var(--color-bg);
    background-color: var(--color-accent);
}
.surface {
    background-color: var(--color-surface);
}
.title {
    color: var(--color-title);
    /*
    font-weight: 400;
    margin: 0;
    text-shadow: 0 0 2px var(--color-bg, #000);
    */
}



/* Animations and FX */
* {
    transition: all var(--speed) ease;
}
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none;
    }
}
@keyframes progress-grow {
    from { width: 0%; }
    to { width: 100%; }
}

.scroll-progress {
    width: 0%;
    height: 2px;
    background-color: var(--color-accent);
    animation-name: progress-grow;
    animation-duration: 1ms;
    animation-direction: normal;
    animation-timeline: scroll(block root);
}

.aura:hover {
    filter: drop-shadow(0 0 4px var(--color-accent));
}
.drop-shadow {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}
.raise:hover, .raise-with-border:hover {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    /*transform: translateY(-2px) translateX(-2px);*/
    transform: translateY(-2px);
}
.raise-with-border:hover {
    border: var(--thickness, 1px) solid var(--color-accent);
}
.rounded {
    border-radius: var(--roundness);
}
.bordered {
    border: var(--thickness) solid var(--color-accent);
}
.border-down {
    border-bottom: var(--thickness) solid var(--color-accent);
}
.border-up {
    border-top: var(--thickness) solid var(--color-accent);
}
.border-left {
    border-left: var(--thickness) solid var(--color-accent);
}
.border-right {
    border-right: var(--thickness) solid var(--color-accent);
}
.circle {
    border-radius: 100px;
    padding: 1em;
    background-color: var(--color-accent);
}
.tag {
    border-radius: var(--roundness) calc(2 * var(--roundness));
    width: fit-content;
    padding: .5rem;
    background-color: var(--color-surface);
    font-size: var(--text-sm);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}
.pill {
    background-color: var(--color-accent);
    /*color: var(--color-bg);*/
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
    margin: .25em;
    padding: .2em .8em;
    border-radius: 1em;
}
.blur-all {
    filter: blur(var(--roundness));
}
.blur-bg {
    backdrop-filter: blur(var(--roundness));
}