#example1 {
    img {
        border: 5px solid darkblue;
    }
}

#example2 {
    .box {
        border: 5px solid darkblue;
    }
}

#example3 {

    font: 1.2em sans-serif;

    .wrapper {
        display: flex;
    }

    .wrapper>* {
        margin: 20px;
    }

    .box {
        border: 5px solid darkblue;
        height: 100px;
        width: 200px;
    }
}

#example4 {
    font: 1.2em sans-serif;

    .box {
        border: 5px solid darkblue;
        width: 50%;
    }
}

#example5 {
    font: 1.2em sans-serif;

    .box {
        border: 5px solid darkblue;
        width: 200px;
        margin: 10%;
        padding: 10%;
    }
}

#example6 {
    font: 1.2em sans-serif;

    .wrapper {
        display: flex;
        align-items: flex-start;
    }

    .wrapper>* {
        margin: 20px;
    }

    .box {
        border: 5px solid darkblue;
        min-height: 100px;
        width: 200px;
    }
}

#example7 {
    .box {
        width: 200px;
    }

    .mini-box {
        width: 50px;
    }

    .width {
        width: 100%;
    }

    .max {
        max-width: 100%;
    }
}

#example8 {
    font-family: sans-serif;

    .box {
        border: 5px solid darkblue;
        width: 20vw;
        height: 20vh;
        font-size: 10vh;
    }
}