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

      body {
        background-image: radial-gradient(circle, #2196F3, #673AB7, #4CAF50, #00BCD4, #222);
        color: #f8f4f4;
        font-family: Garamond;
    }

      #promotion_items, #section2 {
        border: 8px solid rgb(68, 130, 68);
        margin: 16px;
        min-height: 30svh; /* means percent of small viewport height*/
        position: relative; /* relative on the parent and absolute on the child*/
    }
    h1 {
        background-image: repeating-linear-gradient(45deg,
        red 0px,
        pink 20px, 
        lime 20px, 
        rgb(22, 8, 8) 40px);
        position: sticky;
        top: 0;
        text-align: center;
        text-shadow: 4px 4px 20px #050505;
        padding: 50px;
    }
    #section2 {
        display: flex;
        flex-flow: row wrap;
    }

    #section2 div {
        width: 250px; height: 250px;
        margin:10px;
        background-color: rgb(95, 28, 76);
        flex-grow: 1;
        flex-basis: auto;
    }
    

    .sale_item {
        width: 150px; height: 150px; margin:10px;
        display: inline-block; /*converts to an inline element side-by-side if it was BLOCK it would be one on top of the other*/
    }
    .mens{
        background-color: hotpink; 
        transform: skewx(20deg); rotate:(45deg);
        filter: grayscale(20%);
    
    }
    .womens{
        background-color: lime;  
        position:absolute;
        top:10px; right:10px;
        width: 100px; height:100px;
        transform: translateX(5px)
         
    }
    .kids {
        background-color: rgb(38, 123, 159); 
        transform: translate(50px, 20px) rotate(45deg);
        margin:30px;
        }
         
    
    #section3 {
        border: 10px outset aquamarine;
        border-radius: 20px;
        margin: 50px auto;
        padding: 20px;
        position: relative;
        min-height: 500px;
        width: 80%;

    }

    #redbox {
        width: 200px; height: 200px;
        background-color: red;
        border: 2px inset white;
        position: absolute;
        bottom: 50px; right: 50px;
        border-radius: 50%;
        background-image: url(../Images/babyzenturtlr.jpg);
        background-size: cover;
        background-position: center;

    }

    #orangebox {
        width: 150px; height: 150px;
        background-color: orange;
        border: 3px inset white;
        position: absolute;
        bottom: 0; right: 0;
        border-radius: 50%;
        background-image: url(../Images/astronaut.jpg);
        background-position: center;
        background-size: cover;
      
    }