/*
 Fluid type mixin, essentially clamp() but with full browser support.
 Allows fonts to resize on window resize to a minimum and maximum size.
*/
/* Breakpoint sizes */
/* Create the mixin (usually in a separate .scss file) */
/*
 Fluid type mixin, essentially clamp() but with full browser support.
 Allows fonts to resize on window resize to a minimum and maximum size.
*/
/* Breakpoint sizes */
/* Create the mixin (usually in a separate .scss file) */
h1 {
  color: var(--font-color);
  font-size: 18px;
  letter-spacing: 4px;
  line-height: 25px;
  text-align: center;
  margin: 5px;
  text-shadow: -2px 0 0 #fdff2a, -4px 0 0 #df4a42, 2px 0 0 #91fcfe; }
  @media only screen and (min-width: 992px) {
    h1 {
      font-size: 30px;
      letter-spacing: 4px;
      line-height: 30px; } }

.title-container {
  margin: auto;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center; }

.title-container {
  margin: auto;
  margin-bottom: 32px; }
  .title-container .home-title {
    color: var(--font-color);
    transform: perspective(600px) rotateX(45deg);
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 5px;
    text-align: center;
    margin: 5px;
    text-shadow: -2px 0 0 #fdff2a, -4px 0 0 #df4a42, 2px 0 0 #91fcfe; }
    @media only screen and (min-width: 992px) {
      .title-container .home-title {
        font-size: 70px;
        line-height: 70px; } }
  .title-container .subtitle {
    color: var(--font-color);
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 5px;
    text-shadow: -2px 0 0 #fdff2a, -4px 0 0 #df4a42, 2px 0 0 #91fcfe; }
    @media only screen and (min-width: 992px) {
      .title-container .subtitle {
        margin: 5px 20px;
        font-size: 45px;
        line-height: 45px; } }

.subtitle-container {
  display: flex;
  flex-direction: row; }
  .subtitle-container img {
    display: block;
    height: 50px;
    width: 50px;
    filter: drop-shadow(5px 5px 10px #eb8704); }
    @media only screen and (min-width: 992px) {
      .subtitle-container img {
        height: 50px;
        width: 50px; } }

/*
 Fluid type mixin, essentially clamp() but with full browser support.
 Allows fonts to resize on window resize to a minimum and maximum size.
*/
/* Breakpoint sizes */
/* Create the mixin (usually in a separate .scss file) */
.container {
  max-width: 768px;
  margin: auto;
  height: 100%;
  position: relative;
  z-index: 900; }
  @media only screen and (min-width: 992px) {
    .container {
      max-width: 1280px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start; } }
  @media only screen and (min-width: 2500px) {
    .container {
      max-width: 1536px; } }
  .container .wrapper {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: space-between;
    align-items: center; }

.nes-badge {
  position: absolute;
  bottom: 16px;
  z-index: 999;
  width: 5.5em !important; }
  .nes-badge span:hover {
    background-color: #b9533d !important;
    box-shadow: 0 0.5em #b9533d, 0 -0.5em #b9533d, 0.5em 0 #b9533d,
 -0.5em 0 #b9533d !important; }
  @media only screen and (min-width: 992px) {
    .nes-badge {
      position: absolute;
      bottom: unset;
      top: 32px;
      width: 10.5em; } }

/*
 Fluid type mixin, essentially clamp() but with full browser support.
 Allows fonts to resize on window resize to a minimum and maximum size.
*/
/* Breakpoint sizes */
/* Create the mixin (usually in a separate .scss file) */
.credits {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-size: 8px;
  line-height: 8px;
  letter-spacing: 4px;
  z-index: 999;
  text-shadow: -2px 0 0 #fdff2a, -4px 0 0 #df4a42, 2px 0 0 #91fcfe; }
  .credits .credits-title {
    color: #f7d51d; }
  .credits .credits-number {
    color: var(--font-color);
    text-align: center; }
    @media only screen and (min-width: 992px) {
      .credits .credits-number {
        margin-top: 20px; } }
  @media only screen and (min-width: 992px) {
    .credits {
      right: 32px;
      top: 32px;
      font-size: 20px;
      line-height: 20px;
      letter-spacing: 5px; } }

/*
 Fluid type mixin, essentially clamp() but with full browser support.
 Allows fonts to resize on window resize to a minimum and maximum size.
*/
/* Breakpoint sizes */
/* Create the mixin (usually in a separate .scss file) */
.scanlines {
  overflow: hidden;
  mix-blend-mode: difference;
  padding: 16px; }
  @media only screen and (min-width: 992px) {
    .scanlines {
      padding: 32px; } }
  .scanlines::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%), radial-gradient(circle, var(--spotlight-color) 10px, rgba(0, 0, 0, 0.85) 800px); }

.options-container {
  justify-content: center;
  text-align: center;
  margin-top: 100px; }
  .options-container ul {
    list-style-type: none;
    padding: 0; }
    @media only screen and (min-width: 992px) {
      .options-container ul {
        width: 50%;
        margin: auto; } }
    .options-container ul li {
      margin: 5px 0;
      letter-spacing: 5px;
      cursor: pointer;
      font-size: 10px; }
      @media only screen and (min-width: 992px) {
        .options-container ul li {
          margin: 20px 0;
          font-size: 40px; } }
      .options-container ul li.active-item {
        animation: flash 2s; }
        .options-container ul li.active-item .right-arrow,
        .options-container ul li.active-item .left-arrow {
          display: none; }
        @media only screen and (min-width: 992px) {
          .options-container ul li.active-item .right-arrow,
          .options-container ul li.active-item .left-arrow {
            display: flex !important; } }
      .options-container ul li .option {
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: var(--font-color); }
        .options-container ul li .option span {
          font-size: 15px;
          -webkit-animation: flash 0.5s linear;
          animation: flash 0.5s linear;
          margin: 10px 20px;
          text-shadow: -2px 0 0 #fdff2a, -4px 0 0 #df4a42, 2px 0 0 #91fcfe; }
          @media only screen and (min-width: 992px) {
            .options-container ul li .option span {
              font-size: 35px; } }
        .options-container ul li .option .right-arrow,
        .options-container ul li .option .left-arrow {
          display: none; }
        .options-container ul li .option .left-arrow {
          height: 40px;
          width: 40px;
          transform: rotate(90deg); }
        .options-container ul li .option .right-arrow {
          height: 40px;
          width: 40px;
          transform: rotate(270deg); }

.volume-control {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 999;
  display: flex;
  align-items: center; }
  .volume-control img {
    height: 50px;
    border-radius: 50%;
    width: 50px;
    background: rgba(255, 255, 255, 0.8); }
  .volume-control input {
    display: none; }
    .volume-control input.show {
      display: block; }
  .volume-control input {
    -webkit-appearance: none;
    /* Override default CSS styles */
    appearance: none;
    width: 100%;
    /* Full-width */
    height: 5px;
    /* Specified height */
    background: #fff;
    /* Grey background */
    outline: none;
    /* Remove outline */
    -webkit-transition: 0.2s;
    /* 0.2 seconds transition on hover */
    transition: opacity 0.2s; }
  .volume-control input::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    width: 10px;
    /* Set a specific slider handle width */
    height: 10px;
    background: #161616;
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */ }
  .volume-control input::-moz-range-thumb {
    width: 25px;
    /* Set a specific slider handle width */
    height: 25px;
    /* Slider handle height */
    background: #04aa6d;
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */ }

/*
 Fluid type mixin, essentially clamp() but with full browser support.
 Allows fonts to resize on window resize to a minimum and maximum size.
*/
/* Breakpoint sizes */
/* Create the mixin (usually in a separate .scss file) */
.home {
  display: flex;
  flex-direction: column; }

@keyframes flash {
  0% {
    filter: brightness(100%); }
  20% {
    filter: brightness(300%); }
  40% {
    filter: brightness(100%); }
  60% {
    filter: brightness(300%); }
  80% {
    filter: brightness(100%); }
  100% {
    filter: brightness(150%); } }

.languages {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 32px; }
  .languages .table-container {
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 12px; }
    .languages .table-container .item {
      list-style: none;
      width: 50%;
      display: flex;
      justify-content: center; }
      .languages .table-container .item img {
        margin: 5px;
        height: 35px;
        width: 50px; }
      @media (min-width: 768px) {
        .languages .table-container .item img {
          margin: 10px;
          height: 50px;
          width: 50px; } }
      .languages .table-container .item h2 {
        color: white; }
      .languages .table-container .item .overlay-text {
        display: none; }
      .languages .table-container .item.active-item {
        animation: flash 300ms linear; }
        .languages .table-container .item.active-item .overlay-text {
          display: block !important;
          position: absolute;
          color: red; }
        .languages .table-container .item.active-item img {
          filter: drop-shadow(1px 1px 30px #e0dcd1); }
    @media (min-width: 768px) {
      .languages .table-container .item {
        list-style: none;
        width: 25%;
        display: flex;
        justify-content: center; } }
  .languages .nes-container.is-rounded {
    position: relative;
    z-index: 999;
    background: #f3eee7;
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
    padding: 15px 25px;
    margin-top: auto;
    margin-bottom: 50px;
    height: 300px; }
  @media (min-width: 768px) {
    .languages .nes-container.is-rounded {
      position: relative;
      z-index: 999;
      background: #f3eee7;
      width: 50%;
      margin: 0 auto;
      font-size: 16px;
      padding: 15px 25px;
      margin-top: auto;
      margin-bottom: 50px;
      height: 300px; }
      .languages .nes-container.is-rounded div.active-item .image {
        display: block !important; }
      .languages .nes-container.is-rounded div .image {
        position: absolute;
        bottom: 0;
        right: 15px;
        height: 100px;
        width: 100px;
        display: none; }
        .languages .nes-container.is-rounded div .image img {
          height: 100%;
          width: 100%; } }
  .languages .skill .progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; }
    .languages .skill .progress h3 {
      width: 45%; }
    .languages .skill .progress progress {
      height: 15px;
      margin-bottom: 10px;
      width: 55%; }
    @media (min-width: 768px) {
      .languages .skill .progress progress {
        height: 25px;
        margin-bottom: 10px;
        width: 55%; } }

@media (min-width: 768px) {
  .table-container {
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 64px; } }

p {
  font-size: 8px; }

@media (min-width: 768px) {
  p {
    font-size: 16px; } }

.nes-container.is-rounded {
  padding: 0; }
  .nes-container.is-rounded .image {
    position: absolute;
    bottom: 0;
    right: 15px;
    height: 100px;
    width: 100px;
    display: none; }
    .nes-container.is-rounded .image img {
      height: 100%;
      width: 100%; }

.content-container {
  background: rgba(131, 142, 204, 0.466);
  border-radius: 12px;
  width: 600px;
  margin: auto;
  padding: 25px; }
  .content-container .content-wrapper {
    display: flex;
    flex-direction: column; }
    .content-container .content-wrapper h2 {
      text-align: center;
      color: #817171 !important;
      text-shadow: 1px 1px white;
      margin-bottom: 32px; }
    .content-container .content-wrapper a {
      margin-bottom: 32px;
      text-align: center; }

.about-me {
  display: flex;
  height: 100%;
  padding: 32px;
  flex-direction: column; }
  .about-me .nes-container.is-rounded {
    position: relative;
    z-index: 999;
    background: #f3eee7;
    font-size: 8px; }
  @media (min-width: 768px) {
    .about-me .nes-container.is-rounded {
      position: relative;
      z-index: 999;
      background: #f3eee7;
      margin: 0 auto;
      font-size: 16px;
      margin-top: 50px; } }
  .about-me .socials-container {
    margin: 16px auto; }
    .about-me .socials-container a.active {
      filter: drop-shadow(1px 1px 30px #e0dcd1); }
    .about-me .socials-container .nes-icon {
      margin: 25px;
      display: revert !important; }
    @media (min-width: 768px) {
      .about-me .socials-container .nes-icon {
        margin: 50px;
        display: inline-block !important; } }
  @media (min-width: 768px) {
    .about-me .socials-container {
      margin: 64px auto; } }
  .about-me .cta-button {
    margin: 0px auto; }
  @media (min-width: 768px) {
    .about-me .cta-button {
      margin: 64px auto;
      margin-top: auto; } }

.coin-settings, .static-intensity {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px; }
  .coin-settings span, .static-intensity span {
    color: white; }

.buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.arcade li a {
  opacity: 20%;
  pointer-events: none; }
  .arcade li a.enabled {
    opacity: 100% !important;
    pointer-events: unset !important; }

.arcade li:first-child a {
  opacity: 100% !important;
  pointer-events: unset !important; }

::selection {
  background-color: transparent;
  text-shadow: 1px 1px 3px blue; }

#app.rotate {
  transform: rotate(180deg);
  transition: 5s ease-in-out; }