/* Custom fonts */

@font-face {
    font-family: "basier-circle";
    src: url("../fonts/basier-circle/basiercircle-bolditalic-webfont.woff2") format("woff2"),
         url("../fonts/basier-circle/basiercircle-bolditalic-webfont.woff") format("woff"),
         url("../fonts/basier-circle/basiercircle-bolditalic-webfont.eot") format("embedded-opentype"),
         url("../fonts/basier-circle/basiercircle-bolditalic-webfont.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "basier-circle";
    src: url("../fonts/basier-circle/basiercircle-bold-webfont.woff2") format("woff2"),
         url("../fonts/basier-circle/basiercircle-bold-webfont.woff") format("woff"),
         url("../fonts/basier-circle/basiercircle-bold-webfont.eot") format("embedded-opentype"),
         url("../fonts/basier-circle/basiercircle-bold-webfont.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "basier-circle";
    src: url("../fonts/basier-circle/basiercircle-mediumitalic-webfont.woff2") format("woff2"),
         url("../fonts/basier-circle/basiercircle-mediumitalic-webfont.woff") format("woff"),
         url("../fonts/basier-circle/basiercircle-mediumitalic-webfont.eot") format("embedded-opentype"),
         url("../fonts/basier-circle/basiercircle-mediumitalic-webfont.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "basier-circle";
    src: url("../fonts/basier-circle/basiercircle-medium-webfont.woff2") format("woff2"),
         url("../fonts/basier-circle/basiercircle-medium-webfont.woff") format("woff"),
         url("../fonts/basier-circle/basiercircle-medium-webfont.eot") format("embedded-opentype"),
         url("../fonts/basier-circle/basiercircle-medium-webfont.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "basier-circle";
    src: url("../fonts/basier-circle/basiercircle-regularitalic-webfont.woff2") format("woff2"),
         url("../fonts/basier-circle/basiercircle-regularitalic-webfont.woff") format("woff"),
         url("../fonts/basier-circle/basiercircle-regularitalic-webfont.eot") format("embedded-opentype"),
         url("../fonts/basier-circle/basiercircle-regularitalic-webfont.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "basier-circle";
    src: url("../fonts/basier-circle/basiercircle-regular-webfont.woff2") format("woff2"),
         url("../fonts/basier-circle/basiercircle-regular-webfont.woff") format("woff"),
         url("../fonts/basier-circle/basiercircle-regular-webfont.eot") format("embedded-opentype"),
         url("../fonts/basier-circle/basiercircle-regular-webfont.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "basier-circle";
    src: url("../fonts/basier-circle/basiercircle-semibolditalic-webfont.woff2") format("woff2"),
         url("../fonts/basier-circle/basiercircle-semibolditalic-webfont.woff") format("woff"),
         url("../fonts/basier-circle/basiercircle-semibolditalic-webfont.eot") format("embedded-opentype"),
         url("../fonts/basier-circle/basiercircle-semibolditalic-webfont.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: "basier-circle";
    src: url("../fonts/basier-circle/basiercircle-semibold-webfont.woff2") format("woff2"),
         url("../fonts/basier-circle/basiercircle-semibold-webfont.woff") format("woff"),
         url("../fonts/basier-circle/basiercircle-semibold-webfont.eot") format("embedded-opentype"),
         url("../fonts/basier-circle/basiercircle-semibold-webfont.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

/* Basic styling elements*/

:root {
    --step--2: clamp(0.69rem, calc(0.51rem + 0.91vw), 1.60rem);
    --step--1: clamp(0.83rem, calc(0.60rem + 1.17vw), 2.00rem);
    --step-0: clamp(1.00rem, calc(0.70rem + 1.50vw), 2.50rem);
    --step-1: clamp(1.20rem, calc(0.82rem + 1.93vw), 3.13rem);
    --step-2: clamp(1.44rem, calc(0.95rem + 2.47vw), 3.91rem);
    --step-3: clamp(1.73rem, calc(1.10rem + 3.15vw), 4.88rem);
    --step-4: clamp(2.07rem, calc(1.27rem + 4.03vw), 6.10rem);
    --step-5: clamp(2.49rem, calc(1.46rem + 5.14vw), 7.63rem);
    --space-3xs: clamp(0.25rem, calc(0.18rem + 0.38vw), 0.63rem);
    --space-2xs: clamp(0.50rem, calc(0.35rem + 0.75vw), 1.25rem);
    --space-xs: clamp(0.75rem, calc(0.53rem + 1.13vw), 1.88rem);
    --space-s: clamp(1.00rem, calc(0.70rem + 1.50vw), 2.50rem);
    --space-m: clamp(1.50rem, calc(1.05rem + 2.25vw), 3.75rem);
    --space-l: clamp(2.00rem, calc(1.40rem + 3.00vw), 5.00rem);
    --space-xl: clamp(3.00rem, calc(2.10rem + 4.50vw), 7.50rem);
    --space-2xl: clamp(4.00rem, calc(2.80rem + 6.00vw), 10.00rem);
    --space-3xl: clamp(6.00rem, calc(4.20rem + 9.00vw), 15.00rem);
  }

*{
    padding: 0;
    margin: 0;
}
html{
    font-family: "basier-circle", sans-serif;
    font-size: 16px;
    color: #1c1c1b;
    background-color: #ececea;
}

#black-background{
    background-color: #1c1c1b;
}

body{
    font-size: var(--step-0);
    margin-bottom: 0;
}

h1{
    font-size: var(--step-5);
}
p:lang(es-ES){
    font-weight: 500;
}

p:lang(en){
    font-style: italic;
}

ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/*li {
    margin-right: var(--space-s);
}*/

a.underconstruction{
    font-size: var(--step-2);
    font-weight: 500;
    margin-bottom: var(--space-m);
}

a:visited{
    text-decoration: underline;
    color: #4b8aee;
}
a:link{
    text-decoration: underline;
    color: #4b8aee;
}

a:hover{
    text-decoration: none;
    color: #ff4e45;
}

main.grid-container{
    box-sizing: border-box;
    margin-top: var(--space-xs);
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    column-gap: 4rem;
    row-gap: .25rem;
}

#positioned{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

p:nth-of-type(1){
    grid-column: 1;
}

.sticker{
    width: 20vw;
    position: relative;
    bottom:20vh;
    left: 100vw;
    transform: translate(-110%);
    padding-right: var(--space-xl);
}

/*p:nth-of-type(2){
    /*grid-column: 2;
}*/

a:nth-of-type(1){
    grid-column: 1 / -1;
}

p:nth-of-type(3){
    grid-column: 1;
}

/*p:nth-of-type(4){
    grid-column: 2;
}*/

a:nth-of-type(2){
    grid-column: 1 / -1;
}

p:nth-of-type(5){
    grid-column: 1;
}

/*p:nth-of-type(6){
    grid-column: 2;
}*/

ul:nth-of-type(1){
    grid-column: 1 / -1;
}

.fix-top{
    display: block;
    position: fixed;
    z-index: 1;
    top: 0;
    left:100%;
    padding-right: var(--space-xs);
    transform: translate(-120%);
}

.logo{
    box-sizing: border-box;
    padding: 0rem 2rem;
    margin-top: 2rem;
    font-weight: 700;
    font-size: var(--step-4);
}

.emoji{
    font-style: normal;
}

@media screen and (max-width:1125px) {
    main.grid-container{
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media screen and (orientation:portrait){
    .sticker{
        bottom: 10vh;
    }
}