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%);
}

.close1, .close2, .close3, .close4, .close5{
    background-color: bisque;
    color:blueviolet;
    font-family: 'Poppins', sans-serif;
    padding: 10px;
    margin-top: 20px;
    border: none;
}

.close1:hover, .close2:hover, .close3:hover, .close4:hover, .close5:hover{
    background-color: skyblue;
    color:white;
}

#overlay1, #overlay2,  #overlay3, #overlay4, #overlay5{
    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;
}

#overlay1 article, #overlay2 article, #overlay3 article, #overlay4 article, #overlay5 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;
}