@charset "UTF-8";

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

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

/* Body Structure */
body {
  height: 100%;
  background-color: grey;
  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;
}

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

/* Page Structure */
div {
  margin: 100px auto;
  padding: 0px;
}

.sample1 {
  width: 300px;
  height: 300px;
  background-color: red;
  animation-name: sample1;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
  outline: 1px solid transparent;
}

@keyframes sample1 {
  from {opacity: 1;}
  to {opacity: 0;}
}

.sample2 {
  width: 300px;
  height: 300px;
  background-color: green;
  animation: tutsFade 4s 1s 4 linear alternate,
             tutsRotate 4s 1s 4 linear alternate;
  outline: 1px solid transparent;
}

@keyframes tutsFade {
  to {
    opacity: 25%;
  }
}

@keyframes tutsRotate {
  to {
    transform: rotate(180deg);
  }
}

.sample3 {
  width: 300px;
  height: 300px;
  background-color: yellow;
  animation: circle-to-square 2s linear 1s 5 alternate;
  outline: 1px solid transparent; 
}

@keyframes circle-to-square {
  0%  {
    border-radius:50%;
    background:yellow;
    transform:rotate(180deg);
  }
  25%  {
    border-radius:50% 50% 50% 0;
    background: orange;
    transform:rotate(135deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:green;
    transform:rotate(90deg);
  }
  75%  { 
    border-radius:50% 0 0 0;
    background:red;
    transform:rotate(45deg);
  }
  100% {  
    border-radius:0 0 0 0;
    background:blue;
    transform:rotate(0deg);
  }
}

.sample4 {
  width: 300px;
  height: 300px;
  background-color: coral;
  animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate;
  outline: 1px solid transparent;
}
 
@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

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