@font-face {
  font-family: "Jelly";
  font-display: block;
  src: url("https://yeemachine.github.io/k2021/font/kalidoface-jelly.ttf")
    format("truetype");
}

@font-face {
  font-family: "Kalicon";
  font-display: block;
  src: url("https://yeemachine.github.io/k2021/font/kalidoface-regular.woff")
    format("woff");
}

@font-face {
  font-family: "Kalicon Variable";
  font-display: block;
  src: url("https://yeemachine.github.io/k2021/font/kalidoface-variable.ttf")
    format("truetype");
}

@keyframes jiggle {
  0% {
    font-variation-settings: "wght" 100;
  }
  100% {
    font-variation-settings: "wght" 250;
  }
}

@keyframes greenBG {
  0% {
    background: #4bc34b;
  }
  50% {
    background: #95ef95;
  }
  100% {
    background: #4bc34b;
  }
}

@keyframes drawAcross {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes scaleOut {
  0% {
    transform: scale(0,1);
  }
  100% {
    transform: scale(1,1);
  }
}

@keyframes flyIn {
  0% {
    opacity: 0;
    transform:translateY(10px);
  }
  100% {
    opacity: 1;
    transform:translateY(0px);
  }
}

@keyframes whiteToBlue {
  0% {
    color: white;
  }
  100% {
    color: var(--lightBlue);
  }
}

  @keyframes pulse-animation {
  0% {
    transform:scale(1);
    opacity:0;
/*     box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); */
  }
  20% {
    transform:scale(1);
    opacity:1;
/*     box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); */
  }
  100% {
    transform:scale(var(--scale));
    opacity:0;
/*     box-shadow: 0 0 0 30px rgba(0, 0, 0, 0); */
  }
}

:root {
  --offblack: #16161d;
  --lapizBlue: #4450F3;
  --lightBlue: #009df7;
  --lapizGrey: #3f3f4e;
  --lightRed: rgb(189 70 106);
  --peach:#f07792;
  /*   --iconbg: #58586e; */
/*   --darkgrey: #504e62; */
  --darkgrey: #314249;
  --iconbg:#676482;
  --accent: #233db5;
  --pos: #109210;
  --neg: #c51d1d;
  --fuscia: #838cbe;
}

* {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}
body,
i,
input,
button,select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight:400
}
/* p{
  font-family: 'Montserrat'
} */
h1,h2,h3,b{
  font-weight:600;
}
html{
  height:100%;
  width:100%;
}
/* html{
  box-sizing: border-box;
}
*, ::after, ::before {
box-sizing: inherit;
} */
body {
  --bgThemeLight:#537b8a;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: var(--offblack);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.transparent{
  background:transparent;
}
@media all and (display-mode: fullscreen) {
  body,html{
    height:100vh;
  }
}


h1 {
  font-family: "Jelly";
  z-index: 999;
  width: clamp(280px, 80vw, 600px);
  text-align: center;
  font-size: clamp(40px, 11.5vw, 80px);
  margin-bottom: clamp(0px, 4vw, 120px);
  color: white;
  font-variation-settings: "wght" 100;
  animation: jiggle 0.8s infinite;
  animation-timing-function: cubic-bezier(0.26, 0.3, 0.66, 0.65);
  font-weight: normal;
  height: max-content;
margin-top: 0;
/*   top:0;left:0;right:0;bottom:0;
  margin:auto; */
  transition: opacity 1s;
}
h1.fade {
  opacity: 0;
  pointer-events: none;
}
h1.pause {
  animation: none;
}

.hide-scrollbar {
  /*FireFox*/
  scrollbar-width: none;
  /*IE10+*/
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.hide-scrollbar::-webkit-scrollbar {
  /*Chrome, Safari, Edge*/
  display: none;
}

button {
  background: transparent;
  border: none;
  padding: 0;
}
button:hover {
  cursor: pointer;
}

/* a subtle focus style for keyboard-input elements */
.text-input:focus {
  outline: 1px solid #aaa; /* Adjust to suit your tastes */
}

/* no outline for non-keyboard-inputs elements */
button:focus,
input:focus,
label:focus,
select:focus {
  outline: none;
}

body.user-is-tabbing *:focus,
body.user-is-tabbing input:focus + container {
  outline: 2px solid #7aacfe !important; /* for non-webkit browsers */
  outline: 5px auto -webkit-focus-ring-color !important;
}

.no_highlights {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.kalicon {
  font-family: "Kalicon";
  font-size: 70px;
  font-weight: normal;
  font-style: normal;
  line-height: -0.1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}
.kalicon.variable {
  font-family: "Kalicon Variable";
  transition: font-variation-settings 0.2s;
  font-variation-settings: "anim" 0;
}
.kalicon.variable.end {
  font-variation-settings: "anim" 100;
}

.icon {
  display: inline-block;
}

.fill {
  font-family: "Jelly";
  position: absolute;
  color: var(--iconbg);
  transform: scale(1);
  transition: 0.15s;
  font-size: 72px;
/*   text-shadow: 0px 0px 8px #00000020; */
  pointer-events: none;
  /*   transition: .5s;
  font-variation-settings: "wght" 100;
  transition-property: font-variation-settings; */
}
.fill.small{
  font-size: 44px;
}
.fill.medium{
  font-size: 58px;
}
.icon-fill {
  position: absolute;
}
.icon-fill:before {
  content: "iconfill";
  width: 100%;
  height: 100%;
}

.solid {
  position: relative;
  pointer-events: none;
}
.solid.small{
  font-size:44px;
}
.solid.medium{
  font-size:52px;
}
.svgIcon{
    width: 28px;
    height: 28px;
    margin-top: 3px;
}
.svgIcon.small{
    width: 22px;
    height: 22px;
    margin-top: 3px;
}

.pulse{
    --scale:1.8;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:rgba(0,0,0,0.2);
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.5) 100%);
    opacity:0;
    transform:scale(1);
/*     -webkit-box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.2); */
    animation: pulse-animation 2s infinite;
    animation-fill-mode:forwards;
    animation-timing-function:ease;
}

 :picture-in-picture{
  background:red;
  }

@media only screen and (hover: hover) and (pointer: fine){
  button:hover .fill,
  label:hover .fill {
    animation: jiggle 0.4s 1;
    animation-timing-function: cubic-bezier(0.26, 0.3, 0.66, 0.65);
    transform: scale(1.1);
    cursor: pointer;
  }
  button.unavailable:hover .fill {
    animation: none;
    transform: scale(1);
  }
}

@media only screen and (hover: none),
  screen and (pointer: none),
  screen and (pointer: course) {
  .forceAnimate {
    animation: jiggle 0.4s 1;
    animation-timing-function: cubic-bezier(0.26, 0.3, 0.66, 0.65);
  }
  .unavailable.forceAnimate {
    animation: none;
  }
  button:active .fill,
  label:active .fill {
    transform: scale(1.1);
  }
  button.unavailable:active .fill {
    transform: scale(1);
  }
}