.example {
    padding: 15px;
}

#ex1 {
    .box {
        padding: 0.3em;
        background-color: #567895;
    }

    h2 {
        background-color: black;
        color: white;
    }

    span {
        background-color: rgb(255 255 255 / 50%);
    }
}

#ex2 {
    .wrapper {
        display: flex;
    }

    .box {
        width: 200px;
        height: 80px;
        padding: 0.5em;
        border: 1px solid #ccc;
        margin: 20px;
    }

    .a {
        background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
        /* background-color: yellow; */
    }

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

#ex3 {
    .box {
        width: 200px;
        height: 100px;
        border: 1px gray solid;
        background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
        /* background-repeat: no-repeat; */
        /* background-repeat: repeat-x; */
        /* background-repeat: repeat-y; */
        /* background-repeat: repeat; */
        background-repeat: space;
        /* background-repeat: round; */
    }
}

#ex4 {
    .box {
        width: 300px;
        height: 150px;
        border: 1px gray solid;
        background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
        background-repeat: no-repeat;
        /* background-size: 80px 10em; */
        background-size: contain;
        background-size: cover;
    }
}

#ex5 {
    .box {
        width: 300px;
        height: 150px;
        background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
        background-repeat: no-repeat;
        background-position: 120px 1em;
    }
}

#ex6 {
    .wrapper {
        display: flex;
    }

    .box {
        width: 400px;
        height: 80px;
        padding: 0.5em;
        border: 1px solid #ccc;
        margin: 20px;
    }

    .a {
        background-image: linear-gradient(105deg,
                rgb(0 249 255 / 100%) 39%,
                rgb(51 56 57 / 100%) 96%);
    }

    .b {
        background-image: radial-gradient(circle,
                rgb(0 249 255 / 100%) 39%,
                rgb(51 56 57 / 100%) 96%);
        background-size: 100px 50px;
    }
}

#ex7 {
    .wrapper {
        display: flex;
    }

    .box {
        width: 500px;
        height: 80px;
        padding: 0.5em;
        border: 1px solid #ccc;
        margin: 20px;
    }

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

#ex8 {
    display: flex;

    .bg-attach {
        width: 30%;
        border: 1px solid gray;
        max-height: 200px;
        margin: 10px;
        background-image: url("/images/css-mdn/css-styling-basics/firefox-icon.png");
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: top center;
        padding: 1em;
        overflow: auto;
    }

    #bg-scroll {
        background-attachment: scroll;
    }

    #bg-fixed {
        background-attachment: fixed;
        background-position: center;
    }

    #bg-local {
        background-attachment: local;
    }
}

#ex9 {
    .box {
        width: 500px;
        height: 300px;
        padding: 0.5em;
        background:
            linear-gradient(105deg,
                rgb(255 255 255 / 20%) 39%,
                rgb(51 56 57 / 100%) 96%) center center / 400px 200px no-repeat,
            url(https://mdn.github.io/shared-assets/images/examples/big-star.png) center no-repeat,
            rebeccapurple;
    }
}

#ex10 {
    * {
        padding: 0.2em;
    }

    .box {
        width: 500px;
        background-color: #567895;
        border: 5px solid #0b385f;
        border-bottom-style: dashed;
        color: #fff;
    }

    h2 {
        border-top: 2px dotted rebeccapurple;
        border-bottom: 1em double rgb(24 163 78);
    }
}

#ex11 {
    .box {
        width: 500px;
        height: 110px;
        padding: 0.5em;
        border: 10px solid rebeccapurple;
        border-radius: 1em;
        border-top-right-radius: 10% 30%;
    }
}