.button{
    color: #00acc1;
    font-weight: 500;
    padding: 16px;
    border-radius: 10px;
}

.button{
    color: $color-brand-blue;
    font-weight: $font-weight-med;
    padding: $padding-MD;
    border-radius: $border-radius-SM;
}

// Border Radius
$border-radius-XS: 0.125rem;
$border-radius-round: 50%;

// Colors - Brand
$color-brand-blue: #00acc1;

// Colors - States
$color-state--error: #d50000;

// Colors - Neutrals
$color-gray: #7b7b7b;

// Color - Gradients
$color-gradient-brand: 
    ($color-brand-blue, $color-state--error);


// Font Weights
$font-weight-med: 500;

// Font Families
$font-roboto: Roboto;

// Font Sizes
$font-size-base: 1rem;
$font-size-MD: ($font-size-base * 1);

// Line Heights
$line-height-MD: 1.25;

// Sizing
$sizing-base: 1rem;
$sizing-MD: ($sizing-base * 0.75);

// Elevations
$elevation-MD: 
    0 $sizing-XS $sizing-SM 0 rgba($color-black, 0.3);

// Transitions
$transition-base: all ease 0.3s;

// Text Color
$text-color-muted: $color-gray;

// Z-Index
$z-index-default: 1;
$z-index-header: 1000;

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

<figure class="media">
    <img 
        class="logo-img" 
        src="logo.png" 
        alt="Wayne Interprises">
    <figcaption>
        <h3 class="title">
            Wayne Inc. Corp.
        </h3>
        <p class="alpha">
            Gotham Major Tech Suit
        </p>
    </figcaption>
</figure>

<figure class="logo-caption">
    <img 
        class="logo-caption__img" 
        src="logo.svg" 
        alt="Wayne Interprises">
    <figcaption>
        <h3 class="logo-caption__title">
            Wayne Inc. Corp.
        </h3>
        <p class="
            logo-caption__desc
            logo-caption__desc--soft">
                Gotham Major Tech Suit
        </p>
    </figcaption>
</figure>

[property]-[side]-[sizing]
.padding-left-MD
.margin-top-XS

[color-property]-[color]
.font-color-muted
.bg-color-brand-blue

[d: display]-[type]
.d-flex

font-[property]-[sizing]
.font-size-LG
.font-weight-lig

$sides: "-top", "-left"...;

$font-sizes: (
    1: $font-size-1,
    2: $font-size-2,
);

$colors: (
    black: $color-black,
    brand-blue: $color-brand-blue,
);

$displays: "block","flex"...;

$font-weights: (
    lig: $font-weight-lig,
    reg: $font-weight-reg,
);

$sizings: (
    "-MD": $sizing-MD,
    "-collapsed": 0,
);

body {
  background-color: #600090;
  color: #fff;
  font-family: arial, helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  margin: auto;
  text-align: center;
  overflow-x: hidden;
}
a {
  display: inline-block;
}
a:link {
  color: orange;
}
a:visited {
  color: orangered;
}
a:hover {
  color: yellow;
}
a:active {
  color: white;
}
#menu {
  width: 100vw;
  height: calc(100vh - 70px);
  margin-bottom: 70px;
}
#bottomBar {
  z-index: 10;
  position: absolute;
  padding-left: 15px;
  width: 100vw;
  height: 70px;
  bottom: -100px;
  animation: bottomBar 1s 0s forwards ease-out,
    bottomBarColourScroll 2s 600s infinite;
  background-color: rgba(128, 0, 255, 0.5);
}
@keyframes bottomBar {
  from {
    bottom: -100px;
  }
  to {
    bottom: 0;
  }
}
@keyframes bottomBarColourScroll {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
.bbbContainer {
  display: inline-block;
  margin-right: 30px;
  width: 200px;
  height: 200px;
}
@keyframes reduceSpacer {
  from {
    height: 100vh;
  }
  to {
    height: 0vh;
  }
}
#subText {
  text-align: center;
  font-size: 2vw;
  text-shadow: 0px 0px 1vw rgba(255, 255, 255, 0.9);
}
.promoLink {
  border-radius: 15px;
  transition: transform 0.2s;
  margin: 5px;
  filter: grayscale(70%);
}

#bbb1,
#bbb2,
#bbb3,
#bbb4,
#bbb5 {
  display: block;
  margin-top: 100px;
  border-radius: 5px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.6);
  filter: grayscale(50%);
  transition: all 1s ease;
  cursor: pointer;
  animation: bbbGlideUp 1s 1s forwards ease-out;
}
#bbb2 {
  animation: bbbGlideUp 1s 1.2s forwards ease-out;
}
#bbb3 {
  animation: bbbGlideUp 1s 1.4s forwards ease-out;
}
#bbb4 {
  animation: bbbGlideUp 1s 1.6s forwards ease-out;
}
#bbb5 {
  animation: bbbGlideUp 1s 1.8s forwards ease-out;
}
@keyframes bbbGlideUp {
  from {
    margin-top: 100px;
  }
  to {
    margin-top: 5px;
  }
}
#bbb1:hover,
#bbb2:hover,
#bbb3:hover,
#bbb4:hover,
#bbb5:hover {
  transform: scale(1.1);
  box-shadow: 4px 8px 10px 14px rgba(0, 0, 0, 0.5);
  filter: grayscale(0%);
}
#fbLike {
  z-index: 15;
  position: absolute;
  bottom: 3px;
  right: -100px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.6);
  animation: fbLikeGlideIn 1s 7s forwards ease-out paused;
}
@keyframes fbLikeGlideIn {
  from {
    right: -100px;
  }
  to {
    right: 5px;
  }
}
@keyframes flash {
  0% {
    filter: brightness(0) invert(1);
  }
  20% {
    filter: brightness(1) invert(0);
  }
  40% {
    filter: brightness(0) invert(1);
  }
  60% {
    filter: brightness(1) invert(0);
  }
  80% {
    filter: brightness(0) invert(1);
  }
  100% {
    filter: brightness(1) invert(0);
  }
}