/*FUENTE*/
@font-face {
  font-display: swap;
  font-family: Jersey10;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/jersey10.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/jetbrainsmono.woff2') format('woff2'); 
}


/*DEFINITIONS*/
:root {
    --mate-text: rgb(241, 236, 236);
    --mate-dark: rgb(20, 20, 20);
    --mate-light: rgb(62, 62, 62);
    --mate-red: rgb(243, 37, 52);
    --mate-dark-red: rgb(200, 14, 26);

    --mate-text-light: rgb(20, 20, 20);
    --mate-background-light: rgb(241, 236, 236);
}

body {
    display: flex;
    justify-content: center;

    margin: 0;
    padding: 0;

    background-color: var(--mate-dark);
    background-image: url(../images/fondo.svg);
    color: var(--mate-text);

    --shadow-color: var(--mate-text);

    font-family: Jersey10, sans-serif;

    transition: all 0.5s ease;
}
body.light-mode {
    background-color: var(--mate-background-light);
    color: var(--mate-text-light);

    --shadow-color: var(--mate-dark);
}
body.light-mode a {
    color: var(--mate-dark-red);
}
body.light-mode h2 {
    color: var(--mate-text);
    background-image: linear-gradient(to right, var(--mate-dark), var(--mate-text));
}

h1 {
    font-size: 350%;
    text-align: center;
}
h2 {
    padding-inline: 2vw;
    color: var(--mate-dark);
    background-image: linear-gradient(to left, rgba(20, 20, 20, 0.2), var(--mate-text));
    border-radius: 20px;
    transition: color 0.5s ease;
}

a {
    display: inline-block;
    color: var(--mate-red);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: blueviolet;
    transform: scale(1.2);
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: inherit;
    border-bottom: 1vh dashed var(--mate-light);
    padding-bottom: 2vh;
}
header ul {
    display: flex;
    gap: 3vw;
    justify-content: space-evenly;
}
header a {
    font-size: 175%;
}

.column {
    display: flex;
    flex-direction: column;

    min-height: 100vh;

    background-color: inherit;
    width: clamp(360px, 70vw, 100%);

    box-shadow: 0 0 30px var(--shadow-color);
    transition: box-shadow 0.5s ease;

    border-inline: 2vw solid var(--mate-light);
    box-sizing: border-box;
    padding: 0, 16px;
}

main {
    padding-inline: 2vw;
    font-size: 150%;
    margin: 3%;
}
main p {
    text-align: justify;
}

.code-block {
    background-color: var(--mate-light);
    color: var(--mate-text);
    text-align: left;
    padding: 1rem 0;

    border: 5px dashed var(--mate-dark);

    font-family: Jetbrains Mono;
    font-size: 65%;

    overflow-x: scroll;
}
.code-block p {
    margin: 0.3rem 0 0 3rem;
}