cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="wrapper">
  <div class="box one" >
    <div></div>
    <div></div>
    <div class="number">1</div>
    <span>Cygni</span>
  </div>
  <div class="box two">
    <div></div>
    <div></div>
    <div class="number">2</div>
    <span>Persei</span>
  </div>
  <div class="box three">
    <div></div>
    <div></div>
    <div class="number">3</div>
    <span>Canum Venaticorum</span>
  </div>
  <div class="box four">
    <div></div>
    <div></div>
    <div class="number">4</div>
    <span>Scorpii</span>
  </div>
  <div class="box five">
    <div></div>
    <div></div>
    <div class="number">5</div>
    <span>Delphini</span>
  </div>
  <div class="box six">
    <div></div>
    <div></div>
    <div></div>
    <div class="number">6</div>
    <span>Andromeda</span>
  </div>
  <div class="box seven">
    <div></div>
    <div class="large-star">
      <span></span>
      <span></span>
    </div>
    <div class="number">7</div>
    <span>Orionis</span>
  </div>
  <div class="box eight">
    <div></div>
    <div></div>
    <div></div>
    <div class="number">8</div>
    <span>Cassiopeia</span>
  </div>
  <div class="box nine">
    <div></div>
    <div></div>
    <div class="number">9</div>
    <span>Herculis</span>
  </div>
  <div class="box ten">
    <div></div>
    <div></div>
    <div class="number">10</div>
    <span>Bo&oumltis</span>
  </div>
  <div class="box eleven">
    <div></div>
    <div class="large-star">
      <span></span>
      <span></span>
    </div>
    <div class="number">11</div>
    <span>Scorpii</span>
  </div>
  <div class="box twelve">
    <div></div>
    <div></div>
    <div class="number">12</div>
    <span>Bo&oumltis</span>
  </div>
  <div class="key">
  <h4>Plate XI. <span>Coloured Multiple Stars</span></h4>
  <p>1. &#946 Cygni 2. &#951 Persei 3. &#945 Canum Venaticorum. 4. &#946 Scorpii. 5. &#121 Delphini. 6. &#121 Andromeda. 7. &#946 Orionis. <br> 8. &#953 Cassiopeia. 9. &#945 Herculis. 10. &#949 Bo&oumltis. 11. &#945 Scorpii. 12. &#958 Bo&oumltis.</p>
  <p>N.B. For technical reasons the apparent diameters of the discs and diffraction rings of the brightest stars, and also their colours, are exaggerated considerably.</p>
</div>
</div>

            
          
!
            
              $background-font: #fefde9;
$box-key: #3a3c3c;
$orange: #db9a46;
$blue: #7fbfbd;
$red: #c4312a;
$yellow: #e8d854;
$green: #9cc55e;
$white: #f2f4df;

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: $background-font;
  display: grid;
  justify-items: center;
}

#wrapper {
  color: $background-font;
  font-size: 18px;
  padding-top: 5%;
  display: grid;
  grid-template-columns:  300px 300px 300px;
  grid-column-gap: 3px;
  grid-row-gap: 3px;  
}

.box {
  background-color: $box-key;
  height: 300px;
  width: 300px;
  display: grid;
  z-index: 1;
}

.box .number  {
  height: 20px;
  margin-left: 7px;
  margin-bottom: 5px; 
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}

.box span {
  font-family: 'Playball', cursive;
  font-size: 50px;
  display: none;
  animation: star-name 0.7s ease-in-out;
  animation-iteration-count: 1;
  animation-play-state: paused; 
}

.box:hover > span {
  animation-play-state: running;

}

.large-star span {
  display: grid;
}

/* Box One */

.one {
  grid-template-columns: 1fr 4fr 1.2fr;
  grid-template-rows: 1fr 0.8fr 1fr;
}

.one div:nth-child(1) {
  height: 30px;
  width: 30px;
  background-color: $orange;
  border-radius: 50%;
  grid-column: 2;
  align-self: center;
  position: relative;
  border: 4px solid $box-key;
}

.one div:nth-child(1):before {
  content: '';
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-image: linear-gradient(-40deg, $orange, $box-key, $orange, $box-key);
  border: 4px solid $box-key;
  z-index: -1;
  bottom: -9px;
  left: -9px; 
  animation: one-first-before 0.5s linear infinite;
  animation-play-state: paused;
}

.one:hover > div:nth-child(1):before {
  animation-play-state: running;
}

.one div:nth-child(1):after {
  content: '';
  position: absolute;
  height: 51px;
  width: 51px;
  border-radius: 50%;
  background-image: linear-gradient(40deg, $box-key, $orange, $box-key, $orange, $box-key, $orange, $box-key);
  z-index: -2;
  bottom: -10px;
  left: -10px;
  opacity: 0.3;
  animation: one-first-after 0.5s linear infinite;
  animation-play-state: paused;
}

.one:hover > div:nth-child(1):after {
  animation-play-state: running;
}

.one div:nth-child(2) {
  height: 20px;
  width: 20px;
  background-color: $blue;
  border-radius: 50%;
  grid-column: 3;
  grid-row: 3;
  align-self: center;
  margin-top: 5px;
  position: relative;
  border: 4px solid $box-key;
}


.one div:nth-child(2):before {
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-image: linear-gradient(40deg, $blue, $box-key, $blue, $box-key, $blue);
  z-index: -1;
  bottom: -5px;
  left: -5px; 
  opacity: 0.4;
  animation: one-second-before 0.5s linear infinite;
  animation-play-state: paused;
}

.one:hover > div:nth-child(2):before {
  animation-play-state: running;
}

.one span {
  grid-column:2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
}

/* Box Two */

.two {
  grid-template-columns: 1fr 4fr 1.2fr;
  grid-template-rows: 1fr 0.77fr 1fr;
}

.two div:nth-child(1) {
  height: 25px;
  width: 25px;
  background-color: $red;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  position: relative;
  border: 2px solid $box-key;
}

.two div:nth-child(1):before {
  content: '';
  position: absolute;
  height: 31px;
  width: 31px;
  border-radius: 50%;
  background-image: linear-gradient(125deg, $red 0%, rgba(196, 49, 42, 0.3) 30%);
  z-index: -1;
  bottom: -5px;
  left: -5px; 
  border: 2px solid $box-key;
  animation: two-first-before 0.5s linear infinite;
  animation-play-state: paused;
}

.two:hover > div:nth-child(1):before {
  animation-play-state: running;
}

.two div:nth-child(1):after {
  content: '';
  position: absolute;
  height: 37px;
  width: 37px;
  border-radius: 50%;
  background-image: linear-gradient(110deg, $red 0%, rgba(196, 49, 42, 0.1) 20%);
  z-index: -2;
  bottom: -6px;
  left: -6px; 
  animation: two-first-after 0.5s linear infinite;
  animation-play-state: paused;
}

.two:hover > div:nth-child(1):after {
  animation-play-state: running;
}
 
.two div:nth-child(2) {
  height: 15px;
  width: 15px;
  background-color: $blue;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 3;
  position: relative;
  border: 2px solid $box-key;
}

.two div:nth-child(2):before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background-image: linear-gradient(-165deg, $blue 0%, rgba(127, 191, 189, 0.2) 30% );
  z-index: -1;
  bottom: -5px;
  left: -5px; 
  border: 2px solid $box-key;
  animation: two-second-before 0.5s linear infinite;
  animation-play-state: paused;
}

.two:hover > div:nth-child(2):before {
  animation-play-state: running;
}

.two div:nth-child(2):after {
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-image: linear-gradient(-109deg, $blue 0%, rgba(127, 191, 189, 0.1) 17%);
  z-index: -2;
  bottom: -7px;
  left: -7px; 
  animation: two-second-after 0.6s linear infinite;
  animation-play-state: paused;
}

.two:hover > div:nth-child(2):after {
  animation-play-state: running;
}

.two span {
  grid-column:2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
}

/* Box Three */

.three {
  grid-template-rows: 0.8fr 1fr 1fr;
}

.three div:nth-child(1) {
  height: 18px;
  width: 18px;
  background-color: $blue;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  position: relative;
  border: 2px solid $box-key;
}

.three div:nth-child(1):before {
  content: '';
  position: absolute;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-image: linear-gradient(100deg, $blue 0%, rgba(127, 191, 189, 0.2) 30%, $blue 60%, rgba(127, 191, 189, 0.2) 100% );
  z-index: -1;
  bottom: -6px;
  left: -6px; 
  border: 3px solid $box-key;
  animation: three-first-before 0.5s linear infinite;
  animation-play-state: paused;
}

.three:hover > div:nth-child(1):before {
  animation-play-state: running;
}

.three div:nth-child(1):after {
  content: '';
  position: absolute;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background-image: linear-gradient(50deg, $blue 0%, rgba(127, 191, 189, 0.2) 35%);
  z-index: -2;
  bottom: -7px;
  left: -7px; 
  animation: three-first-after 0.5s linear infinite;
  animation-play-state: paused;
}

.three:hover > div:nth-child(1):after {
  animation-play-state: running;
}

.three div:nth-child(2) {
  height: 30px;
  width: 30px;
  background-color: $yellow;
  border-radius: 50%;
  grid-column: 3;
  grid-row: 3;
  position: relative;
  border: 3px solid $box-key;
}

.three div:nth-child(2):before {
  content: '';
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-image: linear-gradient(-100deg, $yellow 0%, $box-key 30%, rgba(232, 216, 84, 0.4) 90%);
  z-index: -1;
  bottom: -9px;
  left: -9px; 
  border: 4px solid $box-key;
  animation: three-second-before 0.5s linear infinite;
  animation-play-state: paused;
}

.three:hover > div:nth-child(2):before {
  animation-play-state: running;
}

.three div:nth-child(2):after {
  content: '';
  position: absolute;
  height: 52px;
  width: 52px;
  border-radius: 50%;
  background-image: linear-gradient(150deg,  rgba(232, 216, 84, 0.35), $box-key, rgba(232, 216, 84, 0.05), $box-key);
  z-index: -2;
  bottom: -11px;
  left: -11px; 
  animation: three-second-after 0.5s linear infinite;
  animation-play-state: paused;
}

.three:hover > div:nth-child(2):after {
  animation-play-state: running;
}

.three span {
  grid-column: 1 / 4;
  grid-row: 2 / 4;
  align-self: end; 
  margin-left: 20px;
}

/* Box Four */

.four {
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: repeat(3, 1fr);
}

.four div:nth-child(1) {
  height: 30px;
  width: 30px;
  background-color: $green;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  position: relative;
  border: 3px solid $box-key;
}

.four div:nth-child(1):before {
  content: '';
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-image: linear-gradient(-15deg, rgba(156, 197, 94, 0.3) 0%, $box-key 50%, $green 75%, $box-key 90%);
  z-index: -1;
  bottom: -9px;
  left: -9px; 
  border: 4px solid $box-key;
  animation: four-first-before 0.5s linear infinite;
  animation-play-state: paused;
}

.four:hover > div:nth-child(1):before {
  animation-play-state: running;
}

.four div:nth-child(1):after {
  content: '';
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-image: linear-gradient(40deg, $green 0%, $box-key 30%);
  z-index: -2;
  bottom: -10px;
  left: -10px; 
  opacity: 0.2;
  animation: four-first-after 0.6s linear infinite;
  animation-play-state: paused;
}

.four:hover > div:nth-child(1):after {
  animation-play-state: running;
}

.four div:nth-child(2) {
  height: 22px;
  width: 22px;
  background-color: $blue;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  margin-left: 20%;
  position: relative;
  border: 3px solid $box-key;
}

.four div:nth-child(2):before {
  content: '';
  position: absolute;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: $blue;
  z-index: -1;
  bottom: -10px;
  left: -10px; 
  border: 4px solid $box-key;
  opacity: 0.07;
  animation: four-second-before 0.6s ease-in-out infinite;
  animation-play-state: paused;
}

.four:hover > div:nth-child(2):before {
  animation-play-state: running;
}

.four span {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  justify-self: center;
}

/* Box Five */

.five {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);  
}

.five div:nth-child(1) {
  height: 20px;
  width: 20px;
  background-color: $orange;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  position: relative;
  border: 4px solid $box-key;
}

.five div:nth-child(1):before {
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-image: linear-gradient(20deg, $orange, $box-key, $orange, $box-key, $orange);
  z-index: -1;
  bottom: -5px;
  left: -5px; 
  opacity: 0.8;
  animation: five-first-before 0.6s ease-in-out infinite;
  animation-play-state: paused;
}

.five:hover > div:nth-child(1):before {
  animation-play-state: running;
}

.five div:nth-child(2) {
  height: 15px;
  width: 15px;
  background-color: $green;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  margin-top: 5%;
  border: 1px solid $box-key;
  box-shadow: 0 0 10px rgba(156, 197, 94, 0.5);
  animation: five-second 1s ease-in-out infinite;
  animation-play-state: paused;
}

.five:hover > div:nth-child(2) {
  animation-play-state: running;
}

.five span {
 grid-column: 1 / 4;
 grid-row: 1 / 2;
 justify-self: center;
 align-self: end;
}

/* Box Six */

.six {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  align-content: space-between;
}

.six div:nth-child(1) {
  height: 35px;
  width: 35px;
  background-color: $red;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: start;
  position: relative;
  border: 4px solid $box-key;
}

.six div:nth-child(1):before {
  content: '';
  position: absolute;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  background-image: linear-gradient(-90deg, $red 0%, rgba(196, 49, 42, 0.3) 98%, $box-key 99%);
  border: 4px solid $box-key;
  z-index: -1;
  bottom: -9px;
  left: -9px; 
  animation: six-first-before 0.5s ease-in-out infinite;
  animation-play-state: paused;
}

.six:hover > div:nth-child(1):before {
  animation-play-state: running;
}

.six div:nth-child(1):after {
  content: '';
  position: absolute;
  height: 55px;
  width: 55px;
  border-radius: 50%;
  background-image: linear-gradient(25deg, $box-key, $red, $box-key, $red);
  z-index: -2;
  bottom: -10px;
  left: -10px;
  opacity: 0.7;
  animation: six-first-after 0.8s ease-in-out infinite;
  animation-play-state: paused;
}

.six:hover > div:nth-child(1):after {
  animation-play-state: running;
}

.six div:nth-child(2) {
  height: 10px;
  width: 10px;
  background-color: $blue;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  margin-bottom: 18%;
  background-image: linear-gradient(30deg, $blue 0%, #9c8e9f 80%);
}


.six div:nth-child(3) {
  height: 20px;
  width: 20px;
  background-color: $green;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  margin-right: 9%;
  margin-bottom: 4%;
  border: 1px solid $box-key;
  box-shadow: 0 0 5px rgba(156, 197, 94, 0.5);
  animation: six-third 0.8s ease-in-out infinite;
  animation-play-state: paused;
}

.six:hover > div:nth-child(3) {
  animation-play-state: running;
}

.six span {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  justify-self: end;
  align-self: start;
  transform: rotate(20deg);
  margin-top: 18%;
  margin-right: 5%;
}

/* Box Seven */

.seven {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}

.seven div:nth-child(1) {
  height: 9px;
  width: 9px;
  background-color: $blue;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  margin-right: 30%;
  margin-bottom: 40%;     
  animation: seven-first 0.7s ease-in-out infinite;
  animation-play-state: paused;
}

.seven:hover > div:nth-child(1) {
  animation-play-state: running;
}

.seven div:nth-child(2) {
  height: 43px;
  width: 43px;
  background-color: $white;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  margin-left: 15%;
  position: relative;
  border: 3px solid $box-key;
  animation: seven-second 0.5s linear infinite;
  animation-play-state: paused;
}

.seven:hover > div:nth-child(2) {
  animation-play-state: running;
}


.seven div:nth-child(2):before {
  content: '+';
  position: absolute;
  font-family: 'Lato', sans-serif;
  color: $white;
  font-size: 190px;
  bottom: -14px;
  left: -33px;
  line-height: 0.5;
  z-index: -1;
  opacity: 0.7;
  animation: seven-second-before 0.5s ease-in-out infinite;
  animation-play-state: paused;
  animation-delay: 0.5s;
}

.seven:hover > div:nth-child(2):before {
  animation-play-state: running;
}

.seven div:nth-child(2):after {
  content: '+';
  position: absolute;
  font-family: 'Lato', sans-serif;
  color: $white;
  font-size: 160px;
  bottom: -13px;
  left: -20px;
  line-height: 0.5;
  z-index: -1;
  transform: rotate(45deg);
  opacity: 0.5;  
  animation: seven-second-after 0.4s ease-in-out infinite;
  animation-play-state: paused;
}

.seven:hover > div:nth-child(2):after {
  animation-play-state: running;
}


.seven .large-star span:nth-child(1) {
  height: 55px;
  width: 55px;
  background-color: #8ca074;
  border-radius: 50%;
  position: absolute;
  z-index: -5;
  bottom: -21px;
  left: -8px;
  border: 2px solid $box-key;
  animation: seven-star-span 0.7s linear infinite;
  animation-play-state: paused;
}

.seven:hover > .large-star span:nth-child(1) {
  animation-play-state: running;
}


.seven .large-star span:nth-child(2) {
  height: 65px;
  width: 65px;
  background-color: #713730;
  border-radius: 50%;
  position: absolute;
  z-index: -10;
  bottom: -24px;
  left: -11px;
  opacity: 0.5;
  animation: seven-star-span 0.3s linear infinite;
  animation-play-state: paused;
}

.seven:hover > .large-star span:nth-child(2) {
  animation-play-state: running;
}

.seven span {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  justify-self: center;
  align-self: center;
  margin-bottom: 30%;

}

/* Box Eight */

.eight {
  grid-template-columns: 1fr 0.7fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
}

.eight div:nth-child(1) {
  height: 15px;
  width: 15px;
  background-color: $red;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  position: relative;
  border: 1px solid $box-key;
}

.eight div:nth-child(1):before {
  content: '';
  position: absolute;
  height: 21px;
  width: 21px;
  border-radius: 50%;
  background-image: linear-gradient(160deg, $red, $box-key, $red);
  z-index: -1;
  bottom: -6px;
  left: -6px; 
  border: 3px solid $box-key;
  opacity: 0.7;
  animation: eight-first-before 0.5s linear infinite;
  animation-play-state: paused;
}

.eight:hover > div:nth-child(1):before {
  animation-play-state: running;
}

.eight div:nth-child(1):after {
  content: '';
  position: absolute;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background-image: linear-gradient(175deg, $red 0%, $box-key 80%);
  z-index: -2;
  bottom: -7px;
  left: -7px; 
  opacity: 0.5;
  animation: eight-first-after 0.5s linear infinite;
  animation-play-state: paused;
}

.eight:hover > div:nth-child(1):after {
  animation-play-state: running;
}

.eight div:nth-child(2) {
  height: 20px;
  width: 20px;
  background-color: $orange;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  margin-left: 40px; 
  margin-bottom: 10px;
  position: relative;
  border: 2px solid $box-key;
}

.eight div:nth-child(2):before {
  content: '';
  position: absolute;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  background-image: linear-gradient(45deg, $orange 0%, $box-key 99%);
  z-index: -1;
  bottom: -5px;
  left: -5px; 
  border: 2px solid $box-key;
  animation: eight-second-before 0.5s linear infinite;
  animation-play-state: paused;
}

.eight:hover > div:nth-child(2):before {
  animation-play-state: running;
}

.eight div:nth-child(2):after {
  content: '';
  position: absolute;
  height: 31px;
  width: 31px;
  border-radius: 50%;
  background-color: $orange;
  z-index: -2;
  bottom: -6px;
  left: -6px; 
  opacity: 0.2;
  animation: eight-second-after 0.8s linear infinite;
  animation-play-state: paused;
}

.eight:hover > div:nth-child(2):after {
  animation-play-state: running;
}

.eight div:nth-child(3) {
  height: 8px;
  width: 8px;
  background-color: $yellow;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin-top: 15%;
  position: relative;
  border: 2px solid $box-key;
}

.eight div:nth-child(3):before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background-color: $yellow;
  z-index: -1;
  bottom: -3px;
  left: -3px; 
  opacity: 0.3;
  animation: eight-third-before 0.3s linear infinite;
  animation-play-state: paused;
}

.eight:hover > div:nth-child(3):before {
  animation-play-state: running;
}

.eight span {
  grid-column: 1 / 4;
  grid-row: 3;
  justify-self: center;
}

/* Box Nine */

.nine {
  grid-template-columns: 1fr 0.45fr 1fr;
  grid-template-rows: 1fr 0.38fr 1fr;
}

.nine div:nth-child(1) {
  height: 20px;
  width: 20px;
  background-color: $green;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  margin-left: 32px;
  margin-bottom: 29px;
  position: relative;
  border: 2px solid $box-key;
  animation: nine-first 0.5s linear infinite;
  animation-play-state: paused;
}

.nine:hover > div:nth-child(1){
  animation-play-state: running;
}

.nine div:nth-child(1):before {
  content: '';
  position: absolute;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background-image: linear-gradient(-150deg, $green, $box-key);
  z-index: -1;
  bottom: -4px;
  left: -4px; 
  opacity: 0.6;
  animation: nine-first-before 0.5s linear infinite;
  animation-play-state: paused;
}

.nine:hover > div:nth-child(1):before {
  animation-play-state: running;
}

.nine div:nth-child(2) {
  height: 35px;
  width: 35px;
  background-color: $red;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  position: relative;
  border: 3.5px solid $box-key;
}

.nine div:nth-child(2):before {
  content: '';
  position: absolute;
  height: 46px;
  width: 46px;
  border-radius: 50%;
  background-image: linear-gradient(50deg, rgba(196, 49, 42, 0.5), rgba(196, 49, 42, 0.04));
  z-index: -2;
  bottom: -10px;
  left: -10px; 
  border: 4px solid $box-key;
  animation: nine-second-before 0.3s ease-in-out infinite;
  animation-play-state: paused;
}

.nine:hover > div:nth-child(2):before{
  animation-play-state: running;
}

.nine div:nth-child(2):after {
  content: '';
  position: absolute;
  height: 56px;
  width: 56px;
  border-radius: 50%;
  background-image: linear-gradient(75deg, $red, rgba(196, 49, 42, 0.1));
  z-index: -3;
  bottom: -11px;
  left: -11px;
  opacity: 0.4;
  animation: nine-second-after 0.5s linear infinite;
  animation-play-state: paused;
}

.nine:hover > div:nth-child(2):after {
  animation-play-state: running;
}

.nine span {
  grid-column: 1;
  grid-row: 1 / 4;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: -33px;
  justify-self: center;
  align-self: start;
  margin-top: 10%;
}

/* Box Ten */

.ten {
  grid-template-columns: 1fr 0.30fr 1fr;
  grid-template-rows: 1fr 0.33fr 1fr;
}

.ten div:nth-child(1) {
  height: 29px;
  width: 29px;
  background-color: $orange;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  position: relative;
  border: 2px solid $box-key;
  animation: ten-first 0.7s linear infinite;
  animation-play-state: paused;
}

.ten:hover > div:nth-child(1) {
  animation-play-state: running;
}

.ten div:nth-child(1):before {
  content: '';
  position: absolute;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: rgba(219, 154, 70, 0.2);
  z-index: -1;
  bottom: -5px;
  left: -5px; 
  border: 2px solid $box-key; 
  animation: ten-first-before 0.5s linear infinite;
  animation-play-state: paused;
}

.ten:hover > div:nth-child(1):before {
  animation-play-state: running;
}


.ten div:nth-child(1):after {
  content: '';
  position: absolute;
  height: 41px;
  width: 41px;
  border-radius: 50%;
  background-color: $orange;
  z-index: -3;
  bottom: -6px;
  left: -6px;
  opacity: 0.2;
  animation: ten-first-after 0.6s ease-in-out infinite;
  animation-play-state: paused;
  animation-delay: 0.2s;
}

.ten:hover > div:nth-child(1):after {
  animation-play-state: running;
}

.ten div:nth-child(2) {
  height: 13px;
  width: 13px;
  background-color: $blue;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: end;
  position: relative;
  border: 2px solid $box-key;
}

.ten div:nth-child(2):before {
  content: '';
  position: absolute;
  height: 19px;
  width: 19px;
  border-radius: 50%;
  background-color: rgba(127, 191, 189, 0.2);
  z-index: -1;
  bottom: -5px;
  left: -5px; 
  border: 2px solid $box-key; 
  animation: ten-second-before 0.8s linear infinite;
  animation-play-state: paused;
}

.ten:hover > div:nth-child(2):before {
  animation-play-state: running;
}

.ten div:nth-child(2):after {
  content: '';
  position: absolute;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background-color: $blue;
  z-index: -3;
  bottom: -6px;
  left: -6px;
  opacity: 0.09;
  animation: ten-second-after 0.6s linear infinite;
  animation-play-state: paused;
}

.ten:hover > div:nth-child(2):after {
  animation-play-state: running;
}


.ten span {
  grid-column: 1 / 3;
  grid-row: 1;
  transform: rotate(-20deg);
  align-self: center;
  justify-self: center;
}

/* Box Eleven */

.eleven {
  grid-template-columns: 1fr 0.47fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.eleven div:nth-child(1) {
  height: 8px;
  width: 8px;
  background-color: $yellow;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: center;
  margin-bottom: 12px;
  animation: eleven-first 0.5s ease-in-out infinite;
  animation-play-state: paused;
}

.eleven:hover > div:nth-child(1) {
  animation-play-state: running;
}

.eleven div:nth-child(2) {
  height: 38px;
  width: 38px;
  background-color: $red;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  position: relative;
  border: 3px solid $box-key;
  animation: eleven-second 0.5s linear infinite;
  animation-play-state: paused;
}

.eleven:hover > div:nth-child(2) {
  animation-play-state: running;
}


.eleven div:nth-child(2):before {
  content: '+';
  position: absolute;
  font-family: 'Lato', sans-serif;
  color: $red;
  font-size: 155px;
  bottom: -11px;
  left: -26px;
  line-height: 0.5;
  z-index: -1;
  opacity: 0.7;
  animation: eleven-second-before 0.5s linear infinite;
  animation-play-state: paused;
  animation-delay: 0.5s;
}

.eleven:hover > div:nth-child(2):before {
  animation-play-state: running;
}

.eleven div:nth-child(2):after {
  content: '+';
  position: absolute;
  font-family: 'Lato', sans-serif;
  color: $red;
  font-size: 140px;
  bottom: -11px;
  left: -16px;
  line-height: 0.5;
  z-index: -1;
  transform: rotate(45deg);
  opacity: 0.7;
  animation: eleven-second-after 0.4s linear infinite;
  animation-play-state: paused;
}

.eleven:hover > div:nth-child(2):after {
  animation-play-state: running;
}

.eleven .large-star span:nth-child(1) {
  height: 50px;
  width: 50px;
  background-color: rgba(182, 163, 96, 0.4);
  border-radius: 50%;
  position: absolute;
  z-index: -5;
  bottom: -10px;
  left: -10px;
  border: 4px solid $box-key;
  animation: eleven-star-span 0.3s linear infinite;
  animation-play-state: paused;
}

.eleven:hover > .large-star span:nth-child(1) {
  animation-play-state: running;
}

.eleven .large-star span:nth-child(2) {
  height: 64px;
  width: 64px;
  background-image: linear-gradient(-30deg, rgba(182, 163, 96, 0.08) 0%, $box-key 99%);
  border-radius: 50%;
  position: absolute;
  z-index: -10;
  bottom: -13px;
  left: -13px;
  animation: eleven-star-span 0.3s linear infinite;
  animation-play-state: paused;
}

.eleven:hover > .large-star span:nth-child(2) {
  animation-play-state: running;
}

.eleven span {
  grid-column: 1 / 4;
  grid-row: 3;
  justify-self: center;
  align-self: center;
}

/* Box Twelve */

.twelve {
  grid-template-columns: 1fr 0.38fr 1fr;
  grid-template-rows: 1fr 0.41fr 1fr
}

.twelve div:nth-child(1) {
  height: 20px;
  width: 20px;
  background-color: $red;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: start;
  position: relative;
  border: 2px solid $box-key;
  animation: twelve-first 0.8s linear infinite;
  animation-play-state: paused;
}

.twelve:hover > div:nth-child(1){
  animation-play-state: running;
} 

.twelve div:nth-child(1):before {
  content: '';
  position: absolute;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  background-image: linear-gradient(-40deg, $red, $box-key);
  border: 4px solid $box-key;
  z-index: -1;
  bottom: -7px;
  left: -7px; 
  animation: twelve-first-before 0.5s linear infinite;
  animation-play-state: paused;
}

.twelve:hover > div:nth-child(1):before {
  animation-play-state: running;
} 

.twelve div:nth-child(2) {
  height: 30px;
  width: 30px;
  background-color: $red;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  position: relative;
  border: 3px solid $box-key;
}

.twelve div:nth-child(2):before {
  content: '';
  position: absolute;
  height: 38px;
  width: 38px;
  border-radius: 50%;
  background-image: linear-gradient(-40deg, $red 0%, $box-key 99%);
  border: 4px solid $box-key; 
  z-index: -1;
  bottom: -8px;
  left: -8px; 
  border: 4px solid $box-key;
  animation: twelve-second-before 0.5s linear infinite;
  animation-play-state: paused;
}

.twelve:hover > div:nth-child(2):before {
  animation-play-state: running;
}


.twelve div:nth-child(2):after {
  content: '';
  position: absolute;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  background-color: rgba(196, 49, 42, 0.25);
  border: 4px solid $box-key;
  z-index: -2;
  bottom: -13px;
  left: -13px; 
  animation: twelve-second-after 0.6s linear infinite;
  animation-play-state: paused;
}

.twelve:hover > div:nth-child(2):after {
  animation-play-state: running;
}



.twelve span {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  align-self: center;
  justify-self: center;
}

/* Bottom Description Key */

.key {
  grid-column: 1 / 4;
  color: $box-key;
  margin-left: 40px;
}

.key span {
  text-transform: uppercase;
}

.key p {
  margin-left: 80px;
  font-size: 16px;
}

.key p:nth-child(3) {
  font-size: 14px;
}

/* Hover and Animations */

.box:hover > span  {
  display: grid; // Show name of stars 
}


@keyframes star-name {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Box One */


@keyframes one-first-before {
  100% {
    background-image: linear-gradient(-90deg, $orange, $box-key, $orange, $box-key);
  }
}


@keyframes one-first-after {
  100% {
    background-image: linear-gradient(0deg, $box-key, $orange, $box-key, $orange);
    opacity: 0.8;
  }
}

  
@keyframes one-second-before {
  50% {
    opacity: 0.5;
    transform: rotate(30deg);
  }
  100% {
    opacity: 0.8;
    transform: -30deg;
  }
}


/* Box Two */


@keyframes two-first-before {
  100% {
    background-image: linear-gradient(125deg, $red, $box-key);
  }
}

@keyframes two-first-after {
  50% {
    background-image: linear-gradient(-50deg, $red 0%, rgba(196, 49, 42, 0.3) 20%);
  }
  100% {
    background-image: linear-gradient(50deg, $red 0%, rgba(196, 49, 42, 0.2) 20%);
  }
}



@keyframes two-second-before {
  100% {
    background-image: linear-gradient(-90deg, $blue 0%, rgba(127, 191, 189, 0.2) 20% );
  }
}

@keyframes two-second-after {
  50% {
    background-image: linear-gradient(180deg, $blue, $box-key);
    opacity: 0.4;
  }
  100% {
    background-image: linear-gradient(-80deg, $blue, $box-key, $blue);
    opacity: 0.3;
  }
}



/* Box Three */


@keyframes three-first-before {
  100% {
     background-image: linear-gradient(-90deg, $blue 0%, rgba(127, 191, 189, 0.2) 20% );
  }
}

@keyframes three-first-after {
  100% {
     background-image: linear-gradient(-80deg, $blue, $box-key, $blue);
     opacity: 0.3;
  }
}



@keyframes three-second-before {
  100% {
     background-image: linear-gradient(-130deg, $yellow 0%, $box-key 30%, rgba(232, 216, 84, 0.5) 90%);
  }
}

@keyframes three-second-after {
   50% {
     background-image: linear-gradient(190deg, rgba(232, 216, 84, 0.2), $box-key, rgba(232, 216, 84, 0.1));
  }
  100% {
     background-image: linear-gradient(160deg, rgba(232, 216, 84, 0.1), $box-key, rgba(232, 216, 84, 0.2));
  }
}


/* Box Four */

@keyframes four-first-before {
  100% {
      background-image: linear-gradient(20deg, rgba(156, 197, 94, 0.7) 0%, $box-key 50%, rgba(156, 197, 94, 0.7) 75%, $box-key 90%);
  }
 
}

@keyframes four-first-after {
  100% {
     background-image: linear-gradient(70deg, $green 0%, $box-key 70%);
     opacity: 0.4;
  }
}



@keyframes four-second-before {
  50% {
    opacity: 0.2;
    height: 32px;
    width: 32px;
    bottom: -9px;
    left: -9px; 
  }
  100% {
    opacity: 0.1;
    box-shadow: 0 0 10px $blue;
  }
 }



/* Box Five */

@keyframes five-first-before {
  
  50% {
    opacity: 0.5;
    transform: rotate(30deg);
  }
  100% {
    opacity: 0.8;
    transform: -30deg;
  }

}



@keyframes five-second {
  
  50% {
    background-color: rgba(156, 197, 94, 0.9);
    box-shadow: 0 0 15px rgba(156, 197, 94, 0.7);
  }
  100% {
    background-color: $green;
    box-shadow: 0 0 10px rgba(156, 197, 94, 0.6);
  }
  
 }



/* Box Six */

@keyframes six-first-before {
  100% {
   background-image: linear-gradient(-30deg, $red 0%, rgba(196, 49, 42, 0.3) 98%, $box-key 99%);
  }
}


@keyframes six-first-after {
  100% {
    background-image: linear-gradient(-20deg, $box-key, $red, $box-key, $red);
    opacity: 0.5;
  }
}


@keyframes six-third {
    50% {
    background-color: rgba(156, 197, 94, 0.9);
    box-shadow: 0 0 10px rgba(156, 197, 94, 0.7);
  }
  100% {
    background-color: $green;
    box-shadow: 0 0 5px rgba(156, 197, 94, 0.6);
  }

 }


/* Box Seven*/

@keyframes seven-first {
  50% {
   opacity: 0.7;
  }
}


@keyframes seven-second {
  50% {
   background-color: #dddddb;
  }
}




@keyframes seven-second-before {
  50% {
    opacity: 0.6;
  }
  100% {
     opacity: 0.9;
     
  }
 }

@keyframes seven-second-after {
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.6;
  }
  
 }


@keyframes seven-star-span {
  50% {
    opacity: 0.7;
  }
 
 }




/* Box Eight*/

@keyframes eight-first-before {
  100% {
   background-image: linear-gradient(120deg, $red, $box-key, $red);
   opacity: 1;

  }
}


@keyframes eight-first-after {
  100% {
    background-image: linear-gradient(200deg, $red 0%, $box-key 90%);
    opacity: 0.6;
    height: 30px;
    width: 30px;
    bottom: -8px;
    left: -8px;
  }
}



@keyframes eight-second-before {
  100% {
  background-image: linear-gradient(0deg, $orange 0%, $box-key 99%);

  }
}


@keyframes eight-second-after {
  50% {
     box-shadow: 0 0 5px $orange;
  }
  
  100% {
   background-color: $orange;
   opacity: 0.5;

  }
}

@keyframes eight-third-before {
  100% {
    opacity: 0.5;
  }
}



/* Box Nine*/

@keyframes nine-first {
   50% {
    background-color: #8bb252;
  }
}

@keyframes nine-first-before {
  100% {
     background-image: linear-gradient(-120deg, $green, $box-key);
     opacity: 0.7;
  }
}


@keyframes nine-second-before {
  100% {
      background-image: linear-gradient(-10deg, rgba(196, 49, 42, 0.5), rgba(196, 49, 42, 0.05));
  }
}


@keyframes nine-second-after {
  50% {
     background-image: linear-gradient(90deg, $red, rgba(196, 49, 42, 0.5));
     opacity: 0.6;
  }
}



/* Box Ten*/

@keyframes ten-first {
 50% {
   background-color: #ce9b58;

  }
}

@keyframes ten-first-before {
 50% {
   background-color: rgba(219, 154, 70, 0.6);
  }
}

@keyframes ten-first-after {
  50% {
    opacity: 0.4;
    box-shadow: 0 0 2px #8e6836;
  }
}

@keyframes ten-second-before {
  50% {
    background-color: rgba(127, 191, 189, 0.7);
  }
}


@keyframes ten-second-after {
  50% {
    opacity: 0.4;
    box-shadow: 0 0 3px $blue;
  }
}


/* Box Eleven*/

@keyframes eleven-first {
  50% {
   opacity: 0.8;
  }
}


@keyframes eleven-second {
  50% {
   background-color: #b7312c;
  }
}




@keyframes eleven-second-before {
  50% {
    opacity: 0.6;
  }
  100% {
     opacity: 0.9;
     
  }
 }

@keyframes eleven-second-after {
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.6;
  }
  
 }


@keyframes eleven-star-span {
  50% {
    opacity: 0.7;
  }
 
 }




/* Box Twelve*/



@keyframes twelve-first {
  
  50% {
   background-color: #b7312c;
  }
  
 }



@keyframes twelve-first-before {
  
  50% {
    background-image: linear-gradient(-70deg, $red, $box-key);
    height: 27px;
    width: 27px;
    left: -9px; 
  }
  
 }




@keyframes twelve-second-before {

  50% {
     background-image: linear-gradient(0deg, $red 0%, $box-key 99%);
  }
  
 }


@keyframes twelve-second-after {

  50% { 
     background-color: rgba(196, 49, 42, 0.6);
  }
  

 }
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console