body {
  width: 100%;
  height: 100%;
  margin: 0;
}


html {
    scroll-behavior: smooth;
}


#body-div {
  width: 100%;
  height: 3000px;
  margin: 30px;
  background-color: rgb(220,228,232);
}

#pageTitle{
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 3.7em;
	color: black;
	width: 600px;
	height: 100px;
	margin-left: 45px;
	margin-top: 100px;
}

.firstImageContainer{
	width: 800px;
	height: 603px;
	margin: 0 auto;
	line-height: 30px;
	display: block;
	margin-top: 125px;
	margin-bottom: 250px;
	text-align: center;
}

.flip-image {
  background-color: transparent;
  width: 800px;
  height: 603px;
  border: 1px solid #f1f1f1;
  margin: 0;
  top: 50%;
  left: 60%;
  perspective: 1000px;
  text-align: center;
}

.flip-image-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-image:hover .flip-image-inner {
  transform: rotateX(180deg);
}

.flip-image-front, .flip-image-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-image-front {
  background-color: #bbb;
  color: black;

}

.flip-image-back {
	background-color: #2980b9;
	color: white;
	transform: rotatex(180deg);
}


#flippyImages{
	width: 800px; 
	height: 603px;
	text-align: center;
}

.secondImageContainer{
	width: 800px;
	height: 600px;
	margin: 0 auto;
	line-height: 30px;
	display: block;
	margin-top: 200px;
	margin-bottom: 200px;
	text-align: center;
}

#secondImage{
	width: 800px; 
	height: 600px;
}

.image-shake{
	height: 600px;
	width: 800px;
	cursor: pointer;
}

.image-shake:hover{
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.thirdImageContainer{
	width: 800px;
	height: 600px;
	margin: 0 auto;
	line-height: 30px;
	display: block;
	margin-top: 200px;
	margin-bottom: 200px;
	text-align: center;
}

.zoomRotate img {
  transition: transform .5s ease-in-out;
}

.zoomRotate:hover img {
  transform: scale(1.2) rotate(15deg);
}


#secondImage{
	width: 800px; 
	height: 600px;
}

.fourthImageContainer{
	background-color: none;
	width: 1200px;
	height: 500px;
	margin: 0 auto;
	line-height: 30px;
	display: block;
	margin-top: 200px;
	margin-bottom: 200px;
	text-align: center;
}


.myElement{
	background-color: none;
	text-decoration: none;
	color: rgba(255, 255, 255, 0);
	float: left;
	text-align: center;
	width: 100px;
	height:100px;
	transition: all 0.4s linear 0.1s;
	margin: 5px;
}

.myElement:hover {
	width: 750px;
	height: 450px;
	color: black;
}

.street{
	background-image: url('../images/street.jpg')
}

.city{
	background-image: url('../images/city.jpg')
}

.above{
	background-image: url('../images/above.jpg')
}


.space{
	background-image: url('../images/space.jpg')
}



.fifthImageContainer{
	background-color: none;
	width: 800px;
	height: 600px;
	margin: 0 auto;
	line-height: 30px;
	display: block;
	margin-top: 200px;
	margin-bottom: 200px;
	text-align: center;
}


.blurImage img {
  transition: transform 1s, filter 2s ease-in-out;
  filter: blur(3px);
  transform: scale(1.2);
}

/* The Transformation */
.blurImage:hover img {
  filter: blur(0);
  transform: scale(1);
}

.sixthImageContainer{
	background-color: none;
	width: 1200px;
	height: 500px;
	margin: 0 auto;
	line-height: 30px;
	display: block;
	margin-top: 200px;
	margin-bottom: 200px;
	text-align: center;
}

.paris{
	background-image: url('../images/paris.jpg')
}

.cairo{
	background-image: url('../images/cairo.jpg')
}

.moscow{
	background-image: url('../images/moscow.jpg')
}


.shanghai{
	background-image: url('../images/shanghai.jpg')
}


.myElement2{
	background-color: none;
	text-decoration: none;
	color: rgba(255, 255, 255, 0);
	float: left;
	text-align: center;
	width: 100px;
	height:100px;
	transition: all 0.4s linear 0.1s;
	margin: 5px;
}

.myElement2:hover {
	width: 660px;
	height: 490px;
	color: black;
}

.seventhImageContainer{
	background-color: none;
	width: 800px;
	height: 600px;
	margin: 0 auto;
	line-height: 30px;
	display: block;
	margin-top: 200px;
	margin-bottom: 300px;
	text-align: center;
}

.colorize img {
  transition: transform .5s, filter 1.5s ease-in-out;
  filter: grayscale(100%);
}

/* The Transformation */
.colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.1);
}


.zoom img {
  transition: transform .5s ease-in-out;
}

.zoom:hover img {
  transform: scale(1.5);
}


#logo {
	width: 100px;
	height: 100px;
	display: inline-block;
	position: fixed;
	margin: 0 auto;
	bottom: 20px ;
	right: 20px;
	z-index: 99; 
	cursor: pointer; 
	filter: grayscale(100%);	  
}

#logo:hover {
filter: grayscale(0%);
}

.fixed-box {
  position: fixed;
}

#box-scroll-values {
	visibility: hidden;
  	right: 15%;
  	bottom: 15%;
  	width: 200px;
  	height: 100px;
}