@charset "UTF-8";

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

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

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

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

h1 {
  font-size: ;
}

h2 {
  text-align: center;
}

h3 {
  font-size: ;
}

/* Header */
#header {
  background-color: maroon;
  color: bisque;
  padding: 50px;
}

/* Navigation */

/* Page Structure */
section {
  display: flex;
  flex-direction: row;
  margin: 2em;
  padding: 1em;
}

.scene {
  width:12em;
  height:12em;
  margin:3em;
  border:3px solid #ccc;
  
  /* This is important! for z-axis effects */
  perspective: 10em;
}

/* Translate Section */
.square {
  width:100%;
  height:100%;
  background-color: purple;
  line-height:10em;
  text-align:center;
  color:#FFF;
}

.square.x-axis {
  animation: x-axis-translate 1s ease-in-out 0s infinite alternate;
}

.square.y-axis {
  animation: y-axis-translate 1s ease-in-out 0s infinite alternate;
}

.square.z-axis {
  animation: z-axis-translate 1s ease-in-out 0s infinite alternate;
}

@keyframes x-axis-translate {
  from {transform: translateX(2em)}
  to {transform: translateX(-2em)}
}

@keyframes y-axis-translate {
  from {transform: translateY(2em)}
  to {transform: translateY(-2em)}
}

@keyframes z-axis-translate {
  from {transform: translateZ(2em)}
  to {transform: translateZ(-2em)}
}

/* Rotate Section */
.square1 {
  width:100%;
  height:100%;
  background-color: blue;
  line-height:10em;
  text-align:center;
  color:#FFF;
}

.square1.x-axis {
  animation: x-axis-rotate 1s ease-in-out 0s infinite alternate;
}

.square1.y-axis {
  animation: y-axis-rotate 1s ease-in-out 0s infinite alternate;
}

.square1.z-axis {
  animation: z-axis-rotate 1s ease-in-out 0s infinite alternate;
}

@keyframes x-axis-rotate {
  from {transform: rotateX(20deg)}
  to {transform: rotateX(-20deg)}
}

@keyframes y-axis-rotate {
  from {transform: rotateY(20deg)}
  to {transform: rotateY(-20deg)}
}

@keyframes z-axis-rotate {
  from {transform: rotateZ(20deg)}
  to {transform: rotateZ(-20deg)}
}

/* Perspective Section */
.square2 {
  width:100%;
  height:100%;
  background-color:red;
  line-height:10em;
  text-align:center;
  color:#FFF;
}

.square2 + .square2 {
  margin-left:5%;
}

.far-right {
  perspective-origin: 100% 50%;
}

.far-left {
  perspective-origin: -100% 50%;
}

.x-axis {
  animation: y-axis-perspective 1s ease-in-out 0s infinite alternate;
}

@keyframes y-axis-perspective {
  from {transform: rotateY(20deg);}
  to {transform: rotateY(-20deg);}
}

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