html {
    font-size: 16pt;
}

#len {
    font-size: 11pt;

    #len-cm {
        width: 10cm;
        border-bottom: red 1px solid;
    }

    #len-mm {
        width: 10mm;
        border-bottom: red 1px solid;
    }

    #len-q {
        width: 10Q;
        border-bottom: red 1px solid;
    }

    #len-in {
        width: 10in;
        border-bottom: red 1px solid;
    }

    #len-pc {
        width: 10pc;
        border-bottom: red 1px solid;
    }

    #len-pt {
        width: 10pt;
        border-bottom: red 1px solid;
    }

    #len-px {
        width: 10px;
        border-bottom: red 1px solid;
    }

    #len-em {
        width: 10em;
        border-bottom: green 1px solid;
    }

    #len-rem {
        width: 10rem;
        border-bottom: green 1px solid;
    }

    #len-vw {
        width: 50vw;
        border-bottom: green 1px solid;
    }

    #len-vh {
        width: 50vh;
        border-bottom: green 1px solid;
    }
}

#example1 {
    .box {
        background-color: lightblue;
        border: 5px solid darkblue;
        padding: 10px;
        margin: 1em 0;
    }

    .wrapper {
        font-size: 1em;
    }

    .px {
        width: 200px;
    }

    .vw {
        width: 10vw;
    }

    .em {
        width: 10em;
    }
}

#example2 {
    .ems li {
        font-size: 1.3em;
    }

    .rems li {
        font-size: 1.3rem;
    }
}

#example3 {
    p {
        margin: 0;
        background-image: repeating-linear-gradient(to top,
                lightskyblue 0 2px,
                transparent 2px 1lh);
    }
}

#example4 {
    .box {
        background-color: lightblue;
        border: 5px solid darkblue;
        padding: 10px;
        margin: 1em 0;
    }

    .wrapper {
        width: 400px;
        border: 5px solid rebeccapurple;
    }

    .px {
        width: 200px;
    }

    .percent {
        width: 40%;
    }
}

#example5 {
    li {
        font-size: 80%;
    }
}

#example6 {
    .wrapper {
        background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
        background-repeat: no-repeat;
        background-position: bottom left;
        padding: 20px;
    }

    .box {
        margin: 40px auto;
        width: 200px;
        background-color: lightblue;
        border: 5px solid darkblue;
        padding: 10px;
        opacity: 0.5;
    }
}

#example7 {
    .box {
        padding: 10px;
        margin: 0.5em 0;
        border-radius: 0.5em;
    }

    .one {
        background-color: antiquewhite;
    }

    .two {
        background-color: blueviolet;
    }

    .three {
        background-color: greenyellow;
    }
}

#example8 {
    .box {
        padding: 10px;
        margin: 0.5em 0;
        border-radius: 0.5em;
    }

    .one {
        background-color: #02798b;
    }

    .two {
        background-color: #c55da1;
    }

    .three {
        background-color: #128a7d;
    }
}

#example9 {
    .box {
        padding: 10px;
        margin: 0.5em 0;
        border-radius: 0.5em;
    }

    .one {
        background-color: rgb(2 121 139);
    }

    .two {
        background-color: rgb(197 93 161);
    }

    .three {
        background-color: rgb(18 138 125);
    }
}

#example10 {
    #hwb-box {
        margin: 5px;
        width: 80%;
        background-color: hwb(45 25% 0%);
    }
}

#example11 {
    .box {
        padding: 10px;
        margin: 0.5em 0;
        border-radius: 0.5em;
    }

    .one {
        background-color: hsl(188 97% 28%);
    }

    .two {
        background-color: hsl(321 47% 57%);
    }

    .three {
        background-color: hsl(174 77% 31%);
    }
}

#example12 {
    .wrapper {
        background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
        padding: 40px 20px;
    }

    .box {
        padding: 10px;
        margin: 0.5em 0;
        border-radius: 0.5em;
    }

    .one {
        background-color: hsl(188 97% 28% / 0.3);
    }

    .two {
        background-color: hsl(321 47% 57% / 0.7);
    }

    .three {
        background-color: hsl(174 77% 31% / 0.9);
    }
}

#example13 {
    .box {
        height: 150px;
        width: 300px;
        margin: 20px auto;
        border-radius: 0.5em;
    }

    .image {
        background-image: url(https://mdn.github.io/shared-assets/images/examples/big-star.png);
    }

    .gradient {
        background-image: linear-gradient(90deg,
                rgb(119 0 255 / 39%),
                rgb(0 212 255 / 100%));
    }
}

#example14 {
    .box {
        height: 100px;
        width: 400px;
        background-image: url(https://mdn.github.io/shared-assets/images/examples/big-star.png);
        background-repeat: no-repeat;
        background-position: right 40px;
        margin: 20px auto;
        border-radius: 0.5em;
        border: 5px solid rebeccapurple;
    }
}

#example15 {
    .box {
        width: 400px;
        padding: 1em;
        border-radius: 0.5em;
        border: 5px solid rebeccapurple;
        background-color: lightblue;
    }

    .box::after {
        content: "This is a string. I know because it is quoted in the CSS.";
    }
}

#example16 {
    .wrapper {
        width: 400px;
    }

    .box {
        padding: 1em;
        border-radius: 0.5em;
        border: 5px solid rebeccapurple;
        background-color: lightblue;
        width: calc(20% + 100px);
    }
}