@font-face {
  font-family: "DrukCond-Super";
  src: url("../fonts/DrukCond-Super.woff") format("woff");
}

@font-face {
  font-family: "grishenko";
  src: url("../fonts/grishenko_nbp.ttf") format("truetype"), url("../fonts/grishenko_nbp.woff") format("woff");
}

@font-face {
  font-family: "VCR_OSD_MONO";
  src: url("../fonts/VCR_OSD_MONO.woff") format("woff");
}

ion-icon {
  cursor: pointer;
  font-size: 30px;
  /* padding: 0 5px; */
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "grishenko", "DrukCond-Super", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
  color: white !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 25%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}

@keyframes slide-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(85px);
    transform: translateY(85px);
  }
  100% {
    opacity: 1;

    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slide-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-85px);
    transform: translateY(-85px);
  }

  100% {
    opacity: 1;

    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@media only screen and (max-width: 600px) {
  .maker-badge {
    bottom: calc(-367px + 76px) !important;
    width: 90px;
    min-width: 90px;
  }

  .maker-badge.isOpen {
    bottom: 0 !important;
    width: auto;
  }
}
