@charset "UTF-8";

/* Global Styles */
* {
  box-sizing: border-box;
}

article, aside, footer, header, main, nav, section {
  display: block;
}

/* Body Structure */
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: green;
  text-align: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Condensed', Helvetica, 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  font-size: 1.5em;
  font-weight: normal;
  margin: 0 0 0.5em 0;
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
}

/* Header */
#header {
  background-color: navy;
  color: white;
  padding: 50px;
}

/* Page Structure */
.geeks1 {
  font-size: 25px;
  margin: 20px 0;
  margin-left: 100px;
}

.img1 {
  border: 1px solid black;
  transition-duration: 2s;
  -webkit-transition-duration: 2s;
}

.img1:hover {
  transform: translate(100px, 100px);
  -ms-transform: translate(100px, 100px);
  -webkit-transform: translate(100px, 100px);
}

.geeks2 {
  font-size: 25px;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 50px;
}

.img2 {
  border: 1px solid black;
  margin-bottom: 100px;
}

.img2:hover {
  transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
}

.geeks3 {
  font-size: 25px;
  text-align: center;
  margin-top: px;
  margin-bottom: 50px;
}

.img3 {
  border: 1px solid black;
  margin-bottom: 100px;
}

.img3:hover {
  transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
}

.geeks4 {
  font-size: 25px;
  text-align: center;
  margin-bottom: 100px;
}

.img4 {
  border: 1px solid black;
  margin-bottom: 50px;
}

.img4:hover {
  transform: scale(1, 2);
  -ms-transform: scale(1, 2);
  -webkit-transform: scale(1, 2);
}

.geeks5 {
  font-size: 25px;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 50px;
}

.img5 {
  border: 1px solid black;
  margin-bottom: 50px;
}

.img5:hover {
  transform: skewX(30deg);
  -ms-transform: skewX(30deg);
  -webkit-transform: skewX(30deg);
}

.geeks6 {
  font-size: 25px;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 50px;
}

.img6 {
  border: 1px solid black;
  margin-bottom: 50px;
}

.img6:hover {
  transform: skewY(30deg);
  -ms-transform: skewY(30deg);
  -webkit-transform: skewY(30deg);
}

.geeks7 {
  font-size: 25px;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 50px;
}

.img7 {
  border: 1px solid black;
  margin-bottom: px;
}

.img7:hover {
  transform: skew(30deg, 20deg);
  -ms-transform: skew(30deg, 20deg);
  -webkit-transform: skew(30deg, 20deg);
}

.geeks8 {
  font-size: 25px;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 50px;
}

.img8 {
  border: 1px solid black;
  margin-bottom: 100px;
}

.img8:hover {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
}


/* Footer */
footer {
  background-color: navy;
  color: white;
  height: 80px;
  padding: 10px;
}