*{
    margin:0%;
    padding:0%;
    box-sizing:border-box;
    
    }
    html, body {
        height: 100%;
        width:100%;
        background: repeating-linear-gradient(
          45deg,
          #FFF8E7,
          #FFF8E7 20px,
          #FDE2F3 20px,
          #FDE2F3 40px
        );
      }
      
      #main{
        flex-direction: column; 
        height:100%;
        width:100%;
        /* background-color:#FFF8E7; */
        display:flex;
        align-items: center;
        justify-content: center;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        flex-direction: column; 
    }
    .shape{
        margin-left:10px;margin-top:10px;
        height:200px;
        width:200px;
        display:flex;
        align-items:center;
        justify-content:center;
        border: 1px solid black;
        box-shadow: 4px 6px 12px rgba(0,0,0,0.15);
       

    } 

    .shape:hover{
        box-shadow: 6px 8px 16px rgba(0,0,0,0.25);
        transform: translateY(-5px); 
        border:none;
      }

    
    h1{
        font-weight:lighter
    }
    #box{
        display: flex;
        justify-content: center;
        margin-bottom: 30px; 
    }

    #circle {
        margin-top: 30px;  
        align-self: center;
        border-radius:50%;
      }
      
    
    #diamond{
        margin-top:40px;
        rotate: 45deg;
        height:165px;
        width:165px;
        margin-left: 70px; 
    }
    #diamond h1{
        rotate: -45deg;
    }
    #square:hover{
        background-color:#F8C8DC;
    }
    #circle:hover{
        background-color:#E0BBE4;
    }
    
    #diamond:hover{
        background-color:#AFCBFF;
    }