img {
max-width:100%;

}

.block {
    background:lightpink;
    margin:10px;
    padding:10px;
    width:100px;
    height:100px;

}

.inline {
background:lightgoldenrodyellow;
/* for inline elements, margin and 
padding dont function like they do with block elements,
 inline elements can not be given a width or height */
margin:10px;
padding:10px;

}

.inline-block {
    background:lightseagreen;
    display:inline-block;
    margin:10px;
    padding:10px;
/*unlike inline, inline block can be given width and height */
    width:50px;
    height:50px;
}

.content-box {

background:lightcyan;
padding:40px;
border:5px solid rgb(67, 118, 67);
margin:100px;
width:200px;
Height:200px;
}

.border-box {

    background:lightsalmon;
    padding:40px;
    border:5px solid red;
    margin:100px;

    width:200px;
    height:200px;

/* border box includes the padding and
 border sizes in the total width and height of the element
    box-sizing:border-box   */
    box-sizing:border-box;
}

.square {
    background:burlywood;
    width:100px;
    height:100px;
    margin:10px;
}   

.relative {
    background:honeydew;
    position:relative;
    top:20x;
    left:20px;
}

.fixed {
    background:lightgray;
    position:fixed;
    bottom:0;
    right:0;
    margin:0;
}

.sticky {
    background:plum;
    position:sticky;
    top:0;

}

.absolute {
    background:powderblue;
    position:absolute;
    top:1200px;
    right:50px;

}

.smiley {

    background:lightseagreen;
    width:200px;
    height:200px;
    margin:50px;
    position:relative;
}

.eye {
background:darkolivegreen;
width:30px;
height:30px;
/* in order for this element to be positioned relative to its 
container, the container also needs to have a position value */
position:absolute;
left:50px;
top:50px;

}