/* -> Color Palette */

.color-palette {
    display: grid;
    grid-template-areas: "blue"
                         "teal"
                         "darkteal"
                         "black"
                         "darkgray"
                         "gray"
                         "offwhite";
}

@media (min-width: 37.5rem) {
    .color-palette {
        grid-template-areas:    "blue       blue"
                                "teal       offwhite"
                                "darkteal   gray"
                                "black      darkgray";
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 62.5rem) {
    .color-palette {
        grid-template-areas:    "blue   offwhite    gray        darkgray"
                                "blue   teal        darkteal    black";
        grid-template-columns: repeat(4, 1fr);
    }
}

.color-box {
    padding: 1rem;
    text-align: end;
    min-block-size: 15rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.color-palette p,
.color-palette h3 {
    user-select: all;
    color: var(--off-white);
    margin: 0;
}

.color-palette h3 {
    margin-block-end: 1rem;
}

.color-palette p:first-of-type::before {
    content: "Hex: #";
}

.color-palette p:nth-of-type(2)::before {
    content: "RGB: ";
}

.color-palette p:nth-of-type(3)::before {
    content: "CMYK: ";
}

.color-box.blue {
    background-color: var(--blue);
    grid-area: blue;
}

.color-box.teal {
    background-color: var(--teal);
    grid-area: teal;
}

.color-box.dark-teal {
    background-color: var(--dark-teal);
    grid-area: darkteal;
}

.color-box.off-black {
    background-color: var(--off-black);
    grid-area: black;
}

.color-box.off-white {
    background-color: var(--off-white);
    grid-area: offwhite;
}

.color-box.off-white h3,
.color-box.off-white p {
    color: var(--off-black);
}

.color-box.gray {
    background-color: var(--gray);
    grid-area: gray;
}

.color-box.gray h3,
.color-box.gray p {
    color: var(--off-black);
}

.color-box.dark-gray {
    background-color: var(--dark-gray);
    grid-area: darkgray;
}


/* -> Typography */

.subsection-wrapper.fonts#font-play {
    font-family: "Play", sans-serif;
}

.subsection-wrapper.fonts#font-encode {
    font-family: "Encode Sans", sans-serif;
}

.font-name {
    font-size:4rem;
    color: var(--teal);
}

.all-symbols {
    font-size: 3rem;
}

.subsection-wrapper.fonts {
    display: grid;
    gap: 2rem;
}

.all-symbols > div {
    margin-block-end: 1rem;
    gap: 6px;
}

.all-symbols > div > span {
    border: 1px dashed var(--gray);
}

.all-symbols > div.abc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}

.all-symbols > div.numbers,
.all-symbols > div.symbols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
}

/* --> Smaller fonts for mobile */
@media (max-width: 37.5rem) {
    .font-name {
        font-size: 2.5rem;
    }
    
    .all-symbols {
        font-size: 2rem;
    }

    .all-symbols > div.abc {
        grid-template-columns: repeat(auto-fill, minmax(3.75rem, 1fr));
    }

    .all-symbols > div.numbers,
    .all-symbols > div.symbols {
        grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
    }
}

/* Buttons */

.subsection-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 30rem;
    padding: 2rem 0;
}

.buttons div:last-child {
    margin: auto;
}