.wrapper {
    margin: auto;
    width: min(100%, 600px);
    background-color: aliceblue;
    padding: 10px;
}

html {
    font-family: monospace;
    background-color: azure;
    font-size: 16px;
}

a:link {
    color: maroon;
}

a:visited {
    color: peru;
}

:is(span, code) p {
    color: red;
}

span:has(div) {
    color: red;
}

p + p {
    color: red;
}

p > span {
    color: red;
}

input {
    accent-color: red;
}

#hyphen {
    hyphens: auto;
}

#border {
    border: 10px solid red;
}

#outline {
    outline: 10px solid red;
}

#skip {
    text-decoration: underline red;
    text-decoration-skip-ink: auto;
    font-size: 24px;
}

#no-skip {
    text-decoration: underline red;
    text-decoration-skip-ink: none;
    font-size: 24px;
}

#grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    padding: 10px;
    font-size: clamp(2rem, 5vw, 4rem);
    background-color: lightgray;
    aspect-ratio: 16/9;
}

#css {
    all: unset;
    background-color: lightblue;
    border: 1px solid black;
    padding: 20px;
    grid-area: 2 / 2 / 6 / 6;
    display: flex;
    justify-content: center;
    align-items: center;
}

#is {
    all: unset;
    background-color: lightblue;
    border: 1px solid black;
    padding: 20px;
    grid-area: 7 / 3 / 10 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
}

#awesome {
    all: unset;
    background-color: lightblue;
    border: 1px solid black;
    padding: 20px;
    grid-area: 1 / 7 / 11 / 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

#awesome span {
    all: unset;
    transform: rotate(-90deg);
}