* {
      box-sizing: border-box;
    }
    
    body {
        margin: 0;
    }
    
    div.container {
        border: solid 12px black;
    }
    
    section {
        border: solid 4px black;
        padding: 10px;
        margin: 10px;
        /*The default gap/margin between elements is 10px, but you may need to change this at times*/
        /*Note that 'margin collapse' occurs with some positioning strategies but not others*/
        font-size: 36px;
        font-family: sans-serif;
    }
    
    .one {
        background: #A36;
        height: 200px;
    }

    .two {
        background: #A58;
        width: 50%;
        height: 100px;
        margin-left: 25%;
        margin-right: 25%;
        margin-top: -60px;
    }

    .three {
        background: #A7A;
        width: 40%;
        height: 200px;
        margin-left: 10%;
    }

    .four {
        background: #A9C;
        width: 40%;
        height: 200px;
        margin-left: 50%;
        margin-top: -210px;
    }

    .five {
        background: #ABD;
    }

    .arrow {
        margin-top: 60px;
    }

    .arrow p {
        display: inline;
        font-size: 20px;
        font-family: sans-serif;
        font-weight: bold;
        margin: 30px;
    }

    a {
        cursor: pointer;
    }