body, html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
background: #333;
color: white;
padding: 20px;
text-align: center;
}
.nav {
background: #444;
color: white;
padding: 10px;
text-align: center;
}
.content {
flex: 1;
padding: 20px;
background: #f4f4f4;
}
.footer {
background: #333;
color: white;
padding: 20px;
text-align: center;
}
.parallax {
height: 70vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#parallax1 {
background-image: url(img/parallax.jpg);
}
.gallery-image {
width: 200px;
height: auto;
margin: 5%;
border: 1pxsolid#ccc;
transition: transform .2s;
cursor: pointer;
}
.gallery-image:hover {
transform: scale(1.1);
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6sease;
user-select: none;
border-radius: 3px003px;
}
.next {
right: 0;
}
.prev {
left: 0;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}