/***********************************PAGE STYLES***********************************/

html,
body {
  height: 100%;
}

body {
  background-color: #5f9ea0;
  margin-top: 2%;
  padding: 0;
}

main {
  font-family: "Lato", sans-serif;
  color: #f5f5f5;
  margin-top: 5%;
}

p {
  line-height: 1.5;
}

a {
  color: #f5f5f5;
}

a:hover {
  color: #014242;
}

.inner-container {
  max-width: 1080px;
  margin: 0 auto;
}

.title {
  overflow: hidden;
}

h1 {
  font-family: "Permanent Marker", cursive;
  font-size: 6em;
  margin-left: 12%;
  margin-top: 0;
  margin-bottom: 1%;
  color: #f5f5f5;
  animation-duration: 6s;
  animation-name: title;
}

@keyframes title {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 900%;
    margin-left: 12%;
    width: 200%;
  }

  to {
    margin-left: 12%;
    width: 100%;
  }
}

.subtitle {
  overflow: hidden;
}

.subtitle p {
  font-family: "Lato", sans-serif;
  font-size: 2em;
  margin-left: 12%;
  margin-top: 0;
  margin-bottom: 5%;
  color: #f5f5f5;
  animation-duration: 6s;
  animation-name: subtitle;
}

@keyframes subtitle {
  from {
    margin-left: -300%;
    width: 300%;
  }

  75% {
    font-size: 100%;
    margin-left: 12%;
    width: 200%;
  }

  to {
    margin-right: 100%;
    width: 100%;
  }
}

.underline {
  overflow: hidden;
  color: #f5f5f5;
  border-bottom: 5px dotted;
  animation-duration: 6s;
  animation-name: pagebreak;
}

@keyframes pagebreak {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0;
    width: 100%;
  }
}

h2 {
  padding-bottom: 0.5em;
  border-bottom: 2px dotted;
}

.fade {
  animation-duration: 6s;
  animation-name: fadein;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.row-text {
  display: flex;
  flex-direction: row;
  margin-top: 4.75em;
}

.row-text p {
  flex-basis: 48%;
  margin-right: auto;
}

.columns {
  flex-basis: 48%;
  margin-right: auto;
}

span {
  font-weight: 900;
}

footer {
  margin-top: 5%;
  padding: 1em;
  border-top: 5px dotted #f5f5f5;
  font-family: "Permanent Marker", cursive;
  font-size: 1.5em;
  color: #f5f5f5;
}

.footer-content {
  display: flex;
  justify-content: space-between;
}


/**************************************INTRO**************************************/

.intro {
  display: flex;
  flex-direction: row;
}

.intro p {
  max-width: 45ch;
  font-size: 1.5em;
  margin-bottom: 4em;
}

.top-wrap {
  flex-basis: 50%;
}

.circle-svg {
  width: 100%;
  height: 100%;
  padding-left: 10%;
}

.circle {
  transform: rotate(0);
  transform-origin: center;
  animation-name: circle;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes circle {
  0% {
    transform: rotate(0);
    fill: #f5f5f5;
  }

  30% {
    fill: #f2c57c;
  }

  50% {
    fill: #f8333c;
  }

  75% {
    fill: #f2c57c;
  }

  100% {
    transform: rotate(360deg);
    fill: #f5f5f5;
  }
}


/***************************MISCELLANEOUS EXAMPLE STYLES**************************/

.general-examples {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 3em;
  margin-bottom: 6em;
}

.one-box {
  width: 20em;
  height: 20em;
  margin-right: 2.3em;
  background-color: #4b8b4e;
  border: 3px dotted #f5f5f5;
  animation: demo1 5s infinite;
}

.one-box p {
  text-align: center;
  margin-top: 1em;
  font-weight: bold;
}

@keyframes demo1 {
  50% {
    background-color: #28536b;
    font-size: 2em;
    font-family: cursive;
    letter-spacing: 0.35em;
    border-right-color: #f2c57c;
    border-bottom-color: #f2c57c;
  }
}

.two-box {
  width: 20em;
  height: 20em;
  margin-right: 2.3em;
  background-color: #a05f7e;
  animation: demo2 6s infinite;
}

.four-box {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: #28536b;
  position: relative;
  left: 20%;
  top: 5%;
  animation: ball 6s ease-in infinite;
}

@keyframes ball {
  50% {
    left: 60%;
    top: 50%;
  }
}

.two-box p {
  text-align: center;
  margin-top: 1em;
  font-weight: bold;
}

@keyframes demo2 {
  50% {
    color: #fa04d9;
    border-top-left-radius: 150px;
    border-bottom-right-radius: 150px;
  }
}

.three-box {
  width: 20em;
  height: 20em;
  background-color: #605fa0;
  animation: demo3 7s infinite;
}

.three-box p {
  text-align: center;
  margin-top: 1em;
  font-weight: bold;
}

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@keyframes flexgrow {
  50% {
    flex-grow: 8;
  }
}

.five-box {
  width: 3em;
  height: 3em;
  background-color: #424653;
  flex-grow: 1;
}

.six-box {
  width: 3em;
  height: 3em;
  background-color: #f8333c;
  flex-grow: 1;
  animation: flexgrow 7s infinite;
}

.seven-box {
  width: 3em;
  height: 3em;
  background-color: #c8ff00;
  flex-grow: 1;
}

@keyframes demo3 {
  50% {
    box-shadow: 10px 20px 30px #f5f5f5;
    text-shadow: 2px 4px 6px #f2c57c;
  }
}

.caption {
    display: flex;
    flex-direction: column;
    flex-basis: 33%;
}


/********************************SVG EXAMPLE STYLES*******************************/

.skull {
  transform: rotate(0);
  transform-origin: center;
  animation-name: spin;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.boo-letter-1 {
  animation-duration: 3s;
  animation-delay: 4.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-name: letterpop;
}

.boo-letter-2 {
  animation: letterpop 3s alternate infinite;
  animation-delay: 4.6s;
}

.boo-letter-3 {
  animation: letterpop 3s alternate infinite;
  animation-delay: 4.7s;
}

.boo-letter-4 {
  animation: letterpop 3s alternate infinite;
  animation-delay: 4.8s;
}

.boo-letter-5 {
  animation: letterpop 3s alternate infinite;
  animation-delay: 4.9s;
}

@keyframes letterpop {
  90% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

.skeleton {
  transform: translateY(275px);
  animation-name: boo;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

@keyframes boo {
  0% {
    transform: translateY(275px);
  }

  34% {
    transform: translateY(20px);
  }

  37% {
    transform: translateY(275px);
  }

  100% {
    transform: translateY(275px);
  }
}

.svg-example {
  display: flex;
  align-items: center;
}

.skull-wrap {
  flex-basis: 50%;
}

.skull-svg {
  width: 55%;
  height: 55%;
  padding-left: 25%;
}

.eye-wrap {
  flex-basis: 50%;
}

.eye-svg {
  width: 55%;
  height: 55%;
  padding-left: 20%;
}

.eye-svg path {
  animation-name: evil;
  animation-duration: 1s;
  animation-delay: 5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

@keyframes evil {
  0% {
    d: path(
      "M45.1,92.71c-7.16,4.49-13.24,6-21.51,5.37-4.27-.34-8.65-1.6-9.37-2.7a2.52,2.52,0,0,0-1.39-.8C10,93.93,7.65,85.41,9,80.64c.42-1.48.46-3.19.08-3.79a14.9,14.9,0,0,1-.8-5.06c-.1-3.65-.28-4-2.21-4.25C2.51,67.07,2.64,64.61,2.37,61,3.2,56.53.85,53.77.32,49.27-1,44,1.93,34.78,4.26,34.44c1.64-2.8,1.53-4.91,2.41-8.59C9.94,10.08,22.08,1.31,37.29,0c4.87-.4,21.55,3,27.57,5.54A39,39,0,0,1,79.2,17.18c5.86,8.51,4.83,16.73,2.23,27.66-3.37,14.24-4.39,16-12.18,20.88-9.61,6-10.75,7.47-12.61,15.71C54.4,87.12,51.74,88.72,45.1,92.71Zm9.64-16.66c1.7-7.14,4.52-12.14,8.9-15.77,3.14-2.62,4-3,4.66-1.94.52.82-.32,2.32-2.36,4.24l-3.15,3,4.37-2.33a30.76,30.76,0,0,0,5.93-4c2.3-2.4,7.23-21,7.49-28.24.2-5.68-.11-6.74-3.61-12.3-2.74-4.36-2.4-3.87-6.14-6.77s-17.67-7-27.46-8C27,2.65,16.77,8.39,10.29,22.41,8.78,25.69,8,33.1,6.73,35,4.15,39.09,3.58,40.38,3,44.69a23,23,0,0,0-.45,4.67c.12,4.19,3.2,8,2.38,12.12C5,63.93,3.47,64,7.73,65l4.68,1.15L11.47,69a10.27,10.27,0,0,0,.29,5.93c1.09,2.85,1.46,3,1.88,1.18.63-2.81,2.95-2.34,2.62.22-.29,2.14,1.28,1.73,1.79-.5.63-2.76,3.3-2,2.81.84-1,2.91,1.63,1.86,1.69-.14.44-2.57,3.29-2,3.21.68.88,2.64,2.38,1.12,2-.48s2.65-3,2.95.26c.38,2.34,1.79,1.61,1.93-.14a1.39,1.39,0,0,1,2.71-.62c.44,2.49,2.17,1.95,2-.28s2.75-3,2.88-.77c.1,1.9,3.65-1.64,7.85-7,4-5.08,4.11-5.16,6.84-4.68,3.21.57,3.38,3,.23,3.15-1.38.07-2.92,1.36-5.12,4.28a29.41,29.41,0,0,1-6.11,6c-2.06,1.29-4.08,3.1-3.52,4,.55,2.37-1.93,3.82-2.54,1.46-1-2.11-2-1.7-1.84.39.49,3-2.94,3.13-3.1.19-.58-2-1.91-1.56-1.86.17.12,3.36-2.86,3.85-3.24.59-.34-2.9-2-2.37-2.25,0-.16,3-3,2.32-3.12-.37.11-3-1.93-2.52-2.16,0-.65,2.38-2.48,2.66-3,.33,1-2-1.53-5-1.86-1.46-.09,1.26-.77,2.3-1.5,2.3-.93,0-1.2-.75-.88-2.51.26-1.51,0-2.28-.55-1.9-1.56,1-1.05,8,.8,10.92,1.38,2.21,2.94,2.87,8.72,3.72,8.62,1.27,11.69.58,21.82-4.91C52.51,85.17,52.61,85,54.74,76.05ZM43.32,60a55,55,0,0,1-7.09-.88c-4.42-.85-5.17-1.82-10.09-13-1.92-4.35-1.89-4.74.49-6.58,4.27-3.3,8.64-2.88,17.27,1.63,4.37,2.29,5.76,3.77,7,5.43a5.93,5.93,0,0,1,1.19,5.64C50.81,57.74,48.11,60.12,43.32,60ZM23,65.85a5.21,5.21,0,0,0-3.35.33c-3.25,2-5.46-3.88-3.45-9.24s4.32-5.09,7.89.59C28.21,64.08,27.83,67,23,65.85ZM7.78,54.45c-3-1.68-4.21-2.16-4.1-7.46.21-10.64,9.2-10.53,14.28-5.54,1.59,1.56,1.72,2.64.73,5.75C17,52.37,11.13,56.3,7.78,54.45Z"
    );
  }

  100% {
    d: path(
      "M45.1,92.71c-7.16,4.49-13.24,6-21.51,5.37-4.27-.34-8.65-1.6-9.37-2.7a2.52,2.52,0,0,0-1.39-.8C10,93.93,7.65,85.41,9,80.64c.42-1.48.46-3.19.08-3.79a14.9,14.9,0,0,1-.8-5.06c-.1-3.65-.28-4-2.21-4.25C2.51,67.07,2.64,64.61,2.37,61,3.2,56.53.85,53.77.32,49.27-1,44,1.93,34.78,4.26,34.44c1.64-2.8,1.53-4.91,2.41-8.59C9.94,10.08,22.08,1.31,37.29,0c4.87-.4,21.55,3,27.57,5.54A39,39,0,0,1,79.2,17.18c5.86,8.51,4.83,16.73,2.23,27.66-3.37,14.24-4.39,16-12.18,20.88-9.61,6-10.75,7.47-12.61,15.71C54.4,87.12,51.74,88.72,45.1,92.71Zm9.64-16.66c1.7-7.14,4.52-12.14,8.9-15.77,3.14-2.62,4-3,4.66-1.94.52.82-.32,2.32-2.36,4.24l-3.15,3,4.37-2.33a30.76,30.76,0,0,0,5.93-4c2.3-2.4,7.23-21,7.49-28.24.2-5.68-.11-6.74-3.61-12.3-2.74-4.36-2.4-3.87-6.14-6.77s-17.67-7-27.46-8C27,2.65,16.77,8.39,10.29,22.41,8.78,25.69,8,33.1,6.73,35,4.15,39.09,3.58,40.38,3,44.69a23,23,0,0,0-.45,4.67c.12,4.19,3.2,8,2.38,12.12C5,63.93,3.47,64,7.73,65l4.68,1.15L11.47,69a10.27,10.27,0,0,0,.29,5.93c1.09,2.85,1.46,3,1.88,1.18.63-2.81,2.95-2.34,2.62.22-.29,2.14,1.28,1.73,1.79-.5.63-2.76,3.3-2,2.81.84-1,2.91,1.63,1.86,1.69-.14.44-2.57,3.29-2,3.21.68.88,2.64,2.38,1.12,2-.48s2.65-3,2.95.26c.38,2.34,1.79,1.61,1.93-.14a1.39,1.39,0,0,1,2.71-.62c.44,2.49,2.17,1.95,2-.28s2.75-3,2.88-.77c.1,1.9,3.65-1.64,7.85-7,4-5.08,4.11-5.16,6.84-4.68,3.21.57,3.38,3,.23,3.15-1.38.07-2.92,1.36-5.12,4.28a29.41,29.41,0,0,1-6.11,6c-2.06,1.29-4.08,3.1-3.52,4,.55,2.37-1.93,3.82-2.54,1.46-1-2.11-2-1.7-1.84.39.49,3-2.94,3.13-3.1.19-.58-2-1.91-1.56-1.86.17.12,3.36-2.86,3.85-3.24.59-.34-2.9-2-2.37-2.25,0-.16,3-3,2.32-3.12-.37.11-3-1.93-2.52-2.16,0-.65,2.38-2.48,2.66-3,.33,1-2-1.53-5-1.86-1.46-.09,1.26-.77,2.3-1.5,2.3-.93,0-1.2-.75-.88-2.51.26-1.51,0-2.28-.55-1.9-1.56,1-1.05,8,.8,10.92,1.38,2.21,2.94,2.87,8.72,3.72,8.62,1.27,11.69.58,21.82-4.91C52.51,85.17,52.61,85,54.74,76.05ZM43.32,60a55,55,0,0,1-7.09-.88c-4.42-.85-5.17-1.82-10.09-13-1.92-4.35-1.89-4.74.49-6.58,4.27-3.3,21.24-20.72,29.86-16.21,4.37,2.29-.56,16.61-1.12,19.85-1.71,6.85-1.47,7.56-3,10.14C49.31,58.71,48.11,60.12,43.32,60ZM23,65.85a5.21,5.21,0,0,0-3.35.33c-3.25,2-5.46-3.88-3.45-9.24s4.32-5.09,7.89.59C28.21,64.08,27.83,67,23,65.85ZM7.78,54.45c-3-1.68-4.21-2.16-4.1-7.46.21-10.64,11.19-26.22,12.69-19.25,2.39,11.12,3.31,16.35,2.32,19.46C17,52.37,11.13,56.3,7.78,54.45Z"
    );
  }
}

.boo-wrap {
  flex-basis: 50%;
}

.boo-svg {
  width: 100%;
  height: 100%;
  padding-left: 15%;
}

.svg-text {
  flex-basis: 48%;
  margin-right: 2%;
}


/*****************************CLIP-PATH EXAMPLE STYLES****************************/

.clip-examples {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 3em;
  margin-bottom: 6em;
}

.new-shape {
  background-color: #f8333c;
  width: 18em;
  height: 18em;
  clip-path: polygon(0 0, 0 0, 0 0);
  animation: mask 3s alternate infinite;
  margin-right: 6em;
}

.new-shape p {
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  padding-left: 4em;
  padding-top: 11em;
}

@keyframes mask {
  0% {
    clip-path: polygon(30% 17%, 43% 43%, 17% 43%);
  }

  100% {
    clip-path: polygon(60% 35%, 85% 85%, 35% 85%);
  }
}

.star-svg {
  width: 100%;
  height: 100%;
}

#starFill circle {
  animation: starwipe 3s alternate infinite;
}

@keyframes starwipe {
  0% {
    r: 0;
  }

  100% {
    r: 20px;
  }
}

.picture-transition {
  background-image: url(../img/spring.jpg);
  background-repeat: no-repeat;
  background-position: center;
  height: 234px;
  width: 300px;
  clip-path: inset(0% round 0%);
  animation: boxwipe 10s infinite;
}

.winter {
  background-image: url(../img/winter.jpg);
  background-repeat: no-repeat;
  background-position: center;
  height: 234px;
  width: 300px;
  margin-left: 6em;
}

@keyframes boxwipe {
  0% {
    clip-path: inset(0% round 0%);
  }

  50% {
    clip-path: inset(50% round 50%);
  }

  100% {
    clip-path: inset(0% round 0%);
  }
}


/****************************TRANSITIONS EXAMPLE STYLES***************************/

.transition-examples {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1em;
  margin-bottom: 6em;
}

.change-size {
  width: 12em;
  height: 12em;
  background-color: #4b8b4e;
  transition: width 1.5s;
  transition-timing-function: linear;
  margin-right: 1em;
  margin-bottom: 1em;
}

.change-size:hover {
  width: 27em;
  cursor: pointer;
}

.change-size p {
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  padding-top: 4.5em;
}

.change-shape {
  width: 12em;
  height: 12em;
  border-radius: 0;
  background-color: #f2c57c;
  transition: border-radius 2s;
  margin-right: 1em;
  margin-bottom: 1em;
}

.change-shape p {
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  padding-top: 4.5em;
}

.change-shape:hover {
  border-radius: 50%;
  cursor: pointer;
}

.change-color {
  width: 12em;
  height: 12em;
  background-color: #a05f7e;
  transition: background-color 2s;
  margin-right: 1em;
  margin-bottom: 1em;
}

.change-color p {
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  padding-top: 4.5em;
}

.change-color:hover {
  background-color: #fa04d9;
  cursor: pointer;
}

.change-x {
  width: 12em;
  height: 12em;
  background-color: #605fa0;
  transform: rotateX(0);
  transition: transform 2s;
  margin-right: 1em;
  margin-bottom: 1em;
}

.change-x:hover {
  transform: rotateX(360deg);
  cursor: pointer;
}

.change-x p {
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  padding-top: 4.5em;
}

.change-y {
  width: 12em;
  height: 12em;
  background-color: #424653;
  transform: rotateY(0);
  transition: transform 2s;
  margin-right: 1em;
  margin-bottom: 1em;
}

.change-y:hover {
  transform: rotateY(360deg);
  cursor: pointer;
}

.change-y p {
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  padding-top: 4.5em;
}

.change-z {
  width: 12em;
  height: 12em;
  background-color: #372772;
  transform: rotateZ(0);
  transition: transform 2s;
  margin-right: 1em;
  margin-bottom: 1em;
}

.change-z:hover {
  transform: rotateZ(360deg);
  cursor: pointer;
}

.change-z p {
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  padding-top: 4.5em;
}

.change-multiple {
  width: 12em;
  height: 12em;
  background-color: #28536b;
  transition: width 2.5s, height 2.5s;
  margin-right: 1em;
  margin-bottom: 1em;
}

.change-multiple:hover {
  width: 8em;
  height: 8em;
  cursor: pointer;
}

.change-multiple p {
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  padding-top: 4.5em;
}

.change-multiple-two {
  width: 12em;
  height: 12em;
  transform: translateY(0);
  border-radius: 0;
  background-color: #f8333c;
  transition: background-color 3s, width 4.5s, height 4.5s;
  margin-right: 1em;
  margin-bottom: 1em;
}

.change-multiple-two p {
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  padding-top: 4.5em;
}

.change-multiple-two:hover {
  width: 14em;
  height: 14em;
  background-color: #c8ff00;
  cursor: pointer;
}

.change-multiple-three {
  width: 12em;
  height: 12em;
  border-radius: 0;
  transform: rotateZ(0);
  background-color: #423b0b;
  transition: border-radius 2.5s, transform 3s, width 4.5s, height 4.5s;
  margin-bottom: 1em;
}

.change-multiple-three p {
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  padding-top: 4.5em;
}

.change-multiple-three:hover {
  width: 8em;
  height: 8em;
  transform: rotateZ(360deg);
  border-radius: 50%;
  cursor: pointer;
}

.instructions {
  font-weight: 900;
  margin-top: 2em;
  margin-bottom: 0;
}