*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
html,body{
    height:100%;
    width:100%;
}
#main{
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.shape{
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    width:200px;
    height:200px;
    border : 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}
#circle3{
    border-radius: 50%;
}
#diamond2{
    rotate: 45deg;
    h1{
        rotate :-45deg;    
    }
    margin-top: 60px;
    translate: 5px 5px;
}
#square1:hover{
    background-color: red;
}
#diamond2:hover{
    background-color: green;
}
#circle3:hover{
    background-color: blueviolet;
}