/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4; }

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

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

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

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

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

textarea {
  resize: vertical; }

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0; }

body {
  font-size: 16px;
  font-family: "Roboto Condensed", sans-serif; }

p {
  font-size: 1em; }

h1, h2, h3 {
  font-weight: 700;
  padding: 0px;
  margin: 0px;
  line-height: 1.3; }

h1 {
  font-size: 1.8em; }

h2 {
  font-size: 1em; }

h3 {
  font-size: 1em; }

/* ==========================================================================
   Grid (float based grid generator, add if needed)
   ========================================================================== */
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.page {
  max-width: 460px;
  width: 100%;
  margin: 0px auto; }

.site_header {
  margin: 0px;
  padding: 0px;
  position: relative; }

.lifebars {
  display: flex;
  justify-content: space-between; }
  .lifebars div {
    flex-basis: 49%;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #333; }
  .lifebars .user_life {
    align-items: flex-start; }
    .lifebars .user_life h1, .lifebars .user_life h2, .lifebars .user_life h3 {
      text-align: left; }
  .lifebars .enemy_life {
    align-items: flex-end; }
    .lifebars .enemy_life h1, .lifebars .enemy_life h2, .lifebars .enemy_life h3 {
      text-align: right; }
    .lifebars .enemy_life li {
      display: none; }
  .lifebars ul {
    padding: 0px;
    list-style: none;
    margin: 0px;
    height: 20px; }
  .lifebars .life_bar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid red;
    background-color: #ff6666;
    display: inline-block; }
    .lifebars .life_bar.empty {
      background-color: transparent; }

.site_content {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  min-height: 250px; }
  .site_content h2 {
    margin: 10px 0px; }

.site_footer {
  max-width: 460px;
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; }

#test {
  position: relative;
  left: 600px;
  width: 100px; }

#the_goal {
  text-align: center;
  padding: 10px; }

.shapes_nav {
  padding: 0px;
  margin: 0px auto;
  width: 98%;
  position: relative;
  z-index: 10; }
  .shapes_nav #the_unravel_btns {
    display: flex;
    flex-direction: row;
    justify-content: center; }
    .shapes_nav #the_unravel_btns .unravel_btn {
      background-color: red;
      flex: 2;
      text-align: center;
      color: white;
      box-shadow: 0px 0px 4px #333 inset;
      height: 65px;
      align-items: center;
      display: flex;
      justify-content: center;
      cursor: pointer; }
      .shapes_nav #the_unravel_btns .unravel_btn img {
        width: 60px;
        height: auto; }
    .shapes_nav #the_unravel_btns .unravel_text {
      padding: 10px;
      text-align: left;
      color: red;
      font-size: 1.2em;
      width: 280px; }
  .shapes_nav #the_shape_btns {
    display: none;
    flex-direction: row;
    justify-content: center; }
    .shapes_nav #the_shape_btns::before {
      height: 1px;
      width: 100%;
      box-shadow: 5px 0px 10px #333; }
    .shapes_nav #the_shape_btns ul {
      list-style: none;
      padding: 0px;
      margin: 0px; }
    .shapes_nav #the_shape_btns .grid_layout {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: minmax(60px, auto);
      grid-gap: 0px;
      max-width: 280px; }
      .shapes_nav #the_shape_btns .grid_layout li {
        width: 70px;
        min-height: 70px;
        background-color: rgba(255, 255, 255, 0.7); }
        .shapes_nav #the_shape_btns .grid_layout li.clicked {
          background-color: red; }
    .shapes_nav #the_shape_btns .add_container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      background-color: #333; }
      .shapes_nav #the_shape_btns .add_container li {
        width: 70px;
        min-height: 70px;
        background-color: #333; }
    .shapes_nav #the_shape_btns li {
      margin: 0px;
      padding: 0px;
      cursor: pointer; }
      .shapes_nav #the_shape_btns li img {
        width: 100%;
        height: auto; }
  .shapes_nav #selected_shape1 {
    background-color: #333; }
  .shapes_nav #selected_shape2 {
    background-color: #333; }

#level_done {
  display: none;
  background-color: red;
  padding: 30px;
  position: absolute;
  bottom: 20px;
  color: white;
  z-index: 999;
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  box-shadow: 0px 0px 20px #333;
  border-radius: 10px;
  cursor: pointer;
  text-align: center; }

.enemy {
  position: relative;
  max-width: 250px;
  padding: 0px;
  margin: 0 auto;
  min-height: 250px; }
  .enemy div {
    position: absolute;
    transform-origin: center center; }
    .enemy div img {
      width: 100%;
      height: auto; }
  .enemy.attack {
    animation-name: attack;
    animation-duration: 1s;
    animation-iteration-count: infinite; }

@keyframes attack {
  0% {
    transform: rotate(-4deg); }
  50% {
    transform: rotate(4deg); }
  100% {
    transform: rotate(-4deg); } }
  .enemy.dazed {
    animation-name: dazed;
    animation-duration: 2s;
    animation-iteration-count: 1; }

@keyframes dazed {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

#enemy_unravel {
  flex: 1;
  display: flex;
  padding: 0px;
  margin: 0px;
  background-color: #333;
  cursor: pointer;
  box-shadow: 0px 0px 4px #333 inset; }
  #enemy_unravel .icon {
    color: #fff;
    max-width: 60px;
    margin: 0 auto;
    position: relative;
    align-self: center; }
    #enemy_unravel .icon img {
      width: 100%;
      height: auto; }
  #enemy_unravel .arrow_left {
    width: 25px;
    position: absolute;
    left: 0px;
    top: -25px;
    animation-name: pulse_left;
    animation-duration: 1s;
    animation-iteration-count: infinite; }
  #enemy_unravel .arrow_right {
    width: 25px;
    position: absolute;
    right: 0px;
    top: -25px;
    animation-name: pulse_right;
    animation-duration: 1s;
    animation-iteration-count: infinite; }
  #enemy_unravel.pulse {
    animation-name: pulse_colour;
    animation-duration: 1s;
    animation-iteration-count: infinite; }

@keyframes pulse_colour {
  0% {
    background-color: #333; }
  50% {
    background-color: #666; }
  100% {
    background-color: #333; } }

@keyframes pulse_left {
  0% {
    left: 0px; }
  50% {
    left: 15px; }
  100% {
    left: 0px; } }

@keyframes pulse_right {
  0% {
    right: 0px; }
  50% {
    right: 15px; }
  100% {
    right: 0px; } }

#colour_wheel {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 250px; }
  #colour_wheel img, #colour_wheel svg {
    width: 100%;
    height: auto; }

#head {
  z-index: -1 !important; }

.colour_invert {
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg); }

.bw_invert {
  animation-name: bwswap;
  animation-duration: 1s;
  animation-iteration-count: 1;
  filter: invert(1); }

@keyframes bwswap {
  0% {
    filter: invert(0); }
  100% {
    filter: invert(1); } }

.bw_invert_pulse {
  animation-name: bwswap_pulse;
  animation-duration: 1s;
  animation-iteration-count: 3;
  animation-fill-mode: forwards;
  filter: invert(1); }

@keyframes bwswap_pulse {
  0% {
    filter: invert(0); }
  50% {
    filter: invert(1); }
  100% {
    filter: invert(0); } }

.hide_pupils div[id*="pupil"] {
  display: none; }

.hide {
  display: none; }

#enemy.orange .black {
  filter: invert(0.5) sepia(1) saturate(40) hue-rotate(-15deg); }

#enemy.green .black {
  filter: invert(0.5) sepia(1) saturate(55) hue-rotate(65deg); }

#enemy.purple .black {
  filter: invert(0.1) sepia(1) saturate(30) hue-rotate(-75deg); }

#add_red.on, #add_blue.on, #add_yellow.on {
  display: block; }

#wheel .red {
  fill: #CC0001; }

#wheel .red_fade1 {
  fill: rgba(204, 0, 1, 0.5); }

#wheel .red_fade2 {
  fill: #cc0001; }

#wheel .blue {
  fill: #003398; }

#wheel .blue_fade1 {
  fill: rgba(0, 51, 152, 0.5); }

#wheel .blue_fade2 {
  fill: #003398; }

#wheel .yellow {
  fill: #FFFF02; }

#wheel .yellow_fade1 {
  fill: rgba(255, 255, 2, 0.5); }

#wheel .yellow_fade2 {
  fill: #ffff02; }

#wheel .orange {
  fill: #FF6602; }

#wheel .orange_yellow {
  fill: #FF9901; }

#wheel .orange_red {
  fill: #FF3301; }

#wheel .green {
  fill: #339900;
  stroke: #339900; }

#wheel .green_yellow {
  fill: #66CC01; }

#wheel .green_blue {
  fill: #006666; }

#wheel .purple {
  fill: #660066; }

#wheel .purple_red {
  fill: #990066; }

#wheel .purple_blue {
  fill: #000066; }

#wheel .grey {
  fill: #555; }

/* ==========================================================================
   Media Queries
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.invisible {
  visibility: hidden; }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""; }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; } }