@import url('global-variables.css');

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-light);
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--font-dark-color);
}

main {
    padding-top: 3rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

iframe {
    width: 100%;
    height: 100%;
}

.page-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-container {
    display: flex;
    flex-direction: column;
    padding: clamp(1rem, 4vw, 6rem);
    width: 100%;
    max-width: 90rem;
    position: relative;
}

.general-container {
    display: flex;
    flex: 1;
    position: relative;
}

.section-title {
    width: 100%;
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: 400;
}

.title-underline {
    border-bottom: solid var(--secondary-color) 2px;
}

.section-subtitle {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.button {
    background-color: var(--accent-color);
    margin-top: 2rem;
    bottom: 0;
    margin-inline: 5%;
    width: fit-content;
}

.image {
    object-fit: cover;
    object-position: 50% 0%;
    max-width: 100%;
    height: auto;
    /* flex-shrink: 0; */
}

.card {
    display: flex;
    border-radius: 2rem;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.card-title {
    font-size: 2rem;
    text-transform: uppercase;
    margin: 0.5rem 0;
}

.card-subtitle {
    font-size: 1.2rem;
    text-transform: uppercase;
}

.card-date {
    font-size: 1rem;
    text-transform: uppercase;
}

.card-text {
    font-size: 1rem;
    margin: 2rem 0 2rem 0;
}

.relative { position: relative; }
.absolute { position: absolute; }

.width-100 { width: 100%; }
.width-50 { width: 50%; }
.width-25 { width: 25%; }

.padding-l { padding: clamp(1.5rem, 4vw, 3rem); }
.padding-m { padding: clamp(1rem, 4vw, 2rem); }
.padding-s { padding: clamp(0.5rem, 4vw, 1rem); }
.padding-none { padding: 0; }

.padding-v-l { padding-block: clamp(1.5rem, 4vw, 3rem); }
.padding-v-m { padding-block: clamp(1rem, 4vw, 2rem); }
.padding-v-s { padding-block: clamp(0.5rem, 4vw, 1rem); }
.padding-v-xs { padding-block: clamp(0.25rem, 4vw, 0.5rem); }

.padding-h-l { padding-inline: clamp(1.5rem, 4vw, 3rem); }
.padding-h-m { padding-inline: clamp(1rem, 4vw, 2rem); }
.padding-h-s { padding-inline: clamp(0.5rem, 4vw, 1rem); }
.padding-h-xs { padding-inline: clamp(0.25rem, 4vw, 0.5rem); }

.margin-l { margin: clamp(1.5rem, 4vw, 3rem); }
.margin-m { margin: clamp(1rem, 4vw, 2rem); }
.margin-s { margin: clamp(0.5rem, 4vw, 1rem); }
.margin-xs { margin: clamp(0.25rem, 4vw, 0.5rem); }
.margin-none { margin: 0; }

.margin-v-l { margin-block: clamp(1.5rem, 4vw, 3rem); }
.margin-v-m { margin-block: clamp(1rem, 4vw, 2rem); }
.margin-v-s { margin-block: clamp(0.5rem, 4vw, 1rem); }
.margin-v-xs { margin-block: clamp(0.25rem, 4vw, 0.5rem); }

.margin-h-l { margin-inline: clamp(1.5rem, 4vw, 3rem); }
.margin-h-m { margin-inline: clamp(1rem, 4vw, 2rem); }
.margin-h-s { margin-inline: clamp(0.5rem, 4vw, 1rem); }
.margin-h-xs { margin-inline: clamp(0.25rem, 4vw, 0.5rem); }

.radius-max { border-radius: 100vmax; }
.radius-l { border-radius: 3rem; }
.radius-m { border-radius: 2rem; }
.radius-s { border-radius: 1rem; }
.radius-xs { border-radius: 0.5rem; }

.min-w-xl { min-width: clamp(20rem, 50vw, 40rem); }
.min-w-l { min-width: clamp(15rem, 50vw, 30rem); }
.min-w-m { min-width: clamp(10rem, 50vw, 20rem); }
.min-w-s { min-width: clamp(5rem, 50vw, 10rem); }

.min-h-xl { max-width: 40rem; }
.min-h-l { min-height: 30rem; }
.min-h-m { min-height: 20rem; }
.min-h-s { min-height: 10rem; }

.max-w-xl { max-width: 40rem; }
.max-w-l { max-width: 30rem; }
.max-w-m { max-width: 20rem; }
.max-w-s { max-width: 10rem; }

.max-h-xl { max-width: 40rem; }
.max-h-l { max-height: 30rem; }
.max-h-m { max-height: 20rem; }
.max-h-s { max-height: 10rem; }

.flex-fill { flex: 1; }

.flex-gap-xl { gap: 4rem; }
.flex-gap-l { gap: 3rem; }
.flex-gap-m { gap: 2rem; }
.flex-gap-s { gap: 1rem; }
.flex-gap-xs { gap: 0.5rem; }

.flex-v { flex-direction: column; }
.flex-h { flex-direction: row; }

.flex-as { align-items: flex-start; }
.flex-ac { align-items: center; }
.flex-ae { align-items: flex-end; }

.flex-js { justify-content: flex-start }
.flex-jc { justify-content: center; }
.flex-je { justify-content: flex-end; }

.wrap-reverse { flex-wrap: wrap-reverse; }

.flex-wrap { flex-wrap: wrap; }

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

.text-xxxl { font-size: 3.2rem; }
.text-xxl { font-size: 2.6rem; }
.text-xl { font-size: 2rem; }
.text-l { font-size: 1.6rem; }
.text-m { font-size: 1.2rem; }
.text-s { font-size: 1rem; }
.text-xs { font-size: 0.8rem; }

.text-capitalize { text-transform: uppercase; }

.text-link { color: var(--primary-color); }
.text-accent { color: var(--accent-color); }

.dark-bg { background-color: var(--neutral-dark); }
.medium-bg { background-color: var(--neutral-medium); }
.light-bg { background-color: var(--neutral-light); }

.text-light { font-family: var(--font-light); }
.text-bold { font-family: var(--font-bold); }
.text-italic { font-style: italic; }

.margin-top-auto { margin-top: auto; }

.spacer-h-l { margin: 3rem 0; }
.spacer-h-m { margin: 2rem 0; }
.spacer-h-s { margin: 1rem 0; }
.spacer-h-xs { margin: 0.5rem 0; }

.spacer-v-l { margin: 0 3rem; }
.spacer-v-m { margin: 0 2rem; }
.spacer-v-s { margin: 0 1rem; }
.spacer-v-xs { margin: 0 0.5rem; }

/* testing */
.test {
    min-width: 0;
    flex: 1 1 25rem;
}