@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Raleway", sans-serif;
}

body {
    background-color: #87b6d8;
}

h1 {
    text-align: center;
    padding: 1rem 0rem 0rem 0rem;
    margin: 1rem 0rem;
}

.container {
    display: flex;
    justify-content: center;
    position: relative;
}

.happy, .angry {
    padding: 1rem;
    transition: all .6s; 
}

.mad {
    display: none;
    position: absolute;
    top: 20px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
}

.mad img,
.happy img,
.angry img {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}



.happy:hover, .angry:hover {
    cursor: pointer;
    transform: scale(1.03, 1.03);
    
}

.container .happy h2,
.container .angry h2,
.container .mad h2 {
    text-align: center;
    padding: 1rem 0;
}

.mad {
    text-align: center;
}