@font-face {
  font-family: pixles;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/04B_03__.TTF);
}
.releasedHeader .pixelsTop::before, .followButton .pixelsTop::before, .releasedHeader .pixelsTop::after, .followButton .pixelsTop::after, .releasedHeader .pixelsBottom::after, .followButton .pixelsBottom::after, .achievementsButton .pixelsTop::before, .achievementsButton .pixelsTop::after, .achievementsButton .pixelsBottom::after, .research_modal .item.researched .research_button .pixelsTop::before, .research_modal .item.researched .research_button .pixelsTop::after, .research_modal .item.researched .research_button .pixelsBottom::after, .research_modal .item.unavailable .research_button .pixelsTop::before, .research_modal .item.unavailable .research_button .pixelsTop::after, .research_modal .item.unavailable .research_button .pixelsBottom::after, .researchButton_counter .pixelsTop::before, .researchButton .pixelsTop::before, .researchButton_counter .pixelsTop::after, .researchButton .pixelsTop::after, .researchButton_counter .pixelsBottom::after, .researchButton .pixelsBottom::after, .followers .pixelsTop::before, .followers .pixelsTop::after, .followers .pixelsBottom::after, .released_pen__bottom .pixelsTop::before, .released_pen__top .pixelsTop::before, .pen_html .pixelsTop::before, .pen_css .pixelsTop::before, .pen_js .pixelsTop::before, .pen_design .pixelsTop::before, .releasedEmpty .pixelsTop::before, .pip .pixelsTop::before, .mystats .pixelsTop::before, .pen .pixelsTop::before, .make .pixelsTop::before, .complete_modal .pixelsTop::before, .research_modal .pixelsTop::before, .featured_modal .pixelsTop::before, .intro_modal .pixelsTop::before, .name_modal .pixelsTop::before, .endGame .pixelsTop::before, .researchProgress .pixelsTop::before, .username .pixelsTop::before, .startMashing .pixelsTop::before, .auto .pixelsTop::before, .released_pen__bottom .pixelsTop::after, .released_pen__top .pixelsTop::after, .pen_html .pixelsTop::after, .pen_css .pixelsTop::after, .pen_js .pixelsTop::after, .pen_design .pixelsTop::after, .releasedEmpty .pixelsTop::after, .pip .pixelsTop::after, .mystats .pixelsTop::after, .pen .pixelsTop::after, .make .pixelsTop::after, .complete_modal .pixelsTop::after, .research_modal .pixelsTop::after, .featured_modal .pixelsTop::after, .intro_modal .pixelsTop::after, .name_modal .pixelsTop::after, .endGame .pixelsTop::after, .researchProgress .pixelsTop::after, .username .pixelsTop::after, .startMashing .pixelsTop::after, .auto .pixelsTop::after, .released_pen__bottom .pixelsBottom::after, .released_pen__top .pixelsBottom::after, .pen_html .pixelsBottom::after, .pen_css .pixelsBottom::after, .pen_js .pixelsBottom::after, .pen_design .pixelsBottom::after, .releasedEmpty .pixelsBottom::after, .pip .pixelsBottom::after, .mystats .pixelsBottom::after, .pen .pixelsBottom::after, .make .pixelsBottom::after, .complete_modal .pixelsBottom::after, .research_modal .pixelsBottom::after, .featured_modal .pixelsBottom::after, .intro_modal .pixelsBottom::after, .name_modal .pixelsBottom::after, .endGame .pixelsBottom::after, .researchProgress .pixelsBottom::after, .username .pixelsBottom::after, .startMashing .pixelsBottom::after, .auto .pixelsBottom::after {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
}

.releasedHeader .pixelsBottom::before, .followButton .pixelsBottom::before, .achievementsButton .pixelsBottom::before, .research_modal .item.researched .research_button .pixelsBottom::before, .research_modal .item.unavailable .research_button .pixelsBottom::before, .researchButton_counter .pixelsBottom::before, .researchButton .pixelsBottom::before, .followers .pixelsBottom::before, .released_pen__bottom .pixelsBottom::before, .released_pen__top .pixelsBottom::before, .pen_html .pixelsBottom::before, .pen_css .pixelsBottom::before, .pen_js .pixelsBottom::before, .pen_design .pixelsBottom::before, .releasedEmpty .pixelsBottom::before, .pip .pixelsBottom::before, .mystats .pixelsBottom::before, .pen .pixelsBottom::before, .make .pixelsBottom::before, .complete_modal .pixelsBottom::before, .research_modal .pixelsBottom::before, .featured_modal .pixelsBottom::before, .intro_modal .pixelsBottom::before, .name_modal .pixelsBottom::before, .endGame .pixelsBottom::before, .researchProgress .pixelsBottom::before, .username .pixelsBottom::before, .startMashing .pixelsBottom::before, .auto .pixelsBottom::before {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
}

.released_pen__bottom, .released_pen__top, .pen_html, .pen_css, .pen_js, .pen_design, .releasedEmpty, .pip, .mystats, .pen, .make, .complete_modal, .research_modal, .featured_modal, .intro_modal, .name_modal, .endGame, .researchProgress, .username, .startMashing, .auto {
  background: white;
  box-shadow: 0px 3px #e7e7e7, 0px -3px white, 3px 0px white, -3px 0px white, 0px -6px #b6a695, 0px 6px #b6a695, 6px 0px #b6a695, -6px 0px #b6a695, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}
.released_pen__bottom .pixelsBottom, .released_pen__top .pixelsBottom, .pen_html .pixelsBottom, .pen_css .pixelsBottom, .pen_js .pixelsBottom, .pen_design .pixelsBottom, .releasedEmpty .pixelsBottom, .pip .pixelsBottom, .mystats .pixelsBottom, .pen .pixelsBottom, .make .pixelsBottom, .complete_modal .pixelsBottom, .research_modal .pixelsBottom, .featured_modal .pixelsBottom, .intro_modal .pixelsBottom, .name_modal .pixelsBottom, .endGame .pixelsBottom, .researchProgress .pixelsBottom, .username .pixelsBottom, .startMashing .pixelsBottom, .auto .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}
.released_pen__bottom .pixelsBottom::after, .released_pen__top .pixelsBottom::after, .pen_html .pixelsBottom::after, .pen_css .pixelsBottom::after, .pen_js .pixelsBottom::after, .pen_design .pixelsBottom::after, .releasedEmpty .pixelsBottom::after, .pip .pixelsBottom::after, .mystats .pixelsBottom::after, .pen .pixelsBottom::after, .make .pixelsBottom::after, .complete_modal .pixelsBottom::after, .research_modal .pixelsBottom::after, .featured_modal .pixelsBottom::after, .intro_modal .pixelsBottom::after, .name_modal .pixelsBottom::after, .endGame .pixelsBottom::after, .researchProgress .pixelsBottom::after, .username .pixelsBottom::after, .startMashing .pixelsBottom::after, .auto .pixelsBottom::after {
  right: 3px;
  top: -3px;
  background: #e7e7e7;
  box-shadow: 0px 3px #b6a695, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}
.released_pen__bottom .pixelsBottom::before, .released_pen__top .pixelsBottom::before, .pen_html .pixelsBottom::before, .pen_css .pixelsBottom::before, .pen_js .pixelsBottom::before, .pen_design .pixelsBottom::before, .releasedEmpty .pixelsBottom::before, .pip .pixelsBottom::before, .mystats .pixelsBottom::before, .pen .pixelsBottom::before, .make .pixelsBottom::before, .complete_modal .pixelsBottom::before, .research_modal .pixelsBottom::before, .featured_modal .pixelsBottom::before, .intro_modal .pixelsBottom::before, .name_modal .pixelsBottom::before, .endGame .pixelsBottom::before, .researchProgress .pixelsBottom::before, .username .pixelsBottom::before, .startMashing .pixelsBottom::before, .auto .pixelsBottom::before {
  left: 3px;
  top: -3px;
  background: #e7e7e7;
  box-shadow: 0px 3px #b6a695, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}
.released_pen__bottom .pixelsTop, .released_pen__top .pixelsTop, .pen_html .pixelsTop, .pen_css .pixelsTop, .pen_js .pixelsTop, .pen_design .pixelsTop, .releasedEmpty .pixelsTop, .pip .pixelsTop, .mystats .pixelsTop, .pen .pixelsTop, .make .pixelsTop, .complete_modal .pixelsTop, .research_modal .pixelsTop, .featured_modal .pixelsTop, .intro_modal .pixelsTop, .name_modal .pixelsTop, .endGame .pixelsTop, .researchProgress .pixelsTop, .username .pixelsTop, .startMashing .pixelsTop, .auto .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}
.released_pen__bottom .pixelsTop::after, .released_pen__top .pixelsTop::after, .pen_html .pixelsTop::after, .pen_css .pixelsTop::after, .pen_js .pixelsTop::after, .pen_design .pixelsTop::after, .releasedEmpty .pixelsTop::after, .pip .pixelsTop::after, .mystats .pixelsTop::after, .pen .pixelsTop::after, .make .pixelsTop::after, .complete_modal .pixelsTop::after, .research_modal .pixelsTop::after, .featured_modal .pixelsTop::after, .intro_modal .pixelsTop::after, .name_modal .pixelsTop::after, .endGame .pixelsTop::after, .researchProgress .pixelsTop::after, .username .pixelsTop::after, .startMashing .pixelsTop::after, .auto .pixelsTop::after {
  right: 3px;
  background: #b6a695;
}
.released_pen__bottom .pixelsTop::before, .released_pen__top .pixelsTop::before, .pen_html .pixelsTop::before, .pen_css .pixelsTop::before, .pen_js .pixelsTop::before, .pen_design .pixelsTop::before, .releasedEmpty .pixelsTop::before, .pip .pixelsTop::before, .mystats .pixelsTop::before, .pen .pixelsTop::before, .make .pixelsTop::before, .complete_modal .pixelsTop::before, .research_modal .pixelsTop::before, .featured_modal .pixelsTop::before, .intro_modal .pixelsTop::before, .name_modal .pixelsTop::before, .endGame .pixelsTop::before, .researchProgress .pixelsTop::before, .username .pixelsTop::before, .startMashing .pixelsTop::before, .auto .pixelsTop::before {
  left: 3px;
  background: #b6a695;
}

.followers {
  background: #fcab0b;
  box-shadow: 0px 3px #fdbc3d, 0px -3px #fcab0b, 3px 0px #fcab0b, -3px 0px #fcab0b, 0px -6px #e8861c, 0px 6px #e8861c, 6px 0px #e8861c, -6px 0px #e8861c, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}
.followers .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}
.followers .pixelsBottom::after {
  right: 3px;
  top: -3px;
  background: #fdbc3d;
  box-shadow: 0px 3px #e8861c, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}
.followers .pixelsBottom::before {
  left: 3px;
  top: -3px;
  background: #fdbc3d;
  box-shadow: 0px 3px #e8861c, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}
.followers .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}
.followers .pixelsTop::after {
  right: 3px;
  background: #e8861c;
}
.followers .pixelsTop::before {
  left: 3px;
  background: #e8861c;
}

.complete_modal .release, .research_modal .research_button, .featured_modal .awesome, .intro_modal .go, .name_modal .next, .endGame .restart, .researchButton_counter, .researchButton {
  background: #a5da60;
  box-shadow: 0px 3px #c4ed8e, 0px -3px #a5da60, 3px 0px #a5da60, -3px 0px #a5da60, 0px -6px #89b74c, 0px 6px #89b74c, 6px 0px #89b74c, -6px 0px #89b74c, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}
.complete_modal .release .pixelsBottom, .research_modal .research_button .pixelsBottom, .featured_modal .awesome .pixelsBottom, .intro_modal .go .pixelsBottom, .name_modal .next .pixelsBottom, .endGame .restart .pixelsBottom, .researchButton_counter .pixelsBottom, .researchButton .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}
.complete_modal .release .pixelsBottom::after, .research_modal .research_button .pixelsBottom::after, .featured_modal .awesome .pixelsBottom::after, .intro_modal .go .pixelsBottom::after, .name_modal .next .pixelsBottom::after, .endGame .restart .pixelsBottom::after, .researchButton_counter .pixelsBottom::after, .researchButton .pixelsBottom::after {
  right: 3px;
  top: -3px;
  background: #c4ed8e;
  box-shadow: 0px 3px #89b74c, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}
.complete_modal .release .pixelsBottom::before, .research_modal .research_button .pixelsBottom::before, .featured_modal .awesome .pixelsBottom::before, .intro_modal .go .pixelsBottom::before, .name_modal .next .pixelsBottom::before, .endGame .restart .pixelsBottom::before, .researchButton_counter .pixelsBottom::before, .researchButton .pixelsBottom::before {
  left: 3px;
  top: -3px;
  background: #c4ed8e;
  box-shadow: 0px 3px #89b74c, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}
.complete_modal .release .pixelsTop, .research_modal .research_button .pixelsTop, .featured_modal .awesome .pixelsTop, .intro_modal .go .pixelsTop, .name_modal .next .pixelsTop, .endGame .restart .pixelsTop, .researchButton_counter .pixelsTop, .researchButton .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}
.complete_modal .release .pixelsTop::after, .research_modal .research_button .pixelsTop::after, .featured_modal .awesome .pixelsTop::after, .intro_modal .go .pixelsTop::after, .name_modal .next .pixelsTop::after, .endGame .restart .pixelsTop::after, .researchButton_counter .pixelsTop::after, .researchButton .pixelsTop::after {
  right: 3px;
  background: #89b74c;
}
.complete_modal .release .pixelsTop::before, .research_modal .research_button .pixelsTop::before, .featured_modal .awesome .pixelsTop::before, .intro_modal .go .pixelsTop::before, .name_modal .next .pixelsTop::before, .endGame .restart .pixelsTop::before, .researchButton_counter .pixelsTop::before, .researchButton .pixelsTop::before {
  left: 3px;
  background: #89b74c;
}

.complete_modal .scrap, .research_modal .item.unavailable .research_button, .research_modal .close {
  background: #df644c;
  box-shadow: 0px 3px #ea7f6a, 0px -3px #df644c, 3px 0px #df644c, -3px 0px #df644c, 0px -6px #ba513d, 0px 6px #ba513d, 6px 0px #ba513d, -6px 0px #ba513d, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}
.complete_modal .scrap .pixelsBottom, .research_modal .item.unavailable .research_button .pixelsBottom, .research_modal .close .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}
.complete_modal .scrap .pixelsBottom::after, .research_modal .item.unavailable .research_button .pixelsBottom::after, .research_modal .close .pixelsBottom::after {
  right: 3px;
  top: -3px;
  background: #ea7f6a;
  box-shadow: 0px 3px #ba513d, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}
.complete_modal .scrap .pixelsBottom::before, .research_modal .item.unavailable .research_button .pixelsBottom::before, .research_modal .close .pixelsBottom::before {
  left: 3px;
  top: -3px;
  background: #ea7f6a;
  box-shadow: 0px 3px #ba513d, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}
.complete_modal .scrap .pixelsTop, .research_modal .item.unavailable .research_button .pixelsTop, .research_modal .close .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}
.complete_modal .scrap .pixelsTop::after, .research_modal .item.unavailable .research_button .pixelsTop::after, .research_modal .close .pixelsTop::after {
  right: 3px;
  background: #ba513d;
}
.complete_modal .scrap .pixelsTop::before, .research_modal .item.unavailable .research_button .pixelsTop::before, .research_modal .close .pixelsTop::before {
  left: 3px;
  background: #ba513d;
}

.research_modal .item.researched .research_button {
  background: #d1d1d1;
  box-shadow: 0px 3px #e0e0e0, 0px -3px #d1d1d1, 3px 0px #d1d1d1, -3px 0px #d1d1d1, 0px -6px #c4c4c4, 0px 6px #c4c4c4, 6px 0px #c4c4c4, -6px 0px #c4c4c4, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}
.research_modal .item.researched .research_button .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}
.research_modal .item.researched .research_button .pixelsBottom::after {
  right: 3px;
  top: -3px;
  background: #e0e0e0;
  box-shadow: 0px 3px #c4c4c4, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}
.research_modal .item.researched .research_button .pixelsBottom::before {
  left: 3px;
  top: -3px;
  background: #e0e0e0;
  box-shadow: 0px 3px #c4c4c4, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}
.research_modal .item.researched .research_button .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}
.research_modal .item.researched .research_button .pixelsTop::after {
  right: 3px;
  background: #c4c4c4;
}
.research_modal .item.researched .research_button .pixelsTop::before {
  left: 3px;
  background: #c4c4c4;
}

.achievementsButton {
  background: #c557e1;
  box-shadow: 0px 3px #d77ded, 0px -3px #c557e1, 3px 0px #c557e1, -3px 0px #c557e1, 0px -6px #a848c0, 0px 6px #a848c0, 6px 0px #a848c0, -6px 0px #a848c0, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}
.achievementsButton .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}
.achievementsButton .pixelsBottom::after {
  right: 3px;
  top: -3px;
  background: #d77ded;
  box-shadow: 0px 3px #a848c0, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}
.achievementsButton .pixelsBottom::before {
  left: 3px;
  top: -3px;
  background: #d77ded;
  box-shadow: 0px 3px #a848c0, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}
.achievementsButton .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}
.achievementsButton .pixelsTop::after {
  right: 3px;
  background: #a848c0;
}
.achievementsButton .pixelsTop::before {
  left: 3px;
  background: #a848c0;
}

.releasedHeader, .followButton {
  background: #1e4b56;
  box-shadow: 0px 3px #315962, 0px -3px #1e4b56, 3px 0px #1e4b56, -3px 0px #1e4b56, 0px -6px #16414c, 0px 6px #16414c, 6px 0px #16414c, -6px 0px #16414c, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}
.releasedHeader .pixelsBottom, .followButton .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}
.releasedHeader .pixelsBottom::after, .followButton .pixelsBottom::after {
  right: 3px;
  top: -3px;
  background: #315962;
  box-shadow: 0px 3px #16414c, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}
.releasedHeader .pixelsBottom::before, .followButton .pixelsBottom::before {
  left: 3px;
  top: -3px;
  background: #315962;
  box-shadow: 0px 3px #16414c, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}
.releasedHeader .pixelsTop, .followButton .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}
.releasedHeader .pixelsTop::after, .followButton .pixelsTop::after {
  right: 3px;
  background: #16414c;
}
.releasedHeader .pixelsTop::before, .followButton .pixelsTop::before {
  left: 3px;
  background: #16414c;
}

.endGame .share {
  background: #55c6e2;
  box-shadow: 0px 3px #94e5f9, 0px -3px #55c6e2, 3px 0px #55c6e2, -3px 0px #55c6e2, 0px -6px #439db3, 0px 6px #439db3, 6px 0px #439db3, -6px 0px #439db3, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}
.endGame .share .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}
.endGame .share .pixelsBottom::after {
  right: 3px;
  top: -3px;
  background: #94e5f9;
  box-shadow: 0px 3px #439db3, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}
.endGame .share .pixelsBottom::before {
  left: 3px;
  top: -3px;
  background: #94e5f9;
  box-shadow: 0px 3px #439db3, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}
.endGame .share .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}
.endGame .share .pixelsTop::after {
  right: 3px;
  background: #439db3;
}
.endGame .share .pixelsTop::before {
  left: 3px;
  background: #439db3;
}

.complete_modal .release, .complete_modal .scrap, .research_modal .research_button, .research_modal .close, .featured_modal .awesome, .intro_modal .go, .name_modal .next, .endGame .share, .endGame .restart, .followButton, .achievementsButton, .researchButton_counter, .researchButton {
  position: relative;
}
.complete_modal .release:active, .complete_modal .scrap:active, .research_modal .research_button:active, .research_modal .close:active, .featured_modal .awesome:active, .intro_modal .go:active, .name_modal .next:active, .endGame .share:active, .endGame .restart:active, .followButton:active, .achievementsButton:active, .researchButton_counter:active, .researchButton:active {
  transform: translateY(2px);
}
.complete_modal .release::after, .complete_modal .scrap::after, .research_modal .research_button::after, .research_modal .close::after, .featured_modal .awesome::after, .intro_modal .go::after, .name_modal .next::after, .endGame .share::after, .endGame .restart::after, .followButton::after, .achievementsButton::after, .researchButton_counter::after, .researchButton::after {
  content: "";
  display: block;
  width: 30px;
  -webkit-filter: blur(24px);
  height: 30px;
  background: rgba(255, 255, 255, 0.3);
  position: absolute;
  height: 50px;
  transform: rotate(-30deg) skewy(31deg);
  color: white;
  top: -5px;
  right: 100%;
  transition: all 0.4s;
}
.complete_modal .release:hover::after, .complete_modal .scrap:hover::after, .research_modal .research_button:hover::after, .research_modal .close:hover::after, .featured_modal .awesome:hover::after, .intro_modal .go:hover::after, .name_modal .next:hover::after, .endGame .share:hover::after, .endGame .restart:hover::after, .followButton:hover::after, .achievementsButton:hover::after, .researchButton_counter:hover::after, .researchButton:hover::after {
  right: 0px;
}

.magic {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 100%;
  height: 100%;
  background: black;
  display: none;
}
.magic img {
  width: 100%;
}

.grain {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
}

.swatch {
  box-shadow: inset 3px 0 rgba(0, 0, 0, 0.1), inset -3px 0 rgba(255, 255, 255, 0.3) !important;
  width: 12px !important;
  height: 11px;
}
.swatch.html {
  background: #f1753f;
}
.swatch.css {
  background: #2965f1;
}
.swatch.js {
  background: #f3e273;
}
.swatch.design {
  background: #9d28e0;
}

/* Let's get this party started */
::-webkit-scrollbar {
  width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #cabcae;
}

.auto {
  text-align: left;
  position: absolute;
  bottom: -12px;
  height: 6px;
  z-index: 2;
  line-height: 7px;
  left: 0;
  right: -480px;
  margin: auto;
  cursor: pointer;
  width: 80px;
}
.auto img {
  width: 15px;
  position: absolute;
  right: 6px;
  top: 7px;
}
.auto.off .tick {
  display: none;
}
.auto.off .cross {
  display: block;
}
.auto.on .tick {
  display: block;
}
.auto.on .cross {
  display: none;
}

.startMashing {
  text-align: center;
  position: absolute;
  bottom: 40px;
  height: 160px;
  z-index: 2;
  line-height: 160px;
  left: 0;
  right: 0;
  margin: auto;
  width: 500px;
}
.startMashing h2 {
  position: relative;
  top: -13px;
}
.startMashing h2 img {
  width: 20px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 100px;
  -webkit-animation: key 0.3s linear infinite;
          animation: key 0.3s linear infinite;
}
@-webkit-keyframes key {
  from {
    top: 100px;
  }
  to {
    top: 102px;
  }
}
@keyframes key {
  from {
    top: 100px;
  }
  to {
    top: 102px;
  }
}

.researchButton {
  width: 203px;
  color: #476323;
  float: left;
  clear: left;
  margin-top: 27px;
  cursor: pointer;
}
.researchButton_counter {
  right: -20px;
  width: 30px;
  color: #476323;
  float: left;
  text-align: center;
  clear: left;
  margin-top: 27px;
  top: -55px;
  height: 30px;
  line-height: 31px;
  cursor: pointer;
  padding: 0px;
  position: absolute;
  z-index: 1;
}
.researchButton img {
  width: 12px;
  position: absolute;
  top: 18px;
  right: 18px;
}

.username {
  float: left;
  padding: 8px 12px 0px 10px;
  position: relative;
  top: 30px;
}
.username img {
  width: 45px;
  position: absolute;
  left: -24px;
  top: -36px;
}

.achievementsButton {
  width: 203px;
  display: none;
  color: #75168d;
  float: left;
  clear: left;
  margin-top: 27px;
  cursor: pointer;
}
.achievementsButton img {
  width: 12px;
  position: absolute;
  top: 18px;
  right: 18px;
}

.followButton {
  width: 203px;
  color: #75168d;
  float: left;
  clear: left;
  margin-top: 27px;
  cursor: pointer;
  color: #c4ebfd;
}

.leaderboardButton {
  width: 203px;
  color: #c4ebfd;
  float: left;
  clear: left;
  margin-top: 27px;
  cursor: pointer;
  background: #1e4b56;
  box-shadow: 0px 3px #315962, 0px -3px #1e4b56, 3px 0px #1e4b56, -3px 0px #1e4b56, 0px -6px #16414c, 0px 6px #16414c, 6px 0px #16414c, -6px 0px #16414c, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
  z-index: 12;
}

.leaderboardButton .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}

.leaderboardButton .pixelsBottom::after {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  right: 3px;
  top: -3px;
  background: #315962;
  box-shadow: 0px 3px #16414c, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}

.leaderboardButton .pixelsBottom::before {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  left: 3px;
  top: -3px;
  background: #315962;
  box-shadow: 0px 3px #16414c, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}

.leaderboardButton .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}

.leaderboardButton .pixelsTop::after {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  right: 3px;
  background: #16414c;
}

.leaderboardButton .pixelsTop::before {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  left: 3px;
  background: #16414c;
}

.leaderboardButton:active {
  transform: translateY(2px);
}

.leaderboardButton::after {
  content: "";
  display: block;
  width: 30px;
  -webkit-filter: blur(24px);
  height: 30px;
  background: rgba(255, 255, 255, 0.3);
  position: absolute;
  height: 50px;
  transform: rotate(-30deg) skewy(31deg);
  color: white;
  top: -5px;
  right: 100%;
  transition: all 0.4s;
}

.leaderboardButton:hover::after {
  right: 0px;
}

.copyCAButton {
  width: 203px;
  color: #c4ebfd;
  float: left;
  clear: left;
  margin-top: 27px;
  cursor: pointer;
  background: #1e4b56;
  box-shadow: 0px 3px #315962, 0px -3px #1e4b56, 3px 0px #1e4b56, -3px 0px #1e4b56, 0px -6px #16414c, 0px 6px #16414c, 6px 0px #16414c, -6px 0px #16414c, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
  z-index: 12;
}

.copyCAButton .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}

.copyCAButton .pixelsBottom::after {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  right: 3px;
  top: -3px;
  background: #315962;
  box-shadow: 0px 3px #16414c, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}

.copyCAButton .pixelsBottom::before {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  left: 3px;
  top: -3px;
  background: #315962;
  box-shadow: 0px 3px #16414c, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}

.copyCAButton .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}

.copyCAButton .pixelsTop::after {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  right: 3px;
  background: #16414c;
}

.copyCAButton .pixelsTop::before {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  left: 3px;
  background: #16414c;
}

.copyCAButton:active {
  transform: translateY(2px);
}

.copyCAButton::after {
  content: "";
  display: block;
  width: 30px;
  -webkit-filter: blur(24px);
  height: 30px;
  background: rgba(255, 255, 255, 0.3);
  position: absolute;
  height: 50px;
  transform: rotate(-30deg) skewy(31deg);
  color: white;
  top: -5px;
  right: 100%;
  transition: all 0.4s;
}

.copyCAButton:hover::after {
  right: 0px;
}

.date {
  float: right;
  position: absolute;
  right: 40px;
  top: 10px;
}
.date img {
  width: 21px;
  position: relative;
  top: 2px;
}

.floor {
  background: #e1dac5;
  position: fixed;
  bottom: 0;
  height: 36%;
  width: 100%;
  left: 0;
  z-index: -1;
  border-top: 30px solid white;
}

.connectWalletButton {
  position: absolute;
  right: 150px;
  top: 65px;
  background: #1e4b56;
  box-shadow: 0px 3px #315962, 0px -3px #1e4b56, 3px 0px #1e4b56, -3px 0px #1e4b56, 0px -6px #16414c, 0px 6px #16414c, 6px 0px #16414c, -6px 0px #16414c, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  padding: 16px 20px;
  color: #c4ebfd;
  cursor: pointer;
  font-family: pixles;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  min-width: 140px;
  z-index: 10;
}

.connectWalletButton.disconnected {
  background: #d32f2f;
  animation: pulse 2s infinite;
  box-shadow: 0px 3px #f44336, 0px -3px #d32f2f, 3px 0px #d32f2f, -3px 0px #d32f2f, 0px -6px #b71c1c, 0px 6px #b71c1c, 6px 0px #b71c1c, -6px 0px #b71c1c, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1), 0 0 20px rgba(211, 47, 47, 0.5);
}

.connectWalletButton.connected {
  background: #2e7d32;
  box-shadow: 0px 3px #4caf50, 0px -3px #2e7d32, 3px 0px #2e7d32, -3px 0px #2e7d32, 0px -6px #1b5e20, 0px 6px #1b5e20, 6px 0px #1b5e20, -6px 0px #1b5e20, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
}

.connectWalletButton.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* Disabled states for game elements when wallet not connected */
.wallet-disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(50%);
}

/* Leaderboard button disabled states */
.leaderboardButton.disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  filter: grayscale(50%) !important;
}

/* Disable buttons when end game modal is open */
.endgame-disabled .leaderboardButton,
.endgame-disabled .connectWalletButton {
  opacity: 0.3 !important;
  pointer-events: none !important;
  filter: grayscale(70%) !important;
}

.name_modal.wallet-disabled input {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.intro_modal.wallet-disabled .go,
.name_modal.wallet-disabled .next {
  background: #d1d1d1 !important;
  box-shadow: 0px 3px #e0e0e0, 0px -3px #d1d1d1, 3px 0px #d1d1d1, -3px 0px #d1d1d1, 0px -6px #c4c4c4, 0px 6px #c4c4c4, 6px 0px #c4c4c4, -6px 0px #c4c4c4, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1) !important;
  color: #959595 !important;
  cursor: not-allowed;
}

.startMashing.wallet-disabled {
  opacity: 0.6;
}

.startMashing.wallet-disabled h2 span {
  color: #ff4444;
  font-weight: bold;
}

/* Disable other game buttons when wallet not connected */
.auto.wallet-disabled,
.researchButton.wallet-disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(50%);
}

/* Make connect wallet button more prominent when page is disabled */

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0px 3px #f44336, 0px -3px #d32f2f, 3px 0px #d32f2f, -3px 0px #d32f2f, 0px -6px #b71c1c, 0px 6px #b71c1c, 6px 0px #b71c1c, -6px 0px #b71c1c, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1), 0 0 20px rgba(211, 47, 47, 0.5);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0px 3px #f44336, 0px -3px #d32f2f, 3px 0px #d32f2f, -3px 0px #d32f2f, 0px -6px #b71c1c, 0px 6px #b71c1c, 6px 0px #b71c1c, -6px 0px #b71c1c, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1), 0 0 30px rgba(211, 47, 47, 0.8);
  }
  100% {
    transform: scale(1);
    box-shadow: 0px 3px #f44336, 0px -3px #d32f2f, 3px 0px #d32f2f, -3px 0px #d32f2f, 0px -6px #b71c1c, 0px 6px #b71c1c, 6px 0px #b71c1c, -6px 0px #b71c1c, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1), 0 0 20px rgba(211, 47, 47, 0.5);
  }
}

.connectWalletButton .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}

.connectWalletButton .pixelsBottom::after {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  right: 3px;
  top: -3px;
  background: #315962;
  box-shadow: 0px 3px #16414c, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}

.connectWalletButton .pixelsBottom::before {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  left: 3px;
  top: -3px;
  background: #315962;
  box-shadow: 0px 3px #16414c, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}

.connectWalletButton .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}

.connectWalletButton .pixelsTop::after {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  right: 3px;
  background: #16414c;
}

.connectWalletButton .pixelsTop::before {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  left: 3px;
  background: #16414c;
}

.connectWalletButton:active {
  transform: translateY(2px);
}

.connectWalletButton::after {
  content: "";
  display: block;
  width: 30px;
  -webkit-filter: blur(24px);
  height: 30px;
  background: rgba(255, 255, 255, 0.3);
  position: absolute;
  height: 50px;
  transform: rotate(-30deg) skewy(31deg);
  color: white;
  top: -5px;
  right: 100%;
  transition: all 0.4s;
}

.connectWalletButton:hover::after {
  right: 0px;
}

.options {
  position: absolute;
  right: 34px;
  top: 81px;
}
.options_bg img {
  width: 21px;
}
.options_sf img {
  width: 18px;
  margin-right: 10px;
}
.options div {
  float: left;
  transition: all 1s;
  cursor: pointer;
}

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  cursor: pointer;
  height: 100%;
  background: #675a4c;
  z-index: 3;
  opacity: 0.89;
}

/* Higher z-index overlay for leaderboard */
.overlay.leaderboard-overlay {
  z-index: 14;
}

/* Higher z-index overlay for wallet connection modal */
.overlay.wallet-overlay {
  z-index: 19;
}

.researchProgress {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  width: 200px;
  transform: translateY(-50%);
  display: none;
}
.researchProgress .bar {
  width: 100%;
  height: 6px;
  border-bottom: 3px solid #d6c9bc;
  position: relative;
}
.researchProgress .bar_inner {
  width: 0%;
  height: 6px;
  position: absolute;
  left: 0;
  background: #fcab0b;
  box-shadow: 0px 3px inset #fdbc3d;
}
.researchProgress .bar_inner.animate {
  -webkit-animation: bar 2s linear;
          animation: bar 2s linear;
}
@-webkit-keyframes bar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
@keyframes bar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.endGame {
  display: none;
  text-align: center;
  width: 600px;
  height: 250px;
  position: absolute !important;
  z-index: 3;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  padding: 40px;
  text-align: ceter;
}
.endGame .mostName,
.endGame .mostViews {
  font-weight: bold;
}
.endGame hr {
  border: none;
  width: 95%;
  border-top: 3px solid #efedea;
  margin-bottom: 30px;
  box-shadow: 0 3px rgba(0, 0, 0, 0.02);
  z-index: 2;
  position: relative;
}
.endGame h3 {
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  margin: 15px 24px 23px 24px;
}
.endGame h1 {
  font-size: 41px;
  margin-bottom: 15px;
  color: #f8ab12;
  margin-top: 19px;
}
.endGame .restart {
  color: #476323;
  position: absolute;
  bottom: -26px;
  width: 170px;
  text-align: center;
  margin: auto;
  left: 220px;
  cursor: pointer;
  right: 0;
}
.endGame .share {
  color: #1c3940;
  position: absolute;
  bottom: -26px;
  width: 170px;
  text-align: center;
  margin: auto;
  left: -240px;
  cursor: pointer;
  right: 0;
}
.endGame__header {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 282px;
  top: -87px;
}
.endGame__header p {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 71px;
  color: #c4ebfd;
  left: 4px;
}
.endGame__header img {
  width: 282px;
}

.endGame_close {
  color: #892e1f;
  cursor: pointer;
  position: absolute;
  right: -22px;
  top: -22px;
  width: 10px;
  height: 10px;
  z-index: 3;
  line-height: 11px;
  background: #df644c;
  box-shadow: 0px 3px #ea7f6a, 0px -3px #df644c, 3px 0px #df644c, -3px 0px #df644c, 0px -6px #ba513d, 0px 6px #ba513d, 6px 0px #ba513d, -6px 0px #ba513d, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}

.name_modal {
  text-align: center;
  width: 600px;
  transition: all 0.5s;
  height: 250px;
  position: absolute !important;
  z-index: 3;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  padding: 40px;
  text-align: center;
  display: none;
}
.name_modal hr {
  border: none;
  width: 95%;
  border-top: 3px solid #efedea;
  margin-bottom: -1px;
  box-shadow: 0 3px rgba(0, 0, 0, 0.02);
  z-index: 2;
  position: relative;
}
.name_modal h3 {
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  margin: 15px 24px 23px 24px;
}
.name_modal .text {
  margin: 20px 0;
}
.name_modal input {
  font-family: pixles;
  font-size: 16px;
  font-weight: normal;
  outline: none;
  text-align: center;
  padding: 19px;
  width: 360px;
  border-radius: 5px;
  color: #352c22;
  margin-top: 67px;
  border: 3px solid #f0eeeb;
}
.name_modal .next {
  color: #476323;
  position: absolute;
  bottom: -26px;
  width: 140px;
  text-align: center;
  margin: auto;
  left: 0;
  cursor: pointer;
  right: 0;
}
.name_modal__header {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 282px;
  top: -87px;
}
.name_modal__header p {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 71px;
  color: #c4ebfd;
  left: 4px;
}
.name_modal__header img {
  width: 282px;
}

.intro_modal {
  left: 200%;
  text-align: center;
  width: 600px;
  height: 250px;
  position: absolute !important;
  z-index: 3;
  transition: all 0.5s;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  padding: 40px;
  text-align: center;
}
.intro_modal hr {
  border: none;
  width: 95%;
  border-top: 3px solid #efedea;
  margin-bottom: -1px;
  box-shadow: 0 3px rgba(0, 0, 0, 0.02);
  z-index: 2;
  position: relative;
}
.intro_modal h3 {
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  margin: 15px 24px 23px 24px;
}
.intro_modal .text {
  margin: 20px 0;
}
.intro_modal .go {
  color: #476323;
  position: absolute;
  bottom: -26px;
  width: 140px;
  text-align: center;
  margin: auto;
  left: 0;
  cursor: pointer;
  right: 0;
}
.intro_modal__header {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 282px;
  top: -87px;
}
.intro_modal__header p {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 71px;
  color: #c4ebfd;
  left: 4px;
}
.intro_modal__header img {
  width: 282px;
}

.featured_modal {
  display: none;
  text-align: center;
  width: 600px;
  height: 250px;
  position: absolute !important;
  z-index: 3;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  padding: 40px;
  text-align: left;
}
.featured_modal h3 {
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  margin: 24px;
}
.featured_modal hr {
  border: none;
  border-top: 3px solid #efedea;
  margin-bottom: 40px;
}
.featured_modal__header {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 282px;
  top: -87px;
}
.featured_modal__header p {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 71px;
  color: #c4ebfd;
  left: 4px;
}
.featured_modal__header img {
  width: 282px;
}
.featured_modal .name {
  color: #29241f;
}
.featured_modal .picker {
  color: orange;
}
.featured_modal__text {
  padding-top: 15px;
}
.featured_modal .awesome {
  color: #476323;
  position: absolute;
  bottom: -26px;
  width: 140px;
  text-align: center;
  margin: auto;
  left: 0;
  cursor: pointer;
  right: 0;
}
.featured_modal__image {
  float: left;
  margin-right: 30px;
}
.featured_modal__image img {
  width: 198px;
}

.research_modal {
  transition: all 0.7s;
  width: 300px;
  height: 40px;
  display: none;
  text-align: center;
  position: absolute !important;
  z-index: 3;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}
.research_modal .hide {
  display: none;
}
.research_modal h3 {
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  margin: 40px 24px 24px 24px;
}
.research_modal hr {
  border: none;
  width: 95%;
  border-top: 3px solid #efedea;
  margin-bottom: -1px;
  box-shadow: 0 3px rgba(0, 0, 0, 0.02);
  z-index: 2;
  position: relative;
}
.research_modal__header {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 282px;
  top: -87px;
}
.research_modal__header p {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 67px;
  color: #c4ebfd;
  left: 1px;
}
.research_modal__header img {
  width: 282px;
}
.research_modal .close {
  color: #892e1f;
  cursor: pointer;
  position: absolute;
  right: -22px;
  top: -22px;
  width: 10px;
  height: 10px;
  z-index: 3;
  line-height: 11px;
}
.research_modal::after {
  position: fixed;
  bottom: 15px;
  left: 0;
  width: 98%;
  height: 40px;
  display: block;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
  content: "";
}
.research_modal__list {
  padding: 1px 20px 20px 20px;
  overflow-y: scroll;
  height: 288px;
  position: relative;
}
.research_modal .item {
  float: left;
  clear: left;
  border-top: 3px solid #f2f2f2;
  padding: 24px 0px 21px 0px;
  width: 95%;
  position: relative;
  left: 11px;
}
.research_modal .item:first-child {
  border: none;
}
.research_modal .item.unavailable .research_button {
  color: #782e1f;
}
.research_modal .item.researched::after {
  display: block;
  position: absolute;
  right: -16px;
  top: 6px;
  content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rTick.png);
}
.research_modal .item.researched .name,
.research_modal .item.researched .stat {
  opacity: 0.45;
}
.research_modal .item.researched .research_button {
  color: #959595;
}
.research_modal .sep {
  margin: 0 6px;
}
.research_modal .name {
  float: left;
}
.research_modal .green {
  color: #89b74c;
}
.research_modal .stat {
  float: left;
}
.research_modal .stat img {
  width: 6px;
  margin-left: 4px;
}
.research_modal .research_button {
  right: 0px;
  color: #476323;
  float: right;
  cursor: pointer;
  top: -6px;
  padding: 4px !important;
  float: right;
  position: absolute !important;
  top: 18px;
  width: 150px;
}
.research_modal .research_button img {
  width: 10px;
  position: relative;
  left: -4px;
}
.research_modal .research_button .cost {
  color: white;
}

.leaderboard_modal {
  transition: all 0.7s;
  width: 300px;
  height: 40px;
  display: none;
  text-align: center;
  position: absolute !important;
  z-index: 15;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  box-shadow: 0px 3px #e7e7e7, 0px -3px white, 3px 0px white, -3px 0px white, 0px -6px #b6a695, 0px 6px #b6a695, 6px 0px #b6a695, -6px 0px #b6a695, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}

.leaderboard_modal .hide {
  display: none;
}

.leaderboard_modal h3 {
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  margin: 40px 24px 24px 24px;
}

.leaderboard_modal hr {
  border: none;
  width: 95%;
  border-top: 3px solid #efedea;
  margin-bottom: -1px;
  box-shadow: 0 3px rgba(0, 0, 0, 0.02);
  z-index: 2;
  position: relative;
}

.leaderboard_modal__header {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 282px;
  top: -87px;
}

.leaderboard_modal__header p {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 67px;
  color: #c4ebfd;
  left: 1px;
}

.leaderboard_modal__header img {
  width: 282px;
}

.leaderboard_modal .close {
  color: #892e1f;
  cursor: pointer;
  position: absolute;
  right: -22px;
  top: -22px;
  width: 10px;
  height: 10px;
  z-index: 3;
  line-height: 11px;
  background: #df644c;
  box-shadow: 0px 3px #ea7f6a, 0px -3px #df644c, 3px 0px #df644c, -3px 0px #df644c, 0px -6px #ba513d, 0px 6px #ba513d, 6px 0px #ba513d, -6px 0px #ba513d, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}

.leaderboard_modal__content {
  padding: 1px 20px 20px 20px;
  height: 400px;
  position: relative;
}

.leaderboard_tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 3px solid #f2f2f2;
}

.leaderboard_tabs .tab {
  flex: 1;
  padding: 10px 15px;
  cursor: pointer;
  background: #f5f5f5;
  border: 2px solid #d6c9bc;
  margin-right: 5px;
  font-family: pixles;
  font-size: 12px;
  text-transform: uppercase;
}

.leaderboard_tabs .tab:last-child {
  margin-right: 0;
}

.leaderboard_tabs .tab.active {
  background: #a5da60;
  color: #476323;
  border-color: #89b74c;
}

.leaderboard_tabs .tab:hover {
  background: #e0e0e0;
}

.leaderboard_tabs .tab.active:hover {
  background: #c4ed8e;
}

.leaderboard_list {
  max-height: 320px;
  overflow-y: auto;
}

.leaderboard_item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 2px solid #f2f2f2;
  font-family: pixles;
  font-size: 14px;
}

.leaderboard_item:last-child {
  border-bottom: none;
}

.leaderboard_rank {
  width: 40px;
  font-weight: bold;
  color: #fcab0b;
  text-align: center;
}

.leaderboard_rank.gold {
  color: #ffd700;
}

.leaderboard_rank.silver {
  color: #c0c0c0;
}

.leaderboard_rank.bronze {
  color: #cd7f32;
}

.leaderboard_username {
  flex: 1;
  padding: 0 10px;
  font-weight: bold;
}

.leaderboard_wallet {
  font-size: 10px;
  color: #999;
  margin-left: 5px;
}

.leaderboard_score {
  width: 80px;
  text-align: right;
  font-weight: bold;
  color: #476323;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #999;
  font-style: italic;
}

.leaderboard_modal .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}

.leaderboard_modal .pixelsBottom::after {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  right: 3px;
  top: -3px;
  background: #e7e7e7;
  box-shadow: 0px 3px #b6a695, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}

.leaderboard_modal .pixelsBottom::before {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  left: 3px;
  top: -3px;
  background: #e7e7e7;
  box-shadow: 0px 3px #b6a695, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}

.leaderboard_modal .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}

.leaderboard_modal .pixelsTop::after {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  right: 3px;
  background: #b6a695;
}

.leaderboard_modal .pixelsTop::before {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  left: 3px;
  background: #b6a695;
}

.wallet_connection_modal {
  transition: all 0.7s;
  width: 300px;
  height: 40px;
  display: none;
  text-align: center;
  position: absolute !important;
  z-index: 20;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  box-shadow: 0px 3px #e7e7e7, 0px -3px white, 3px 0px white, -3px 0px white, 0px -6px #b6a695, 0px 6px #b6a695, 6px 0px #b6a695, -6px 0px #b6a695, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}

.wallet_connection_modal .hide {
  display: none;
}

.wallet_connection_modal h3 {
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  margin: 40px 24px 24px 24px;
}

.wallet_connection_modal hr {
  border: none;
  width: 95%;
  border-top: 3px solid #efedea;
  margin-bottom: -1px;
  box-shadow: 0 3px rgba(0, 0, 0, 0.02);
  z-index: 2;
  position: relative;
}

.wallet_connection_modal__header {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 282px;
  top: -87px;
}

.wallet_connection_modal__header p {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 67px;
  color: #c4ebfd;
  left: 1px;
}

.wallet_connection_modal__header img {
  width: 282px;
}

.wallet_connection_modal .close {
  color: #892e1f;
  cursor: pointer;
  position: absolute;
  right: -22px;
  top: -22px;
  width: 10px;
  height: 10px;
  z-index: 3;
  line-height: 11px;
  background: #df644c;
  box-shadow: 0px 3px #ea7f6a, 0px -3px #df644c, 3px 0px #df644c, -3px 0px #df644c, 0px -6px #ba513d, 0px 6px #ba513d, 6px 0px #ba513d, -6px 0px #ba513d, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px;
}

.wallet_connection_modal__content {
  padding: 20px;
  position: relative;
}

.wallet_prompt {
  font-size: 16px;
  margin: 20px 0 30px 0;
  text-align: center;
  line-height: 1.4;
}

.wallet_options {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}

.connect_phantom_btn,
.wallet_address_btn,
.wallet_submit_btn,
.wallet_back_btn {
  background: #a5da60;
  box-shadow: 0px 3px #c4ed8e, 0px -3px #a5da60, 3px 0px #a5da60, -3px 0px #a5da60, 0px -6px #89b74c, 0px 6px #89b74c, 6px 0px #89b74c, -6px 0px #89b74c, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 12px 20px;
  cursor: pointer;
  color: #476323;
  font-family: pixles;
  font-size: 14px;
  text-transform: uppercase;
  min-width: 120px;
}

.wallet_submit_btn,
.wallet_back_btn {
  display: inline-block;
  margin: 10px 5px 0 5px;
  min-width: 100px;
}

.wallet_back_btn {
  background: #df644c;
  box-shadow: 0px 3px #ea7f6a, 0px -3px #df644c, 3px 0px #df644c, -3px 0px #df644c, 0px -6px #ba513d, 0px 6px #ba513d, 6px 0px #ba513d, -6px 0px #ba513d, 9px 0px rgba(0, 0, 0, 0.1), 0px 9px rgba(0, 0, 0, 0.1);
  color: #892e1f;
}

.connect_phantom_btn:active,
.wallet_address_btn:active,
.wallet_submit_btn:active,
.wallet_back_btn:active {
  transform: translateY(2px);
}

.wallet_address_input {
  text-align: center;
  margin-top: 20px;
  display: none;
}

.input_label {
  font-size: 14px;
  margin-bottom: 15px;
  color: #594c3d;
}

.wallet_address_field {
  width: 100%;
  max-width: 400px;
  padding: 12px;
  font-family: pixles;
  font-size: 12px;
  border: 3px solid #d6c9bc;
  background: white;
  color: #594c3d;
  text-align: center;
  margin-bottom: 15px;
  outline: none;
}

.wallet_address_field:focus {
  border-color: #a5da60;
}

.wallet_address_field::placeholder {
  color: #999;
}

.wallet_connection_modal .pixelsBottom {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  bottom: 0;
}

.wallet_connection_modal .pixelsBottom::after {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  right: 3px;
  top: -3px;
  background: #e7e7e7;
  box-shadow: 0px 3px #b6a695, 0px 6px rgba(0, 0, 0, 0.1), 3px 3px rgba(0, 0, 0, 0.1);
}

.wallet_connection_modal .pixelsBottom::before {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  left: 3px;
  top: -3px;
  background: #e7e7e7;
  box-shadow: 0px 3px #b6a695, 0px 6px rgba(0, 0, 0, 0.1), -3px 3px rgba(0, 0, 0, 0.1);
}

.wallet_connection_modal .pixelsTop {
  width: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -3px;
}

.wallet_connection_modal .pixelsTop::after {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  right: 3px;
  background: #b6a695;
}

.wallet_connection_modal .pixelsTop::before {
  display: block;
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0;
  left: 3px;
  background: #b6a695;
}

.complete_modal {
  display: none;
  opacity: 0;
  text-align: center;
  transition: all 0.7s;
  width: 300px;
  height: 40px;
  position: absolute !important;
  z-index: 3;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}
.complete_modal .swatch {
  position: relative;
  left: 49px;
  top: 3px;
}
.complete_modal h4 {
  font-weight: normal;
  font-size: 16px;
}
.complete_modal div.hide {
  display: none;
}
.complete_modal__header {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 282px;
  top: -87px;
}
.complete_modal__header p {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 68px;
  color: #c4ebfd;
  left: 1px;
}
.complete_modal__header img {
  width: 282px;
}
.complete_modal .scrap {
  position: absolute;
  bottom: 0;
  text-align: left;
  width: 240px;
  bottom: -25px;
  color: #782e1f;
  cursor: pointer;
  left: 30px;
}
.complete_modal .scrap img {
  width: 15px;
  float: right;
  position: relative;
  top: 1px;
}
.complete_modal hr {
  border: none;
  border-top: 3px solid #efedea;
  margin-bottom: 20px;
  margin-top: 22px;
  width: 60%;
}
.complete_modal h2 {
  margin: 20px 0 6px 0;
}
.complete_modal .release {
  cursor: pointer;
  color: #476323;
  position: absolute;
  bottom: 0;
  width: 240px;
  right: 30px;
  bottom: -25px;
}
.complete_modal .release img {
  width: 18px;
  float: right;
  position: relative;
  top: 6px;
}
.complete_modal h3 {
  font-size: 16px;
  font-weight: normal;
  margin: 30px 0;
}
.complete_modal__stats .html img {
  width: 48px;
  margin-top: -5px;
}
.complete_modal__stats .css img {
  width: 48px;
  margin-top: -5px;
}
.complete_modal__stats .js img {
  width: 48px;
  margin-top: -5px;
}
.complete_modal__stats .design img {
  width: 36px;
  margin-top: 0px;
}
.complete_modal__stats div {
  float: left;
  text-align: center;
  width: 25%;
  box-shadow: inset -3px 0px #f1ebe4;
}
.complete_modal__stats div:last-child {
  box-shadow: none;
}
.complete_modal__stats div span {
  display: block;
  margin-top: 17px;
  position: relative;
  left: 4px;
}

.make {
  position: absolute !important;
  left: 0;
  right: 0;
  width: 200px;
  margin: auto;
  bottom: 40px;
  border: none;
  cursor: pointer;
  outline: none;
}

body {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gBg.png");
  color: #594c3d;
  margin: 50px;
  overflow: hidden;
}

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}

img.m {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  left: -40px;
  transform: translateY(-50%);
  width: 756px;
}

.followers {
  color: #9b5c19;
  float: right;
  transform: translateX(calc(100% + -3px));
  right: 0;
  z-index: 3;
  bottom: 12px;
  position: absolute !important;
  padding: 13px 50px !important;
}
.followers span {
  color: #fff;
}
.followers img {
  width: 42px;
  left: -25px;
  top: -18px;
  z-index: 2;
  position: absolute;
}

h2 {
  font-weight: normal;
  margin: 0 0 6px 0;
  font-size: 16px;
}

body,
button {
  font-family: pixles;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 20px;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Likely future */
}

.pen {
  height: 52px;
}
.pen_bar {
  width: 100%;
  height: 6px;
  border-bottom: 3px solid #d6c9bc;
  position: relative;
}
.pen_bar_progress {
  width: 0%;
  height: 6px;
  position: absolute;
  left: 0;
  background: #fcab0b;
  box-shadow: 0px 3px inset #fdbc3d;
}

.mystats {
  margin-top: 110px;
  float: left;
  padding: 30px;
  clear: left;
}
.mystats img {
  width: 45px;
  position: absolute;
  left: -24px;
  top: -24px;
  z-index: 1;
}
.mystats .pixelsBottom,
.mystats .pixelsTop {
  width: calc(100% + -4px);
}
.mystats .swatch {
  width: 12px;
  height: 11px;
  position: relative;
  top: 3px;
  left: -16px;
  margin-right: 6px;
  padding: 0;
  float: left;
  margin-right: -10px;
}
.mystats div {
  padding-left: 16px;
}
.mystats_html {
  clear: left;
}
.mystats_html .swatch {
  background: #f1753f;
}
.mystats_css {
  clear: left;
}
.mystats_css .swatch {
  background: #2965f1;
}
.mystats_js {
  clear: left;
}
.mystats_js .swatch {
  background: #f3e273;
}
.mystats_design {
  clear: left;
}
.mystats_design .swatch {
  background: #9d28e0;
}
.mystats h2 {
  border-bottom: 3px solid #d6c9bc;
  float: left;
  margin-bottom: 16px;
}
.mystats span.val {
  display: inline-block;
  position: relative;
  left: -8px;
  color: #594c3d;
}
.mystats span {
  color: #d6c9bc;
}

p {
  margin: 0;
}

.pip {
  background: white;
  position: absolute;
  left: 0;
  line-height: 0px;
  right: 0;
  margin: auto;
  text-align: center;
  width: 30px;
  padding: 11px 7px 2px 7px;
  height: 10px;
  top: 50%;
}

.sep {
  display: inline-block;
  width: 2px;
  height: 10px;
  background: #d6c9bc;
}

.releasedEmpty {
  clear: both;
  float: right;
  margin-top: 249px;
  height: 60px;
  line-height: 61px;
  position: absolute;
  right: 53px;
  width: 303px;
}

.pen {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 728px;
}
.pen .swatch {
  width: 12px;
  height: 11px;
  position: relative;
  top: 3px;
  margin-left: 2px;
  float: left;
  margin-right: -10px;
}
.pen_html .swatch {
  background: #f1753f;
}
.pen_css .swatch {
  background: #2965f1;
}
.pen_js .swatch {
  background: #f3e273;
}
.pen_design .swatch {
  background: #9d28e0;
}
.pen_html, .pen_css, .pen_js, .pen_design {
  float: left;
  position: relative;
  top: 18px;
  margin-right: 27px;
  padding: 3px;
  width: 149px;
  left: 13px;
  text-align: center;
}

.releasedHeader {
  float: right;
  color: #c4ebfd;
  position: absolute;
  margin-top: 195px;
  top: 15px;
  right: 194px;
}
.releasedHeader img.icon {
  width: 21px;
  top: 4px;
  position: relative;
}
.releasedHeader img.arrow {
  width: 6px;
  top: 0px;
  position: relative;
}

.released {
  clear: both;
  float: right;
  margin-top: 228px;
  height: 420px;
  overflow: scroll;
  padding: 0px 40px 20px 6px;
  position: relative;
  left: 20px;
  width: 310px;
  overflow-x: hidden;
  border-top: 3px solid #bfaf9d;
}
.released::after {
  display: block;
  content: "";
  position: fixed;
  right: 0;
  top: 641px;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 10%, #e1dac5 100%);
  width: 390px;
  height: 80px;
  z-index: 2;
}
.released_pen {
  transition: all 1s;
  float: left;
  clear: left;
  margin-top: 17px;
  height: 0;
}
.released_pen__top {
  z-index: 2;
  height: 66px;
  padding: 10px;
}
.released_pen__bottom {
  height: 20px;
  top: -72px;
  transition: all 1s;
  padding-top: 30px;
  width: calc(100% - 48px);
  left: 12px;
}
.released_pen__bottom .sep {
  margin: 0 9px;
}
.released_pen__bottom img {
  margin-right: 6px;
  position: relative;
}
.released_pen__bottom img.views {
  width: 21px;
  top: 2px;
}
.released_pen__bottom img.likes {
  width: 15px;
  top: 3px;
}
.released_pen__bottom img.comments {
  width: 18px;
  top: 3px;
}
.released_pen .star {
  position: absolute;
  right: 10px;
  top: 9px;
}
.released_pen .star img {
  width: 15px;
}
.released_pen__graph {
  height: 34px;
  position: relative;
  width: 300px;
  border-left: 3px solid #e7e7e7;
  border-bottom: 3px solid #e7e7e7;
  margin: 8px 0;
}
.released_pen__graph .line {
  width: 10px;
  height: 40px;
  max-height: 34px;
  float: left;
  position: relative;
  bottom: 0;
  background: #ff992c;
}