body{
    background-color:bisque;
    height: 750px;
    background-image: url(images/wallshape.png);
}

header{
    background-color: aliceblue;
    padding: 5px;
}

h1, h2, h3, p{
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.images{
   display: flex;
   justify-content: center;
}

.images img {
	max-width: 100%;
	transition: all 1s ease;
    animation: movement 2.7s ease-in-out infinite;
}

@keyframes movement {
    0% {
        transform: translate(0, 0px)
    }
    50% {
        transform:translate(0, 10px)
    }
    100% {
        transform: translate(0, 0px)
    }

}
.images img:hover{
	transform: scale(1.5);
    filter: grayscale(100%);
}
/* section{
    background-color: cadetblue;
} */

/* .hidden{
display: none;
} */

/* .styled{
    background-color: rgb(209, 143, 143);
    position: absolute;
    top: 0;
    right: 0;
    /* width:100vw;
    height: 100vh; */
    /* width: 50vw;
    height: 90vh;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
} */ 

/* .styled img {
    display: block;
    margin: 0 auto;
}

.styled p{
    line-height: 1.2em;
} */

.close{
    background-color: bisque;
    color:blueviolet;
    font-family: 'Poppins', sans-serif;
    padding: 10px;
    margin-top: 20px;
    border: none;

}

.close:hover{
    background-color: skyblue;
    color:white;
}

/* #overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(3, 0, 0, 0.5);
} */

#overlay1, #overlay2,  #overlay3, #overlay4{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(3, 0, 0, 0.5);
    /* transition-property: visibility, opacity;
    transition-duration: 1s;
    transition-timing-function: ease; */
}

/* #overlay article{
    box-sizing: border-box;
    background-color: white;
    width: 50vw;
    height: 80vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    overflow-y: scroll;
} */

#overlay1 article, #overlay2 article, #overlay3 article, #overlay4 article{
    box-sizing: border-box;
    background-color: white;
    width: 50vw;
    height: 80vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    overflow-y: scroll;
}

.hidden{
    visibility:hidden;
    opacity: 0;
}

.showing{
    visibility:showing;
    opacity:1;
}