body {
    background-color: red;
}

#shape1 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 50%;
    height: 50%;
    background-color: blue;
}

#shape2 {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 50%;
    height: 50%;
    background-color: green;
}

#shape3 {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 50%;
    height: 50%;
    background-color: yellow;
    
}

#shape4 {
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 50%;
    height: 50%;
    background-color: purple;
}

#shape5 {
    position: absolute;
    bottom: 50%;
    right: 50%;
    top: 50%;
    left: 50%;
    width: 25%;
    height: 25%;
    background-color: orange;
    transform: translate(-50%, -50%);
    border: 20px solid black;
}

#shape6 {
    position: absolute;
    top: 35%;
    left: 0%;
    width: 25%;
    height: 30%;
    background-color: pink;
}

#shape7 {
    position: absolute;
    top: 35%;
    right: 0%;
    width: 25%;
    height: 30%;
    background-color: navy;
}

#shape8 {
    position: absolute;
    bottom: 0%;
    left: 35%;
    width: 30%;
    height: 15%;
    background-color: beige;
    padding: 150px;
    border: 5px dotted grey;
    box-sizing: border-box;
}

#shape9 {
    position: absolute;
    top: 0%;
    left: 35%;
    width: 30%;
    height: 15%;
    background-color:brown;
    padding-bottom: 150px;
}