midterm.scss

/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ 

 * main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme 

 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 

==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


body {
  background-color: black;
}   

#body-wrapper {
  font-family: sans-serif; /* choose a better font */
  margin: 0 auto;
  max-width: 750px;
  text-align: center;
}

header {
  background: linear-gradient(#111,#1c0f3b);
  color: white;
  height: 50vh;
  min-height: auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
}

ul, ol {
  text-align: left;
  margin-left: 10%;
  margin-right: 10%;
}

.copy {
  padding: 10px 50px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  justify-content: space-around;
}

#subtle h3 {
  grid-row: 2/3;
  grid-column: 1/2;
}

#fireworks h3 {
  grid-row:2/3;
  grid-column:1/2;
}

.attribution {
  grid-row: -1/span1;
  opacity: .5;
  font-size: 9pt;
  margin: 0 5px;
}

.particle-container {
  overflow: hidden;
  height: 100%;
  grid-row: 1/4; 
  grid-column: 1/2;
  position: relative;
}

.particle-subtle {
  position: absolute;
  border-radius: 50%;
  margin: 15px;
  background: white;
}

.starburst {
  position: absolute;
  -webkit-transform-origin: center;
          transform-origin: center;
}

#starburst1 {
  left: 20px;
  -webkit-animation: burst1 3s ease-in infinite backwards;
          animation: burst1 3s ease-in infinite backwards;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

#starburst2 {
  left: 125px;
  -webkit-animation: burst2 3s ease-in infinite backwards;
          animation: burst2 3s ease-in infinite backwards;
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}

#starburst3 {
  left: 250px;
  -webkit-animation: burst3 3s ease-in infinite backwards;
          animation: burst3 3s ease-in infinite backwards;
  -webkit-animation-delay: 6.8s;
          animation-delay: 6.8s;
}

#starburst4 {
  left: 400px;
  -webkit-animation: burst4 3s ease-in infinite backwards;
          animation: burst4 3s ease-in infinite backwards;
  -webkit-animation-delay: 4.7s;
          animation-delay: 4.7s;
}

#starburst5 {
  left: 575px;
  -webkit-animation: burst5 3s ease-in infinite backwards;
          animation: burst5 3s ease-in infinite backwards;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}

@-webkit-keyframes burst1 {
  0%, 20% {
    -webkit-transform: rotate(-10deg) scale(1,0.8);
            transform: rotate(-10deg) scale(1,0.8);
    opacity:0;
    top: 50px;
  }
  25% {
    opacity:1;
  }
  50%{
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
    top: 50px;
  }
  75% {
    opacity:.5;
  }
  100% {
    opacity:0;
    -webkit-transform: rotate(10deg) scale(1, 0.3);
            transform: rotate(10deg) scale(1, 0.3);
    top: 250px;
  }
}

@keyframes burst1 {
  0%, 20% {
    -webkit-transform: rotate(-10deg) scale(1,0.8);
            transform: rotate(-10deg) scale(1,0.8);
    opacity:0;
    top: 50px;
  }
  25% {
    opacity:1;
  }
  50%{
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
    top: 50px;
  }
  75% {
    opacity:.5;
  }
  100% {
    opacity:0;
    -webkit-transform: rotate(10deg) scale(1, 0.3);
            transform: rotate(10deg) scale(1, 0.3);
    top: 250px;
  }
}

@-webkit-keyframes burst2 {
  0%, 20% {
    -webkit-transform: rotate(10deg) scale(1,0.8);
            transform: rotate(10deg) scale(1,0.8);
    opacity:0;
    top: 75px;
  }
  25% {
    opacity:1;
  }
  50%{
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
    top: 75px;
  }
  75% {
    opacity:.5;
  }
  100% {
    opacity:0;
    -webkit-transform: rotate(-10deg) scale(1, 0.3);
            transform: rotate(-10deg) scale(1, 0.3);
    top: 275px;
  }
}

@keyframes burst2 {
  0%, 20% {
    -webkit-transform: rotate(10deg) scale(1,0.8);
            transform: rotate(10deg) scale(1,0.8);
    opacity:0;
    top: 75px;
  }
  25% {
    opacity:1;
  }
  50%{
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
    top: 75px;
  }
  75% {
    opacity:.5;
  }
  100% {
    opacity:0;
    -webkit-transform: rotate(-10deg) scale(1, 0.3);
            transform: rotate(-10deg) scale(1, 0.3);
    top: 275px;
  }
}

@-webkit-keyframes burst3 {
  0%, 20% {
    -webkit-transform: rotate(-5deg) scale(1,0.8);
            transform: rotate(-5deg) scale(1,0.8);
    opacity:0;
    top: 75px;
  }
  25% {
    opacity:1;
  }
  50%{
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
    top: 75px;
  }
  75% {
    opacity:.5;
  }
  100% {
    opacity:0;
    -webkit-transform: rotate(15deg) scale(1, 0.3);
            transform: rotate(15deg) scale(1, 0.3);
    top: 275px;
  }
}

@keyframes burst3 {
  0%, 20% {
    -webkit-transform: rotate(-5deg) scale(1,0.8);
            transform: rotate(-5deg) scale(1,0.8);
    opacity:0;
    top: 75px;
  }
  25% {
    opacity:1;
  }
  50%{
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
    top: 75px;
  }
  75% {
    opacity:.5;
  }
  100% {
    opacity:0;
    -webkit-transform: rotate(15deg) scale(1, 0.3);
            transform: rotate(15deg) scale(1, 0.3);
    top: 275px;
  }
}

@-webkit-keyframes burst4 {
  0%, 20% {
    -webkit-transform: rotate(5deg) scale(1,0.8);
            transform: rotate(5deg) scale(1,0.8);
    opacity:0;
    top: 75px;
  }
  25% {
    opacity:1;
  }
  50%{
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
    top: 75px;
  }
  75% {
    opacity:.5;
  }
  100% {
    opacity:0;
    -webkit-transform: rotate(-15deg) scale(1, 0.3);
            transform: rotate(-15deg) scale(1, 0.3);
    top: 275px;
  }
}

@keyframes burst4 {
  0%, 20% {
    -webkit-transform: rotate(5deg) scale(1,0.8);
            transform: rotate(5deg) scale(1,0.8);
    opacity:0;
    top: 75px;
  }
  25% {
    opacity:1;
  }
  50%{
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
    top: 75px;
  }
  75% {
    opacity:.5;
  }
  100% {
    opacity:0;
    -webkit-transform: rotate(-15deg) scale(1, 0.3);
            transform: rotate(-15deg) scale(1, 0.3);
    top: 275px;
  }
}

@-webkit-keyframes burst5 {
  0%, 20% {
    -webkit-transform: rotate(-15deg) scale(1,0.8);
            transform: rotate(-15deg) scale(1,0.8);
    opacity:0;
    top: 75px;
  }
  25% {
    opacity:1;
  }
  50%{
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
    top: 75px;
  }
  75% {
    opacity:.5;
  }
  100% {
    opacity:0;
    -webkit-transform: rotate(5deg) scale(1, 0.3);
            transform: rotate(5deg) scale(1, 0.3);
    top: 275px;
  }
}

@keyframes burst5 {
  0%, 20% {
    -webkit-transform: rotate(-15deg) scale(1,0.8);
            transform: rotate(-15deg) scale(1,0.8);
    opacity:0;
    top: 75px;
  }
  25% {
    opacity:1;
  }
  50%{
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
    top: 75px;
  }
  75% {
    opacity:.5;
  }
  100% {
    opacity:0;
    -webkit-transform: rotate(5deg) scale(1, 0.3);
            transform: rotate(5deg) scale(1, 0.3);
    top: 275px;
  }
}

@-webkit-keyframes grow1 {
  0%, 20% {
    -webkit-transform-origin: center;
            transform-origin: center;
    top: 100px;
    left: 100px;
  }
  25% {
    -webkit-transform-origin: 25px 25px;
            transform-origin: 25px 25px;
    top: 75px;
    left: 75px;
  }
  75% {
    -webkit-transform-origin: 75px 75px;
            transform-origin: 75px 75px;
    top: 25px;
    left: 25px;
  }
  100% {
    -webkit-transform-origin: 100px 100px;
            transform-origin: 100px 100px;
    top: 0px;
    left: 0px;
  }
}

@keyframes grow1 {
  0%, 20% {
    -webkit-transform-origin: center;
            transform-origin: center;
    top: 100px;
    left: 100px;
  }
  25% {
    -webkit-transform-origin: 25px 25px;
            transform-origin: 25px 25px;
    top: 75px;
    left: 75px;
  }
  75% {
    -webkit-transform-origin: 75px 75px;
            transform-origin: 75px 75px;
    top: 25px;
    left: 25px;
  }
  100% {
    -webkit-transform-origin: 100px 100px;
            transform-origin: 100px 100px;
    top: 0px;
    left: 0px;
  }
}

@-webkit-keyframes grow2 {
  0%, 20% {
    -webkit-transform-origin: center;
            transform-origin: center;
    top: 100px;
    left: 100px;
  }
  25% {
    -webkit-transform-origin: 25px 25px;
            transform-origin: 25px 25px;
    top: 75px;
    left: 75px;
  }
  75% {
    -webkit-transform-origin: 75px 75px;
            transform-origin: 75px 75px;
    top: 25px;
    left: 25px;
  }
  100% {
    -webkit-transform-origin: 100px 100px;
            transform-origin: 100px 100px;
    top: 0px;
    left: 0px;
  }
}

@keyframes grow2 {
  0%, 20% {
    -webkit-transform-origin: center;
            transform-origin: center;
    top: 100px;
    left: 100px;
  }
  25% {
    -webkit-transform-origin: 25px 25px;
            transform-origin: 25px 25px;
    top: 75px;
    left: 75px;
  }
  75% {
    -webkit-transform-origin: 75px 75px;
            transform-origin: 75px 75px;
    top: 25px;
    left: 25px;
  }
  100% {
    -webkit-transform-origin: 100px 100px;
            transform-origin: 100px 100px;
    top: 0px;
    left: 0px;
  }
}

@-webkit-keyframes grow3 {
  0%, 20% {
    -webkit-transform-origin: center;
            transform-origin: center;
    top: 100px;
    left: 100px;
  }
  25% {
    -webkit-transform-origin: 25px 25px;
            transform-origin: 25px 25px;
    top: 75px;
    left: 75px;
  }
  75% {
    -webkit-transform-origin: 75px 75px;
            transform-origin: 75px 75px;
    top: 25px;
    left: 25px;
  }
  100% {
    -webkit-transform-origin: 100px 100px;
            transform-origin: 100px 100px;
    top: 0px;
    left: 0px;
  }
}

@keyframes grow3 {
  0%, 20% {
    -webkit-transform-origin: center;
            transform-origin: center;
    top: 100px;
    left: 100px;
  }
  25% {
    -webkit-transform-origin: 25px 25px;
            transform-origin: 25px 25px;
    top: 75px;
    left: 75px;
  }
  75% {
    -webkit-transform-origin: 75px 75px;
            transform-origin: 75px 75px;
    top: 25px;
    left: 25px;
  }
  100% {
    -webkit-transform-origin: 100px 100px;
            transform-origin: 100px 100px;
    top: 0px;
    left: 0px;
  }
}

@-webkit-keyframes grow4 {
  0%, 20% {
    -webkit-transform-origin: center;
            transform-origin: center;
    top: 100px;
    left: 100px;
  }
  25% {
    -webkit-transform-origin: 25px 25px;
            transform-origin: 25px 25px;
    top: 75px;
    left: 75px;
  }
  75% {
    -webkit-transform-origin: 75px 75px;
            transform-origin: 75px 75px;
    top: 25px;
    left: 25px;
  }
  100% {
    -webkit-transform-origin: 100px 100px;
            transform-origin: 100px 100px;
    top: 0px;
    left: 0px;
  }
}

@keyframes grow4 {
  0%, 20% {
    -webkit-transform-origin: center;
            transform-origin: center;
    top: 100px;
    left: 100px;
  }
  25% {
    -webkit-transform-origin: 25px 25px;
            transform-origin: 25px 25px;
    top: 75px;
    left: 75px;
  }
  75% {
    -webkit-transform-origin: 75px 75px;
            transform-origin: 75px 75px;
    top: 25px;
    left: 25px;
  }
  100% {
    -webkit-transform-origin: 100px 100px;
            transform-origin: 100px 100px;
    top: 0px;
    left: 0px;
  }
}

@-webkit-keyframes grow5 {
  0%, 20% {
    -webkit-transform-origin: center;
            transform-origin: center;
    top: 100px;
    left: 100px;
  }
  25% {
    -webkit-transform-origin: 25px 25px;
            transform-origin: 25px 25px;
    top: 75px;
    left: 75px;
  }
  75% {
    -webkit-transform-origin: 75px 75px;
            transform-origin: 75px 75px;
    top: 25px;
    left: 25px;
  }
  100% {
    -webkit-transform-origin: 100px 100px;
            transform-origin: 100px 100px;
    top: 0px;
    left: 0px;
  }
}

@keyframes grow5 {
  0%, 20% {
    -webkit-transform-origin: center;
            transform-origin: center;
    top: 100px;
    left: 100px;
  }
  25% {
    -webkit-transform-origin: 25px 25px;
            transform-origin: 25px 25px;
    top: 75px;
    left: 75px;
  }
  75% {
    -webkit-transform-origin: 75px 75px;
            transform-origin: 75px 75px;
    top: 25px;
    left: 25px;
  }
  100% {
    -webkit-transform-origin: 100px 100px;
            transform-origin: 100px 100px;
    top: 0px;
    left: 0px;
  }
}

#starburst1 .star-wrapper {
  position: absolute;
  -webkit-animation: 
  grow1 3s linear infinite backwards;
          animation: 
  grow1 3s linear infinite backwards;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

#starburst2 .star-wrapper {
  position: absolute;
  -webkit-animation: 
  grow2 3s linear infinite backwards;
          animation: 
  grow2 3s linear infinite backwards;
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}

#starburst3 .star-wrapper {
  position: absolute;
  -webkit-animation: 
  grow3 3s linear infinite backwards;
          animation: 
  grow3 3s linear infinite backwards;
  -webkit-animation-delay: 6.8s;
          animation-delay: 6.8s;
}

#starburst4 .star-wrapper {
  position: absolute;
  -webkit-animation: 
  grow4 3s linear infinite backwards;
          animation: 
  grow4 3s linear infinite backwards;
  -webkit-animation-delay: 4.7s;
          animation-delay: 4.7s;
}

#starburst5 .star-wrapper {
  position: absolute;
  -webkit-animation: 
  grow5 3s linear infinite backwards;
          animation: 
  grow5 3s linear infinite backwards;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}

@for $i from 1 through 10 {
  .rotate#{$i} {
    -webkit-transform: rotate(#{36*$i}deg);
            transform: rotate(#{36*$i}deg);
  }
}

$star-size: 6px;

#starburst1 .particle-star {
  background: magenta;
}

#starburst1 .particle-star:before {
  background:magenta;
}

#starburst2 .particle-star {
  background: orangered;
}

#starburst2 .particle-star:before {
  background:orangered;
}

#starburst3 .particle-star {
  background: yellow;
}

#starburst3 .particle-star:before {
  background:yellow;
}

#starburst4 .particle-star {
  background: cyan;
}

#starburst4 .particle-star:before {
  background:cyan;
}

#starburst5 .particle-star {
  background: lime;
}

#starburst5 .particle-star:before {
  background:lime;
}

.particle-star {
  opacity: 1;
  width: $star-size;
  height: $star-size;
  position: absolute;
  text-align: center;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}
.particle-star:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: $star-size;
  width: $star-size;
  opacity: 1;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

@-webkit-keyframes blur_fade {
  0% {
    height: 2px;
    width: 2px;
    opacity: 0;
  }
  20% {
    -webkit-filter: blur(0.2);
            filter: blur(0.2);
    opacity: 0.3;
  }
  100% {
    height: 40px;
    width: 40px;
    -webkit-filter: blur(3px);
            filter: blur(3px);
    opacity: 0;
  }
}

@keyframes blur_fade {
  0% {
    height: 2px;
    width: 2px;
    opacity: 0;
  }
  20% {
    -webkit-filter: blur(0.2);
            filter: blur(0.2);
    opacity: 0.3;
  }
  100% {
    height: 40px;
    width: 40px;
    -webkit-filter: blur(3px);
            filter: blur(3px);
    opacity: 0;
  }
}

@-webkit-keyframes circle {
  0% {
    -webkit-transform-origin: -10px -10px;
            transform-origin: -10px -10px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: -10px -10px;
            transform-origin: -10px -10px;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes circle {
  0% {
    -webkit-transform-origin: -10px -10px;
            transform-origin: -10px -10px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: -10px -10px;
            transform-origin: -10px -10px;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@for $i from 1 through 30 {
  .particle-subtle:nth-child(#{$i}) {
    top: random($limit: 8)*50px;
    left: random($limit: 14)*50px;
    -webkit-animation: 
      blur_fade 20s ease infinite alternate, 
      circle random($limit: 6)+4s linear infinite;
            animation: 
      blur_fade 20s ease infinite alternate, 
      circle random($limit: 6)+4s linear infinite;
    -webkit-animation-delay: random($limit: 16)-1s, random($limit: 5)-1s;
            animation-delay: random($limit: 16)-1s, random($limit: 5)-1s;
  }
}


#subtle {
  background: -webkit-gradient(linear, left top, left bottom, from(#1c0f3b), color-stop(#4d1354), to(#1c0f3b));
  background: linear-gradient(#1c0f3b, #4d1354, #1c0f3b, #1a1819);
  color: white;
  height: 50vh;
  min-height: 400px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto 1fr;
}

#fireworks {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/15/Sandiego_skyline_at_night.JPG");
  background-size: cover;
  color: white;
  height: 50vh;
  min-height: 400px;
  display: grid;
  grid-template-rows: 1fr auto 2fr auto;
  grid-template-columns: 1fr;
}

#info1 {
  background-color: lemonchiffon;
}

#info2 {
  background-color: aliceblue;
}

#info3 {
  background-color: pink;
}