* {
      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;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 60px;
        left: 85%;
    }

    .two {
        background: #A58;
        height: 200px;
    }

    .three {
        background: #A7A;
        height: 200px;
    }

    .four {
        background: #A9C;
        height: 200px;
        width: 200px;
        position: absolute;
        top: 125px;
        left: 40%;
        bottom: 580px;

    }

    .five {
        background: #ABD;
        width: 100px;
        height: 100px;
        position: relative;
        top: 65px;
        left: 50px;
    }

    .arrow {
        margin-top: 70px;
    }

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

    a {
        cursor: pointer;
    }