*{
    margin: 0%;
    padding: 0%;
}
html,body{
    height: 100%;
    width: 100%;    

}
body{
    background-color: rgba(0, 94, 255, 0.366);
    display: flex;
}
#Box1{
    background-color: blue;
    height: 200px;
    width: 200px;
}
#Box2{
    background-color: rgb(162, 0, 255);
    height: 200px;
    width: 200px;
}
#Box3{
    background-color: rgb(85, 0, 255);
    height: 200px;
    width: 200px;
}
#main{
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-family: "Gill Sans";   

}
h1{
    font-size: normal;
}
.shape{
    margin-top: 10px; margin-left: 10px;
    height: 200px;
    width: 200px;
    border: 1px solid rgba(0, 0, 0, 0.267);
     display: flex;
    align-items: center;
    justify-content: center;

}
#square:hover{
    background-color: rgb(255, 0, 0);
}
#Circle{
  
    border-radius: 50%;
}
#Circle:hover{
  
    background-color: blue;
}
#diamond{
    rotate: 45deg;
    margin-top: 50px; }

    

#diamond h1{
     rotate: -45deg;
}

#diamond:hover{
    background-color: rgb(0, 255, 0);
    
}