/* reset rule */
* {
    margin: 0;padding: 0;border: 0;box-sizing: border-box;
}

body {
    background-color: teal;
}
h1 {
    font-family: 'Righteous', cursive;
    margin: 8px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 2px solid #16425b;  
    padding: 8px;
}

section {
    border: 4px solid #d33;
    width: 80%; 
    min-height:200px;
    margin: auto;
    margin-bottom: 10px;
    border-radius: 8px;
    transform: rotate(180deg);
}

h2 {
    color: black; 
    margin: 8px;
    
    font-family: 'Fira Sans Condensed', sans-serif;
}

.three_boxes_container {
    margin: 16px;
    min-height: 180px;
    padding: 12px 0px;
    background-color: hsla(200, 50%, 100%, .8);
    border-radius: 8px;
    text-align: center; /*only centers if the blocks are inline-block */
    /*display: flex;*/
    /* justify-content: center; centers flexbox items*/ 
    /*flex-wrap: wrap; wrap to a new line when needed */
}

.three_boxes_container > div {
    width: 200px; 
    height: 150px;
    margin: 12px;
    padding: 4px;
    background-color: hsla(200, 50%, 60%, 1.0);
    border-radius: 8px;
    display: inline-block; 
    /* flex-grow: 1; /*expands the items when there's room */
    /*position: relative; /*do this when you want to absolute position a child */
}

.disc{
    margin: 115px 130px;
    border: 18px solid red;
    border-radius: 50%;
    /*background-color: red;
    width: 50px; height: 50px;
    text-align: center;/* centers text within a block */
    /*line-height: 48px;/* hack for vertical centering 1 line of text */
    /*position: absolute;/* complete control where the element is placed*/
    /*bottom: 0px; right: 30px;*/
    /*transform: translateY(50%);/* the translate function in the transform property*/
    /* Y=vertical X=horizontal *//* used to adjust the positioning of an element */
}

.five_boxes_container {
    margin: 16px;
    min-height: 180px;
    padding: 12px 0px;
    background-color: hsla(50, 50%, 60%, 0.8);
    border-radius: 8px;
    text-align: center;
}

.five_boxes_container>div{
    width: 150px; height: 200px;
    background-color: hsla(120, 50% , 35%, 1.0);
    display: inline-block;
    border-radius: 8px;
    transform: skew(5deg) rotate(10deg);
    margin: 15px 8px;
}

.five_boxes_container > div:nth-child(4) {
    background-color: red;
}