* {
      box-sizing: border-box;
    }
    
    body {
        margin: 0;
    }
    
    div.container {
        border: solid 12px black;
        height: 100vh;
        width: 100vw;
        padding: 10px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 69% 30%;
        grid-template-rows: 100px 150px 100px 200px 200px;
    }
    
    section {
        border: solid 4px black;
        padding: 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;
        grid-row-start: 1;
        grid-row-end: 4;
    }

    .two {
        background: #A58;
        height: 100px;
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .three {
        background: #A7A;
    }

    .four {
        background: #A9C;
        grid-area: 5/1/6/3;
    }

    .five {
        background: #ABD;
        grid-row-start: 2;
        grid-row-end: 5;
    }

    .arrow {
        margin-top: 60px;
        margin-bottom: 40px;
    }

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

    a {
        cursor: pointer;
    }