@import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&family=Goblin+One&family=Inconsolata:wght@400;500&family=Mali:ital,wght@0,400;0,500;1,600&family=PT+Sans&family=Share+Tech+Mono&display=swap");

*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* border radius */
    --border-radius: 10px;

    /* colors */
    --color-1: #040102;
    --color-2: #3ac5af;
    --color-3: #c53a50;
    --color-4: #f3eed6;
    --color-5: #c5af3a;
    --this-color-1: #79c698;
    --this-color-2: #f1f3f8;
    --this-color-3: #0c2231;
    --this-color-4: #b683c3;

    /* font fam */
    --h1_font-fam: "Goblin One", Tahoma, Geneva, Verdana, sans-serif;
    --main_font-fam: "Mali", cursive;
    --code_font-fam: "Share Tech Mono", monospace;

    /* font sz */
    --h1_font-sz: calc(3rem + 0.5vw);
    --h2_font-sz: calc(2.2rem + 0.5vw);
    --h3_font-sz: 1.8rem;
    --code_font-sz: 1.125rem;
    --p_font-sz: 1.15rem;

    /* font wt */
    --medium: 500;
    --semibold: 600;

    /* gap */
    --container_col-gap: calc(0.5rem + 1vw);
    --container_row-gap: calc(1rem + 2vh);

    /* margin */
    --marg-block: clamp(8px, calc(0.6rem + 1vh), 20px);
    --marg-inline: clamp(8px, calc(0.6rem + 1vh), 20px);
    --h2_marg-block: clamp(1rem, calc(0.4rem + 5vh), 1.5rem);
    --h3_marg-block: calc(0.4rem + 0.5vh);

    /* padding */
    --pad-block: clamp(8px, calc(0.6rem + 1vh), 30px);
    --body_pad-inline: clamp(8px, calc(0.6rem + 1vw), 30px);
    --pad_section: clamp(12px, calc(1rem + 4%), 50px);
}

body {
    background-color: var(--this-color-1);
    color: var(--this-color-2);
    font-family: var(--main_font-fam);
    line-height: 1.5;
    padding-block: var(--pad-block);
    padding-inline: var(--body_pad-inline);
    text-align: start;
}
section {
    background-color: var(--this-color-3);
    border: var(--this-color-4) 4px solid;
    border-end-end-radius: var(--border-radius);
    border-start-start-radius: var(--border-radius);
    border-style: inset;
    margin-block: var(--marg-block);
    padding-block: var(--pad_section);
    padding-inline: var(--pad_section);
}
ul {
    list-style-position: inside;
}
h1 {
    color: var(--this-color-3);
    font-family: var(--h1_font-fam);
    font-size: var(--h1_font-sz);
    font-weight: bolder;
    margin-block: var(--marg-block);
    line-height: 1.1;
    text-align: center;
    -webkit-text-stroke: var(--this-color-4) 1px;
}
h2 {
    font-size: var(--h2_font-sz);
    font-style: italic;
    font-weight: var(--semibold);
    margin-block-end: var(--h2_marg-block);
}
h3 {
    font-size: var(--h3_font-sz);
    font-weight: var(--medium);
    line-height: 1;
    margin-block-end: var(--h3_marg-block);
}
p {
    font-size: var(--p_font-sz);
}
li > p {
    display: inline-block;
}
p::selection,
h2::selection {
    background: var(--this-color-1);
    color: var(--this-color-3);
}
li {
    list-style-type: square;
}
code {
    font-family: var(--code_font-fam);
    font-size: var(--code_font-sz);
    font-weight: var(--medium);
}
code::selection,
h3::selection {
    background-color: var(--this-color-4);
    color: var(--this-color-3);
}
footer p {
    color: var(--this-color-3);
    font-size: var(--code_font-sz);
    text-align: center;
}

.double-section-container {
    column-gap: var(--container_col-gap);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* COLORS SECTION */
.colors-container ul {
    column-gap: var(--container_col-gap);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    row-gap: var(--container_row-gap);
}
.colors-container li {
    border-radius: calc(var(--border-radius) * 2);
    border: var(--this-color-4) solid 1px;
    list-style: none;
    padding-block: var(--pad-block);
    padding-inline: var(--pad_section);
    text-align: center;
}
.colors-container li:first-child {
    background-color: var(--color-1);
}
.colors-container li:nth-child(2) {
    background-color: var(--color-2);
    color: var(--this-color-3);
}
.colors-container li:nth-child(3) {
    background-color: var(--color-3);
}
.colors-container li:nth-child(4) {
    background-color: var(--color-4);
    color: var(--this-color-3);
}
.colors-container li:last-child {
    background-color: var(--color-5);
    color: var(--this-color-3);
}

/* FONTS SECTION */
.fonts-container {
    column-gap: var(--container_col-gap);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    row-gap: var(--container_row-gap);
}
.alegreya p {
    font-family: "Alegreya", serif;
}
.alegreya p:last-child {
    font-weight: 700;
}
.inconsolata p {
    font-family: "Inconsolata", monospace;
}
.inconsolata p:last-child {
    font-weight: var(--medium);
}
.pt-sans p {
    font-family: "PT Sans", sans-serif;
}

/* TEXT STYLES SECTION */
.text-styles-container {
    display: grid;
    grid-template-columns: 1fr;
}
.text-styles-container div {
    margin-block-end: calc(var(--marg-block) + 1vh);
}
.text-styles-container div:last-child {
    margin-block-end: 0;
}