@import url("../free_stuff/styles/fonts.css");

h3 {
    font-family: Bagpack;
    font-size: 3.5rem;
    color: var(--color4);
    text-align: center;
    margin: 2rem 0;
}

.wall-backdrop {
    background-image: url("../wall.jpg");
    background-repeat: repeat-y;
    background-size: contain;
    background-color: rgb(67, 58, 98);
    background-blend-mode: multiply;
    background-position: 0 0.3rem;
    margin-top: 10rem;
    box-shadow: 0 -2px black;
}

ul {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    li:nth-child(4n) .font-text {
        color: var(--color1);
    }

    li:nth-child(4n + 1) .font-text {
        color: var(--color2);
    }

    li:nth-child(4n + 2) .font-text {
        color: var(--color3);
    }

    li:nth-child(4n + 3) .font-text {
        color: var(--color4);
    }
}

.font-sample {
    font-size: 2.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .font-name {
        font-family: AttackGraffiti;
        color: var(--color1);
        text-wrap: nowrap;
        text-decoration: underline;
        text-underline-offset: 0.5rem;
        text-shadow: 2px 2px var(--color4);
    }

    .font-text {
        span {
            text-wrap: nowrap;
        }
    }
}