*{
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
width: 100%;
 }
 #main{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
 }
 .shape{
    margin-top: 10px;
    margin-left: 10px;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 #circle{
    border-radius: 50%;
 }
 #diamond{
    rotate: 45deg;
    margin-top: 50px;
 }
 #diamond h1{
    rotate: -45deg;
 }
  #square:hover{/*pseudoSelector */
    background-color: red;
 }
 #circle:hover{
    background-color: green;
 }
 #diamond:hover{
    background-color: blue;
 }