---
---

/**
 * CONTENTS
 *
 * SETTINGS
 * Variables...............Globally-available variables and config.
 *
 * TOOLS
 * Mixins...............Useful mixins.
 *
 * GENERIC
 *
 * BASE
 * Headings.............H1–H6 styles.
 *
 * OBJECTS
 * Wrappers.............Wrapping and constraining elements.
 *
 * COMPONENTS
 * Page-head............The main page header.
 * Page-foot............The main page footer.
 * Buttons..............Button elements.
 *
 * TRUMPS
 * Text.................Text helpers.
 */

@import "settings.variables";
@import "base";

.mg-title {
  background-color: $color-red;
  display: inline-block;
  padding: 1rem;
  box-shadow: 5px 5px orange;
}

.red,
.hover-red:focus,
.hover-red:hover {
  color: $color-red;
}

.bg-red,
.hover-bg-red:hover,
.hover-bg-red:focus {
  background-color: $color-red;
}

.hover-rotate-planet:hover,
.hover-rotate-planet:focus,
.rotate-planet {
  animation: rotation 8s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				transform: rotate(0deg);
		}
		to {
				transform: rotate(359deg);
		}
}

---
---

/**
 * CONTENTS
 *
 * SETTINGS
 * Variables...............Globally-available variables and config.
 *
 * TOOLS
 * Mixins...............Useful mixins.
 *
 * GENERIC
 *
 * BASE
 * Headings.............H1–H6 styles.
 *
 * OBJECTS
 * Wrappers.............Wrapping and constraining elements.
 *
 * COMPONENTS
 * Page-head............The main page header.
 * Page-foot............The main page footer.
 * Buttons..............Button elements.
 *
 * TRUMPS
 * Text.................Text helpers.
 */

@import "settings.variables";
@import "base";

.mg-title {
  background-color: $color-red;
  display: inline-block;
  padding: 1rem;
  box-shadow: 5px 5px orange;
}

.red,
.hover-red:focus,
.hover-red:hover {
  color: $color-red;
}

.bg-red,
.hover-bg-red:hover,
.hover-bg-red:focus {
  background-color: $color-red;
}

.hover-rotate-planet:hover,
.hover-rotate-planet:focus,
.rotate-planet {
  animation: rotation 8s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				transform: rotate(0deg);
		}
		to {
				transform: rotate(360deg);
		}
}

Correct a bug in the rotation animation
Correct a bug in the rotation animation
