@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,800,900|Jolly+Lodger");
@import url("https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css");
html {
  font-size: 62.5%;
  /* 10px = 1rem */
  box-sizing: border-box;
  margin: 0rem;
  padding: 0rem; }

body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  height: 100vh;
  overflow: hidden;
  margin: 0rem;
  padding: 0rem;
  background: #272533; }

*,
*:before,
*:after {
  box-sizing: inherit;
  font-family: Nunito;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5; }

header {
  color: #F5F6FF;
  text-align: center;
  padding: 2rem;
  height: auto; }
  header img {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.4rem; }

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center; }

.container {
  width: 40rem;
  height: 30rem; }

a {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  color: #6b658c;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
  padding: 0rem 0.6em; }
  a:hover {
    text-decoration: underline; }

h1 a {
  font-family: "Jolly Lodger";
  font-size: 6.5rem;
  letter-spacing: 0.4rem;
  color: #F59651;
  margin: 0rem;
  display: inline-block;
  height: auto;
  padding: inherit;
  text-transform: capitalize; }

h2 {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  color: #54506e;
  display: inline-flex;
  align-items: center;
  height: 1.6rem; }

h3 {
  font-family: "Jolly Lodger";
  font-size: 3.4rem;
  letter-spacing: 0.4rem;
  color: #F5F6FF;
  text-align: center;
  margin: 0rem 0rem 2rem; }

.thumbWrapper {
  margin-top: -12rem; }

.thumbs {
  display: flex; }
  .thumbs img {
    width: 18rem;
    height: 20rem; }
  .thumbs a {
    display: block;
    height: auto;
    border-radius: 5px;
    overflow: hidden;
    margin: 0rem 0.5rem;
    transition: box-shadow 0.12s ease-out; }
    .thumbs a:hover {
      box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
      transition: box-shadow 0.12s ease-in; }

aside {
  position: fixed;
  bottom: 2rem;
  right: 1.5rem;
  cursor: pointer; }
  aside a {
    opacity: 0.6;
    transition: opacity 0.12s ease-in; }
    aside a:focus, aside a:hover {
      opacity: 1;
      transition: opacity 0.12s ease-out; }
    aside a img {
      width: 5.8rem;
      height: 5.8rem;
      cursor: pointer; }

.shadow {
  position: relative;
  bottom: -8rem;
  z-index: -1;
  margin: auto;
  background: black;
  width: 14rem;
  height: 3rem;
  border-radius: 100%;
  animation: zoomy 2s infinite;
  animation-timing-function: ease-in-out; }

@keyframes floaty {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-4rem); } }
@keyframes zoomy {
  0%, 100% {
    transform: scale(1); }
  50% {
    transform: scale(0.8); } }
@keyframes grimmace {
  0%, 80% {
    transform: scaleY(1); }
  8% {
    transform: scaleY(1); }
  16%, 20% {
    transform: scaleY(0.6); }
  24%, 32%, 40%, 75% {
    transform: scaleY(0.7); }
  4%, 28%, 36%, 44%, 77% {
    transform: scaleY(0.9); } }
@keyframes tipsy {
  8%, 20%, 45%, 92% {
    transform: rotate(-12deg); }
  76% {
    transform: rotate(-15deg); }
  15%, 27%, 56%, 82% {
    transform: rotate(-8deg); } }
@keyframes shifty {
  0%, 21%, 50%, 71%, 100% {
    transform: translateX(0rem); }
  1%, 20% {
    transform: translateX(-1rem); }
  6% {
    transform: translateX(-0.7rem); }
  51%, 70% {
    transform: translateX(1rem); }
  56% {
    transform: translateX(0.7rem); } }
@keyframes flickerbg {
  0%, 18%, 29%, 32%, 34%, 45%, 100% {
    background-color: #431e04; }
  12%, 31%, 33% {
    background-color: #a44a09; }
  70% {
    background-color: #bc550b; } }
@keyframes flickerbr {
  0%, 18%, 29%, 32%, 34%, 45%, 100% {
    border-bottom-color: #431e04; }
  12%, 31%, 33% {
    border-bottom-color: #a44a09; }
  70% {
    border-bottom-color: #bc550b; } }
#ghost > div {
  animation: floaty 2s infinite;
  animation-timing-function: ease-in-out;
  width: auto;
  margin: 5px auto;
  position: relative; }
  #ghost > div .body {
    border-left: 1.2rem solid #dcdfff;
    border-right: 0.5rem solid #dcdfff;
    background-color: #F5F6FF;
    position: relative;
    margin: auto;
    width: 14rem;
    height: 19rem;
    border-top-right-radius: 7rem;
    border-top-left-radius: 7rem; }
    #ghost > div .body:before, #ghost > div .body:after {
      content: '';
      position: absolute;
      z-index: -2;
      top: 13rem;
      width: 4rem;
      height: 4rem;
      border-radius: 100%;
      background: #dcdfff;
      animation: floaty .3s infinite;
      animation-timing-function: ease-in-out; }
    #ghost > div .body:before {
      left: -3.2rem; }
    #ghost > div .body:after {
      right: -2.1rem;
      animation-delay: -0.1s; }
  #ghost > div .eyes {
    display: flex;
    justify-content: space-between;
    margin: 0rem auto;
    padding: 6rem 0rem 0rem;
    width: 5rem;
    height: 1.2rem;
    animation: shifty 15s infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 1s; }
    #ghost > div .eyes:before, #ghost > div .eyes:after {
      content: '';
      display: block;
      width: 1.6rem;
      height: 1.6rem;
      background: #000;
      border-radius: 100%; }
  #ghost > div .mouth {
    background: #272533;
    margin: 3rem auto 0rem;
    width: 5.5rem;
    height: 2.8rem;
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
    border-bottom-left-radius: 2.5rem;
    border-bottom-right-radius: 2.5rem;
    animation: zoomy 5s infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 1s; }
    #ghost > div .mouth:before {
      content: '';
      display: block;
      width: 1rem;
      height: 1rem;
      background: #88E471;
      margin-left: 1rem;
      border-bottom-left-radius: 0.4rem;
      border-bottom-right-radius: 0.4rem; }
  #ghost > div .feet {
    position: absolute;
    z-index: -3;
    display: flex;
    bottom: -1.2rem;
    left: -1.2rem;
    width: 14rem;
    height: 2.4rem; }
    #ghost > div .feet > *, #ghost > div .feet:before, #ghost > div .feet:after {
      content: '';
      width: 2.4rem;
      height: 2.4rem;
      background: #F5F6FF;
      border-radius: 50%;
      border-bottom: 0.4rem solid #dcdfff; }
    #ghost > div .feet:before {
      border-left: 1.2rem solid #dcdfff; }
    #ghost > div .feet:after {
      border-right: 0.5rem solid #dcdfff; }
    #ghost > div .feet *:nth-child(odd) {
      margin-top: 0.2rem; }

#skull > div {
  animation: floaty 2s infinite;
  animation-timing-function: ease-in-out;
  width: auto;
  margin: 65px auto 5px;
  position: relative; }
  #skull > div .head {
    border-left: 1.2rem solid #dcdfff;
    border-right: 0.5rem solid #dcdfff;
    background-color: #F5F6FF;
    position: relative;
    margin: auto;
    width: 18rem;
    height: 13rem;
    border-top-right-radius: 100%;
    border-top-left-radius: 16rem;
    border-bottom-right-radius: 80%;
    border-bottom-left-radius: 90%; }
  #skull > div .jaw {
    border-left: 1.2rem solid #dcdfff;
    border-right: 0.5rem solid #dcdfff;
    background-color: #F5F6FF;
    content: '';
    position: absolute;
    z-index: -1;
    width: 7.4rem;
    height: 5rem;
    bottom: -4rem;
    right: 3rem;
    border-radius: 0.5rem; }
  #skull > div .teeth {
    background-color: #272533;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 2.8rem;
    width: 4.8rem;
    margin: 1rem auto 0rem 0.3rem;
    padding: 0.2rem;
    border-radius: 0.3rem;
    animation: grimmace 12s infinite;
    animation-timing-function: ease-in;
    animation-delay: 1s; }
    #skull > div .teeth > div {
      flex: 0 0 25%;
      height: 50%;
      border: 0.2rem solid #272533;
      background-color: #F5F6FF;
      border-radius: 0.4rem; }
  #skull > div .eyes {
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: space-between;
    margin: 0rem 2rem 0rem auto;
    padding: 5rem 0rem 0rem;
    width: 10.5rem;
    height: 1.2rem;
    animation: shifty 15s infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 1s; }
    #skull > div .eyes:before, #skull > div .eyes:after {
      content: '';
      display: block;
      width: 3.4rem;
      height: 3.4rem;
      background: #272533;
      border-radius: 100%; }
  #skull > div .star {
    margin: 0rem auto 0rem -2rem;
    position: absolute;
    z-index: -1;
    display: block;
    color: red;
    width: 0px;
    height: 0px;
    border-right: 4rem solid transparent;
    border-bottom: 3rem solid #88E471;
    border-left: 4rem solid transparent;
    transform: rotate(35deg); }
    #skull > div .star:before {
      content: '';
      display: block;
      border-bottom: 3rem solid #88E471;
      border-left: 1.1rem solid transparent;
      border-right: 1.1rem solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -1.8rem;
      left: -2.4rem;
      transform: rotate(-35deg); }
    #skull > div .star:after {
      content: '';
      position: absolute;
      display: block;
      color: red;
      top: 2.8px;
      left: -4rem;
      width: 0px;
      height: 0px;
      border-right: 4rem solid transparent;
      border-bottom: 3rem solid #88E471;
      border-left: 4rem solid transparent;
      transform: rotate(-70deg); }
  #skull > div .nose {
    display: relative;
    z-index: 999;
    display: flex;
    justify-content: center;
    margin: 0rem -2.5rem 0rem auto;
    padding: 2.6rem 0rem 0rem; }
    #skull > div .nose:after {
      content: '';
      display: block;
      border-left: 1rem solid transparent;
      border-right: 1rem solid transparent;
      border-bottom: 2.8rem solid #272533;
      border-radius: 1rem;
      transform: rotate(-4deg); }
  #skull > div .hat {
    position: relative;
    z-index: 1000;
    width: 16rem;
    margin: -1.8rem auto -2rem 10.6rem;
    background-color: none;
    border-left: 0.9rem solid transparent;
    border-right: 0.9rem solid transparent;
    border-bottom: 2rem solid #AE4BC7;
    border-radius: 0.8rem;
    transform: rotate(-8deg);
    animation: tipsy 12s infinite;
    animation-timing-function: ease; }
    #skull > div .hat:before {
      content: '';
      display: block;
      position: absolute;
      top: -13rem;
      left: 1.4rem;
      border-left: 4rem solid transparent;
      border-right: 7rem solid transparent;
      border-bottom: 14rem solid #AE4BC7;
      border-radius: 1rem;
      transform: rotate(-2deg); }
    #skull > div .hat:after {
      content: '';
      display: block;
      position: absolute;
      width: 11rem;
      top: -1rem;
      left: 1.5rem;
      border-left: 0.23rem solid transparent;
      border-right: 0.4rem solid transparent;
      border-bottom: 1rem solid #F59651; }

#pumpkin > div {
  width: auto;
  margin: 5px auto;
  position: relative;
  animation: floaty 2s infinite;
  animation-timing-function: ease-in-out; }
  #pumpkin > div .body {
    position: relative;
    margin: auto;
    width: 30rem;
    height: 21.5rem;
    border-left: 1.2rem solid #f37c26;
    border-right: 0.5rem solid #f37c26;
    background-color: #F59651;
    border-top-right-radius: 8.5rem;
    border-top-left-radius: 8.5rem;
    border-bottom-right-radius: 11.5rem;
    border-bottom-left-radius: 11.5rem; }
    #pumpkin > div .body .ridges {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      width: 24rem;
      height: 100%;
      border-left: 1.2rem solid #f37c26;
      border-right: 0.5rem solid #f37c26;
      background-color: #F59651;
      border-top-right-radius: 75%;
      border-top-left-radius: 75%;
      border-bottom-right-radius: 100%;
      border-bottom-left-radius: 100%; }
    #pumpkin > div .body .ridges:after {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 21;
      width: 13rem;
      height: 100%;
      border-left: 1.2rem solid #f37c26;
      border-right: 0.5rem solid #f37c26;
      border-top-right-radius: 80%;
      border-top-left-radius: 80%;
      border-bottom-right-radius: 100%;
      border-bottom-left-radius: 100%; }
  #pumpkin > div .eyes {
    position: relative;
    z-index: 22;
    display: flex;
    justify-content: space-between;
    margin: 0rem auto;
    padding: 5.4rem 0rem 0rem;
    width: 16rem;
    height: 8.8rem;
    transform: rotateZ(-2deg); }
    #pumpkin > div .eyes:before, #pumpkin > div .eyes:after {
      content: "";
      display: block;
      width: 2rem;
      height: 2.8rem;
      border-radius: 20%;
      border-bottom: 2.8rem solid #431e04;
      border-left: 2.3rem solid transparent;
      border-right: 2.3rem solid transparent;
      animation: flickerbr 16s infinite;
      animation-timing-function: ease-in;
      animation-delay: 1s; }
  #pumpkin > div .nose {
    position: relative;
    z-index: 23;
    width: 1.6rem;
    height: 1.8rem;
    border-radius: 100%;
    margin: auto;
    transform: rotateZ(-5deg);
    border-bottom: 2.2rem solid #431e04;
    border-left: 1.4rem solid transparent;
    border-right: 1.4rem solid transparent;
    animation: flickerbr 16s infinite;
    animation-timing-function: ease-in;
    animation-delay: 1s; }
  #pumpkin > div .mouth {
    position: relative;
    z-index: 23;
    background-color: #431e04;
    margin: 2.3rem auto 0rem;
    width: 13.5rem;
    height: 4.4rem;
    border-bottom-left-radius: 13.5rem;
    border-bottom-right-radius: 13.5rem;
    transform: rotate(3deg);
    animation: flickerbg 16s infinite;
    animation-timing-function: ease-in;
    animation-delay: 1s; }
    #pumpkin > div .mouth:before {
      position: relative;
      left: 1.6rem;
      top: -0.1rem;
      content: "";
      display: block;
      width: 1.8rem;
      height: 1.4rem;
      background: #F59651;
      margin-left: 1rem;
      border-bottom-left-radius: 0.2rem;
      border-bottom-right-radius: 0.2rem; }
    #pumpkin > div .mouth:after {
      content: "";
      display: block;
      position: relative;
      right: -7.5rem;
      bottom: -1.8rem;
      width: 2rem;
      height: 1.4rem;
      margin-left: 1rem;
      border-top-left-radius: 0.2rem;
      border-top-right-radius: 0.2rem;
      background: #F59651; }
  #pumpkin > div .stem-shadow {
    position: absolute;
    z-index: 29;
    top: -0.17rem;
    left: 49.8%;
    width: 4.2rem;
    height: 1.8rem;
    transform: rotateZ(-18deg) skew(15deg, 18deg) translateX(-50%);
    background: #f27317;
    border-bottom-right-radius: 1.5rem;
    border-bottom-left-radius: 1rem; }
  #pumpkin > div .stem {
    position: absolute;
    z-index: 30;
    top: -4.4rem;
    left: 45%;
    width: 3.7rem;
    height: 5.8rem;
    transform: rotateZ(-19deg) skew(15deg, 18deg) translateX(-50%);
    border-top-right-radius: 20rem;
    border-top-left-radius: 8.5rem;
    border-bottom-right-radius: 8rem;
    border-bottom-left-radius: 8rem;
    border-left: 0.9rem solid #4bd629;
    border-right: 0.5rem solid #4bd629;
    background: #88E471; }

/*# sourceMappingURL=style.css.map */