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

    h1 {background-image: repeating-linear-gradient(65deg, red 0px, red 80px, white 80px, white 160px, blue 160px, blue 240px); text-align: center; padding:50px;
        color: black;}

    body { background-color: #345; color:#EEE; font-family: Verdana;}

    #section1 {border:8px solid lime; min-height: 30svh; margin: 16px; position:relative;}
    #section2 {border:8px solid lime; min-height: 30svh; margin: 16px;}
    #section3 {border:8px solid lime; min-height: 60svh; margin: 16px; position: relative;}

    #section1 div {display:inline-block}
    #section1 div:nth-child(1) {background-color: hotpink; width:150px; height: 150px; margin: 10px; transform: rotate(45deg);}
    #section1 div:nth-child(2) {background-color: lime; width:100px; height: 100px; margin: 10px; position:absolute; top:10px; right:10px;}
    #section1 div:nth-child(3) {background-color: orangered; width:150px; height: 150px; margin: 10px;}


    #section2 {display: flex; flex-flow: row wrap;}
    #section2 div {width:250px; height:250px; margin: 10px; background-color: pink; flex-grow:1;}

    #redbox {width: 100px; height: 100px; background-color: red; position: absolute; top: 10px; left: 10px; border-radius: 50%;}
    #orangebox {width: 200px; height: 100px; background-color: orange; position: absolute; bottom: 10px; right: 10px; background-image: url(../Screenshots/leaves.jpg); background-size: cover; background-position: center; border-radius: 30%;}