/**************************************************************
 *
 *                      CSS RESET
 *
 ***************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  box-sizing: border-box;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/***************************************************************
 *
 *                      FRAMEWORK
 *
 ***************************************************************/
body {
  padding: 0;
  margin: 0;
  overflow: hidden; }
  body #wrapper {
    width: 100vw;
    height: 100vh;
    margin: 0; }

/* ANIMATION - Animation & BG Color Fade Effects
-------------------------------------------------- */
.animate25 {
  transition: all 0.25s ease-in-out; }

.animate50 {
  transition: all 0.5s ease-in-out; }

.animate150 {
  transition: all 1.5s ease-in-out; }

.animateLong {
  transition: all 5s ease-in-out; }

.colorFade1 {
  background: linear-gradient(71deg, #d80ff1, #f02890, #4e01b7);
  background-size: 600% 600%;
  animation: colorFadeOne 20s linear infinite; }

.colorFade2 {
  background: linear-gradient(39deg, #0fece4, #f06ceb, #fff900);
  background-size: 600% 600%;
  animation: colorFadeTwo 20s linear infinite; }

.colorFade3 {
  background: linear-gradient(293deg, #a4ff60, #ffdd22, #ca0069, #ff0085);
  background-size: 800% 800%;
  animation: colorFadeThree 35s linear infinite; }

.colorFade4 {
  background: linear-gradient(293deg, #0fecb9, #00f9d7, #6881fb, #0fecb9);
  background-size: 800% 800%;
  animation: colorFadeFour 35s linear infinite; }

@keyframes colorFadeOne {
  0% {
    background-position: 20% 0%; }
  50% {
    background-position: 91% 100%; }
  100% {
    background-position: 20% 0%; } }

@keyframes colorFadeTwo {
  0% {
    background-position: 62% 0%; }
  50% {
    background-position: 39% 100%; }
  100% {
    background-position: 62% 0%; } }

@keyframes colorFadeThree {
  0% {
    background-position: 0% 84%; }
  50% {
    background-position: 100% 17%; }
  100% {
    background-position: 0% 84%; } }

@keyframes colorFadeFour {
  0% {
    background-position: 10% 80%; }
  50% {
    background-position: 95% 10%; }
  100% {
    background-position: 10% 80%; } }

#bg-wrap {
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 1; }
  #bg-wrap > div {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute; }
    #bg-wrap > div:nth-child(1) {
      background: linear-gradient(39deg, #0fece4, #00e7ff, #11f1c4);
      z-index: 1; }
    #bg-wrap > div:nth-child(2) {
      background: linear-gradient(45deg, #d80ff1, #f02890, #11f1c4);
      animation: opacityFade 40s linear 10s infinite;
      z-index: 2; }

@keyframes opacityFadeOne {
  0% {
    opacity: 1; }
  20% {
    opacity: 0; }
  80% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes opacityFadeTwo {
  0% {
    opacity: 1; }
  20% {
    opacity: 0; }
  80% {
    opacity: 0; }
  100% {
    opacity: 1; } }

/* FONTS - Various Font Iterations
-------------------------------------------------- */
@font-face {
  font-family: 'luxFont';
  src: url("../fonts/04B_30.eot");
  src: url("../fonts/04B_30.eot?#iefix") format("embedded-opentype"), url("../fonts/04B_30.woff2") format("woff2"), url("../fonts/04B_30.woff") format("woff"), url("../fonts/04B_30.ttf") format("truetype"), url("../fonts/04B_30.svg#04b30") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'coolville';
  src: url("../fonts/coolville.eot");
  src: url("../fonts/coolville.eot?#iefix") format("embedded-opentype"), url("../fonts/coolville.woff2") format("woff2"), url("../fonts/coolville.woff") format("woff"), url("../fonts/coolville.ttf") format("truetype"), url("../fonts/coolville.svg#coolville") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'hardpixel';
  src: url("../fonts/hardpixel.eot");
  src: url("../fonts/hardpixel.eot?#iefix") format("embedded-opentype"), url("../fonts/hardpixel.woff2") format("woff2"), url("../fonts/hardpixel.woff") format("woff"), url("../fonts/hardpixel.ttf") format("truetype"), url("../fonts/hardpixel.svg#hardpixel") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'manaspc';
  src: url("../fonts/manaspc.eot");
  src: url("../fonts/manaspc.eot?#iefix") format("embedded-opentype"), url("../fonts/manaspc.woff2") format("woff2"), url("../fonts/manaspc.woff") format("woff"), url("../fonts/manaspc.ttf") format("truetype"), url("../fonts/manaspc.svg#manaspc") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'pixel_8';
  src: url("../fonts/pixel_8.eot");
  src: url("../fonts/pixel_8.eot?#iefix") format("embedded-opentype"), url("../fonts/pixel_8.woff2") format("woff2"), url("../fonts/pixel_8.woff") format("woff"), url("../fonts/pixel_8.ttf") format("truetype"), url("../fonts/pixel_8.svg#pixel_8") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'px10';
  src: url("../fonts/px10.eot");
  src: url("../fonts/px10.eot?#iefix") format("embedded-opentype"), url("../fonts/px10.woff2") format("woff2"), url("../fonts/px10.woff") format("woff"), url("../fonts/px10.ttf") format("truetype"), url("../fonts/px10.svg#04b30") format("svg");
  font-weight: normal;
  font-style: normal; }

.font1 {
  font-family: 'luxFont'; }

.font2 {
  font-family: 'coolville'; }

.font3 {
  font-family: 'hardpixel'; }

.font4 {
  font-family: 'manaspc'; }

.font5 {
  font-family: 'pixel_8'; }

.font6 {
  font-family: 'px10'; }

/***************************************************************
 *
 *                      MAIN TEXT DISPLAY
 *
 ***************************************************************/
#metaphor-wrap {
  z-index: 500;
  left: 50%;
  top: 50%;
  width: 100%;
  max-width: 1024px;
  padding: 0px 20px;
  position: absolute;
  transform: translate(-50%, -50%); }
  #metaphor-wrap.hide {
    opacity: 0;
    pointer-events: none; }
  #metaphor-wrap #text-body {
    color: #FFF;
    font-size: 1.4rem;
    line-height: 3rem;
    text-align: center;
    opacity: 1;
    pointer-events: all;
    text-shadow: 1px 1px 5px #000, -1px -1px 5px #000, 1px -1px 5px #000, -1px 1px 5px #000; }
    #metaphor-wrap #text-body.hide {
      opacity: 0;
      pointer-events: none; }
    #metaphor-wrap #text-body.font1 {
      font-size: 1.2rem;
      line-height: 2.75rem; }
    @media only screen and (min-height: 568px) {
      #metaphor-wrap #text-body {
        line-height: 4rem; }
        #metaphor-wrap #text-body.font1 {
          line-height: 3.5rem; } }
    @media only screen and (min-width: 480px) {
      #metaphor-wrap #text-body {
        font-size: 2rem; }
        #metaphor-wrap #text-body.font1 {
          font-size: 2rem; } }
    @media only screen and (min-width: 768px) {
      #metaphor-wrap #text-body {
        font-size: 2.4rem; }
        #metaphor-wrap #text-body.font1 {
          font-size: 2.4rem; } }
    @media only screen and (min-width: 1024px) {
      #metaphor-wrap #text-body {
        font-size: 3rem; }
        #metaphor-wrap #text-body.font1 {
          font-size: 2.75rem; } }

/***************************************************************
 *
 *                      MAIN IMAGE DISPLAY
 *
 ***************************************************************/
#notes-wrap {
  z-index: 500;
  left: 50%;
  top: 50%;
  width: 100%;
  max-width: 1024px;
  padding: 0px;
  opacity: 1;
  pointer-events: all;
  position: absolute;
  transform: translate(-50%, -50%); }
  #notes-wrap.hide {
    opacity: 0;
    pointer-events: none; }
  #notes-wrap #image-body {
    position: relative;
    opacity: 1;
    pointer-events: all;
    width: calc( 100vw - 2%);
    height: calc( 100vh - 150px);
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50vh);
    background-position-x: 50%;
    background-position-y: 50%;
    background-size: contain;
    background-repeat: no-repeat; }
    #notes-wrap #image-body img {
      width: 100%;
      height: auto;
      box-shadow: 2px 2px 5px #000; }

/***************************************************************
 *
 *                     	   ABOUT PANEL
 *
 ***************************************************************/
#about-wrap {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: absolute; }
  #about-wrap #about-title {
    left: 19px;
    bottom: 8px;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    position: absolute;
    text-shadow: 1px 1px 3px #000, -1px 0px 3px #000; }
    #about-wrap #about-title:hover {
      color: #DDD; }
  #about-wrap .about-panel {
    left: 0;
    opacity: 0;
    color: #fff;
    z-index: -1;
    width: 100%;
    bottom: 70px;
    padding: 0 15px;
    max-width: 500px;
    line-height: 1.3rem;
    position: absolute;
    pointer-events: none;
    text-shadow: 1px 1px 3px #000, -1px 0px 3px #000; }
    @media only screen and (min-width: 768px) {
      #about-wrap .about-panel {
        padding: 0 20px; } }
  #about-wrap.font1 .about-panel {
    font-size: 0.85rem; }
  #about-wrap.font2 .about-panel {
    font-size: 1.3rem; }
  #about-wrap.font3 .about-panel {
    font-size: 1.2rem; }
  #about-wrap.font6 .about-panel {
    font-size: 1.4rem; }
  #about-wrap #social-icons-wrap {
    left: 0;
    opacity: 0;
    width: 100%;
    bottom: 350px;
    position: absolute;
    padding-left: 10px;
    pointer-events: none; }
    @media only screen and (min-width: 640px) {
      #about-wrap #social-icons-wrap {
        left: 125px;
        bottom: 5px;
        height: 35px;
        position: absolute; } }
    #about-wrap #social-icons-wrap a {
      text-decoration: none; }
    #about-wrap #social-icons-wrap #av-social,
    #about-wrap #social-icons-wrap #lux-social {
      cursor: pointer;
      position: relative;
      margin-bottom: 20px; }
      @media only screen and (min-width: 640px) {
        #about-wrap #social-icons-wrap #av-social,
        #about-wrap #social-icons-wrap #lux-social {
          position: absolute;
          margin-bottom: 0px; } }
      #about-wrap #social-icons-wrap #av-social a,
      #about-wrap #social-icons-wrap #lux-social a {
        text-decoration: none; }
    #about-wrap #social-icons-wrap .avatar {
      width: 35px;
      height: 35px;
      display: block;
      position: relative;
      border-radius: 40px; }
      #about-wrap #social-icons-wrap .avatar:after {
        text-shadow: 1px 1px 3px #000, -1px -1px 3px #000, 1px -1px 3px #000, -1px 1px 3px #000;
        position: relative;
        line-height: 40px;
        left: 42px;
        color: #fff; }
    #about-wrap #social-icons-wrap #social-nav-icons {
      top: 10px;
      left: 50%;
      opacity: 0;
      width: 250px;
      display: none;
      min-width: 250px;
      position: absolute;
      margin-left: -125px;
      pointer-events: none; }
      @media only screen and (min-width: 768px) {
        #about-wrap #social-icons-wrap #social-nav-icons {
          top: auto;
          left: 130px;
          bottom: 6px;
          width: auto;
          margin-left: 0;
          min-width: 365px; } }
      #about-wrap #social-icons-wrap #social-nav-icons li {
        padding: 0;
        width: 100%;
        width: 35px;
        height: 35px;
        position: relative;
        margin: 25px 0 0 17px;
        display: inline-block;
        box-sizing: border-box; }
        @media only screen and (min-width: 768px) {
          #about-wrap #social-icons-wrap #social-nav-icons li {
            margin: 0 0 0 5px; }
            #about-wrap #social-icons-wrap #social-nav-icons li:last-child {
              margin-right: 0px; } }
        #about-wrap #social-icons-wrap #social-nav-icons li .icon-link {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
        #about-wrap #social-icons-wrap #social-nav-icons li svg {
          position: absolute;
          top: 50%;
          left: 50%;
          margin: 0;
          fill: #FFF;
          padding: 0;
          width: 100%;
          height: 100%;
          stroke: #000;
          stroke-width: 0.1px;
          stroke-opacity: 0.5;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -webkit-transform: translate(-50%, -50%); }
  #about-wrap #av-social {
    left: 0px; }
    #about-wrap #av-social .avatar {
      background: url("../img/avatar-ally.jpg") 0 0/contain no-repeat; }
      #about-wrap #av-social .avatar:after {
        content: 'AllyMatcha'; }
      #about-wrap #av-social .avatar:hover:after {
        content: '(Saintess)'; }
  #about-wrap #lux-social {
    left: 0; }
    @media only screen and (min-width: 640px) {
      #about-wrap #lux-social {
        left: 150px; } }
    #about-wrap #lux-social .avatar {
      background: url("../img/avatar-lux.jpg") 0 0/contain no-repeat; }
      #about-wrap #lux-social .avatar:after {
        content: 'Lux.Capacitor'; }
      #about-wrap #lux-social .avatar:hover:after {
        content: '(Developer)'; }
  @media only screen and (min-width: 640px) {
    #about-wrap.font1 #social-icons-wrap {
      left: 165px;
      bottom: 6px; }
      #about-wrap.font1 #social-icons-wrap .avatar:after {
        line-height: 38px;
        font-size: 12px; }
    #about-wrap.font2 #social-icons-wrap {
      left: 110px;
      bottom: 8px; }
    #about-wrap.font3 #social-icons-wrap .avatar:after {
      line-height: 35px; }
    #about-wrap.font4 #social-icons-wrap {
      left: 136px;
      bottom: 7px; }
      #about-wrap.font4 #social-icons-wrap #lux-social {
        left: 160px; }
    #about-wrap.font5 #social-icons-wrap {
      left: 145px;
      bottom: 4px; }
      #about-wrap.font5 #social-icons-wrap .avatar:after {
        line-height: 35px; }
      #about-wrap.font5 #social-icons-wrap #lux-social {
        left: 160px; }
    #about-wrap.font6 #social-icons-wrap {
      left: 115px;
      bottom: 4px; }
      #about-wrap.font6 #social-icons-wrap .avatar:after {
        line-height: 37px; } }

/***************************************************************
 *
 *                 ACTIVE MENU BUTTONS
 *
 ***************************************************************/
#refresh {
  right: 10px;
  width: 50px;
  bottom: 14px;
  height: 45px;
  z-index: 10000;
  cursor: pointer;
  position: absolute;
  border-radius: 20px;
  transition: all 0.5s ease-in-out; }
  #refresh[data-spin='true'] {
    animation: heartRefresh 0.5s linear; }
  #refresh #svg-heart {
    width: 100%;
    height: 100%; }
    #refresh #svg-heart path {
      fill: #ff00d7;
      stroke: #000;
      stroke-width: 11px; }

@keyframes heartRefresh {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.5); }
  100% {
    transform: scale(1); } }

#notes {
  right: 70px;
  width: 50px;
  bottom: 10px;
  height: 50px;
  z-index: 10000;
  cursor: pointer;
  position: absolute;
  border-radius: 20px;
  transform: rotate(0deg);
  transition: all 0.5s ease-in-out; }
  #notes[data-jump='true'] {
    animation: jumpNotes 0.5s linear; }
  #notes #svg-letter {
    width: 100%;
    height: 100%;
    stroke: #000;
    stroke-width: 4px; }
    #notes #svg-letter .letter-body {
      fill: #ff00d7; }

@keyframes jumpNotes {
  0% {
    bottom: 10px;
    transform: rotate(0deg); }
  50% {
    bottom: 50px;
    transform: rotate(180deg); }
  100% {
    bottom: 10px;
    transform: rotate(360deg); } }

/***************************************************************
 *
 *                 ACTIVE MENU STATE CHANGES
 *
 ***************************************************************/
[data-menu-active='true'] #about-wrap .about-panel,
[data-menu-active='true'] #about-wrap #social-icons-wrap {
  opacity: 1;
  z-index: 10;
  pointer-events: all; }

[data-menu-active='true'] #notes-wrap {
  opacity: 0;
  pointer-events: none; }

[data-menu-active='true'] .text-wrap {
  opacity: 0;
  pointer-events: none; }
  @media only screen and (min-height: 800px) and (min-width: 640px) {
    [data-menu-active='true'] .text-wrap {
      opacity: 1;
      pointer-events: all; } }