/* Basic resets: 
Normalize or reset styles to ensure consistency across browsers 
(e.g., margin, padding, box-sizing reset). */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;

/* Typography settings: 
Base font size, font families, line heights, etc. */

    font-family: var(--font-family__source-sans-3);
    font-optical-sizing: auto;
    font-style: normal;
}
body {
    width: 100%;
    font-weight: 400;
    font-size: 16px; /* 1rem */
    /* size-chart rem-px
    0.125rem = 2px
    0.250rem = 4px
    0.375rem = 6px
    0.500rem = 8px
    0.625rem = 10px
    0.750rem = 12px
    0.875rem = 14px

    1.000rem = 16px

    1.125rem = 18px
    1.250rem = 20px
    1.375rem = 22px
    1.500rem = 24px
    1.625rem = 26px
    1.750rem = 28px
    1.875rem = 30px
    2.000rem = 32px */ 
}
ul:not(.list--list-style-type-shown)
 /*, li  */
 {
    list-style-type: none;
}
.list--list-style-type-shown {
    /* list-style-type: disc; */
    margin-left: 1.5rem;
}
a {
    font-size: inherit;
    text-decoration: none;
}
label {
    font: inherit;
}
.font-size__double {
    font-weight: 300;
}
.font-size__double,
.font-size__big {
    font-size: 1.5em;
}
.font-size__bigger {
    font-size: 2em;
    padding-bottom: 1rem;
}

.font-family__source-sans-3 {
    font-family: var(--font-family__source-sans-3);
}
.font-family__source-serif-4 {
    font-family: var(--font-family__source-serif-4);
    text-transform: uppercase;
}
h1, h2, h3, h4, h5, /* h6, */
.font-family__sofia {
    font-family: var(--font-family__sofia);
    text-transform: uppercase;
}

h1 { font-size: clamp(6.0rem * 0.7, 12vw + 1rem, 6.0rem * 1.2 ); } 
h2 { font-size: clamp(5.0rem * 0.7, 10vw + 1rem, 5.0rem * 1.2 ); } 
h3 { font-size: clamp(4.0rem * 0.7, 8vw + 1rem, 4.0rem * 1.2 ); } 
/* 600px vw
64px - 12.8px = 51.2px  -- 240px + 16px = 256px  -- 64px

64px - 19.2px = 44.8px  -- 48px + 16px = 64px  -- 64px + 12.8 = 76.8px  */
h4 { font-size: clamp(2.0rem * 0.7, 4vw + 1rem, 2.0rem * 1.2 ); } 
h5 { font-size: clamp(1.5rem * 0.7, 3vw + 1rem, 1.5rem * 1.2 ); } 
h6 { font-size: clamp(1.0rem * 0.7, 2vw + 1rem, 1.0rem * 1.2 ); }


/* Global layout styles: 
Styles that affect the layout of the whole page, such as body margins, 
header and footer styles, general container widths, etc. */


/* entry and exit */
.entry {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-primary);
    z-index: 100;
}
.entry-title {
    color: var(--color-grey);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--grey);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8vw;
    text-align: center;
    align-content: center;
    width: 100%;
    height: 100svh;
}
.loaded .entry {
    transform: translateY(-100%);
    opacity: 75%;
    visibility: hidden;

    transition: all 0.9s 1.4s ease-out;
}
.loaded .entry-title {
    opacity: 0;
    visibility: hidden;

    transition: all 0.9s 0.5s ease-out;
} 
#exit {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-primary);
    color: var(--color-grey);
    z-index: 100;

    /* animation: 1s linear forwards fade-in-animation; */
}
.exit-title {
        font-family: Arial, Helvetica, sans-serif;
        margin: auto;
        text-align: center;
        padding-top: 40svh;
}

/* @keyframes fade-in-animation {
    to { 
        opacity: 100;
        visibility: visible;
        transform: translateY(100%);
    }
} */



/* header */
#header {
    /* margin-top: 0;
    padding-top: 1rem;
    padding-bottom: 1rem; */
    /* outline: 1px solid red; */

    /* height:  var(--header-height); */
    z-index: 50;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-primary-background);
    box-shadow: 0 0 50px 50px var(--color-primary-background);
}
.header {
    
    margin-top: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;

    height:  var(--header-height);
}

.header_item {
    align-self: end;
}
.header_logo {
    /* padding-bottom: 0.7rem; */
    height: 100%;
    width: auto;
}
.header_btn {
    /* padding-bottom: 0.6rem;
    text-align: end; */
    padding: 0;
    padding-left: calc(var(--header-logo-width) - var(--header-bar-width));
    /* padding-left: calc(55px - 35px); */
} 

/* dialog */
.dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: calc(100vw - 0.5rem);
    height: 100svh;
    background-color: var(--color-primary-background);
    border: 0px transparent;
}
/* .dialog::backdrop {
    background-color: red;
} */
.nav {
    box-sizing: content-box;
    width: 350px;
    margin-top: 5rem;
    margin-left: auto;
    padding-left: 2rem;
    /* padding-right: 10rem; */
    border-left: 1px solid var(--accent-primary);
}


/* card */
.card-title,
.sect-profile {
    white-space-collapse: preserve-breaks;
}
.card-subtitle {
    text-transform: uppercase;
    padding-bottom: 0.5rem;
}
.card-langratio {
    display: none;
}
/* .card-btn:not(.card-group .card-btn) {
    margin: 1rem 0 0 2rem;
} */
.sect-group {
    width: 100%;
}
.projects-card .card-group {
    width: 100%;
    .card {
        padding: 1rem;
        text-align: left;
        border-radius: 50px;
        background: linear-gradient(145deg, 
        var(--color-secundary-background), 
        var(--color-primary-background));
        min-height: 460px;
    }
    .card-img {
        height: 10rem;
        width: auto;
        display: block;
        margin-inline: auto;
    }
    .card-subtitle {
        padding-left: 2rem;
    }
    .color__grey span {
        text-transform: uppercase;
        font-size: .8rem;
    }
    p, div {
        width: 100%;
    }
    div {
        padding-left: 1.5rem;
    }
}
.about-card .card {
    background-color: var(--color-secundary-background);
    border-radius: 20px;
    padding: 1rem;
}
.about-card h5 {
    padding: 1rem;
    text-decoration: underline var(--accent-primary) 2px;
}



/* main */
/* html {
    scroll-snap-type: y mandatory;
} */
.main {
    margin-top: var(--header-height);
}
/* .main > section
{
    scroll-snap-align: start;
} */
.main header {
    margin-top: var(--header-height);
}
.sect:not(:has(button + button)) section {
    width: 100%;
}
.sect p {
    white-space: pre-line;
}

.full-height {
    min-height: 100svh;
}
.two-thirds-height {
    min-height: 66svh;
}
.half-height {
    min-height: 50svh;
}
.thirds-height {
    min-height: 33svh;
}
header:is(.full-height) { 
    min-height: calc(100svh - var(--header-height));
    padding-block: var(--header-height);
}
header:is(.half-height) { 
    min-height: calc(50svh - var(--header-height));
}
.full-width {
    width: 100%;
}
.three-quarters-width {
    width: 75%;
}
.half-width {
    width: 50%;
}

.img__width {
    width: 40%;
    margin-left: 1px;
}

.img__transition {
    z-index: -1;
    animation: scrollingY linear;
    animation-timeline: scroll();
}
@keyframes scrollingY {
    50%, 100% {
        transform: translateY(calc(100svh + 50px));
    }
}

.inline-scroll_container {
    position: relative;
}
.inline-scroll_sticky {
    padding-top: calc(var(--header-height) * 2);
    position: sticky;
    top: 0;
    z-index: 1;
}
.sect-imgList {
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;

    background-color: var(--color-secundary-background);
}
.sect-imgList > img {
    scroll-snap-align: start;
}
.img-small {
    height: 30rem;
}

.landing {
    position: relative;
}
.landing_section{
    height: calc(100svh - var(--header-height) - (2 * 1rem)) ;
    margin-left: 40%;
}
.landing__padding-top {
    padding-top: 10svh;
}

.wrapper:has(.card-img) {
    background-color: var(--color-secundary-background);
    width: auto;
    max-width: 100%;
    height: 50svh;
    .card-img {
        height: 100%;
        max-height: 100%; 
        max-width: 100%;
    }
}
.wrapper:has(.card-img):not(.padding-zero)
{
    padding: 5rem;
}

button {
    background-color: var(--accent-secundary);
    color: var(--light);
    border: 1px solid var(--accent-tertiairy);
    padding: 0.4rem 0.8rem;
    border-radius: 1rem;
    font-weight: 600;
}
.card-group button {
    background-color: var(--accent-tertiairy-backround);
    color: var(--color-primary);
    margin-block: 1rem;
}

.sect-colors {
    width: 100%; 
    grid-template-columns: repeat(
        auto-fill, minmax(min(4.5rem, 100%), 1fr));
}

.bullet {
    color: transparent;
    font-size: 0.9rem;
    text-transform: uppercase;
    width: 4.5rem;
    height: min(10vw, 4.5rem);
    border-radius: 2.25rem;
    border: 1px solid var(--color-primary);
    text-align: center;
    align-content: center;
}
.bullet:hover {
    color: var(--black);
}
.bullet-dark:hover {
    color: var(--white);
}

/* Global colors: 
Primary colors, background colors, text colors, etc. */

body, .wrapper {
    background-color: var(--color-primary-background);
}
body, a, i {
    color: var(--color-primary);
}
button:has(i) {
    background-color: transparent;
    border: none;
}
.color__secundary {
    color: var(--color-secundary);
}
.color__grey {
    color: var(--color-grey);
}

/* hover */
a:not(.card-url):hover {
    color: inherit;
    text-decoration: underline 0.1rem;
}
button:has(a:hover) {
    background-color: var(--accent-primary);
} 
.card-group button:hover {
    background-color: var(--accent-secundary);
    color: var(--light);
}
.projects-card .card:hover {
    box-shadow: 2px -2px 15px var(--color-tertiairy-background);
}
.nav li a:hover, 
.nav .color__grey:hover,
.color__secundary:is(i):hover {
    color: var(--accent-primary);
}

/* Utility classes: 
Global helper classes 
(e.g., .hidden, .text-center, .container, .clearfix). */

.hidden:not(:has(.showParent)) {
    display: none;
}
.visible {
    display: block;
}

.message_notPublished {
    width: 100%;
    max-width: 600px;
    color: inherit;
    background-color: rgba(255, 0, 0 , 20%);
    
    font-family: var(--font-family__source-serif-4);
    font-weight: 100;
    text-transform: uppercase;
    text-align: center;
    padding: 2rem;
    margin-inline: auto;
}

input[type="checkbox"] {
    appearance: none;
}

.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 0.5rem;
}
::-webkit-scrollbar-track,
.sect-imgList
::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb,
.sect-imgList
::-webkit-scrollbar-thumb {
    background: var(--grey);
    border-radius: 0.125rem;
}

::-webkit-scrollbar-button,
.sect-imgList
::-webkit-scrollbar-button {
    background: transparent;
    height: 0.125rem;
}