@font-face { font-family: Naripho; src: url('/Naripho.otf'); }
@font-face { font-family: SquidgySweets; src: url('/SquidgySweets.otf'); }

html {
    font-family: Naripho; 
    font-size: clamp(24px, 3.5vw, 48px);
    padding-bottom: 3rem;
}

.yellow-font {
    font-family: SquidgySweets;
    color: #ffc500;
    text-stroke: .015rem #000;
    -webkit-text-stroke: .015rem #000;
}
.yellow-font-small {
    font-family: SquidgySweets;
    color: #ffcc00;
    text-stroke: .015rem #000;
    -webkit-text-stroke: .015rem #000;
}

.black-font {
    font-family: SquidgySweets;
    color: #000;
}

@supports (-webkit-overflow-scrolling: touch) {
  .yellow-font {
    -webkit-text-stroke: 0.07rem #000;
  }
}

section {
    margin: 1rem auto;
    text-align: center;
    max-width: 95%;
    width: 20rem;
}



.code-form input {
  width: 1.5rem;
  height: 2rem;
  text-align: center;
  font-size: 1.75rem;
  font-family: Naripho;
  border: 2px solid #000;
  border-radius: .5rem;
  outline: none;
  padding: 0;
  margin: 2px;
  text-transform: uppercase;
}

.code-form input:focus {
  outline: 4px solid #ffc500;
}
    
a:link {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

a:visited {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

a:hover {
  text-decoration: none;
  color: #444;
  font-weight: bold;
}

a:active {
  text-decoration: none;
  color: #444;
  font-weight: bold;
}

* {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


.button-rect {
  cursor: pointer;
  vertical-align: middle;
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;
  color: #000000;
  font-size: 1.5rem;
  padding: .4rem .75rem;
  background: #fff;
  border: 2px solid #000000;
  border-radius: .5rem;

  margin: .5rem;
  
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
}

.button-rect:disabled {
    cursor: not-allowed;
    color: #808080;
    border: 2px solid #808080;
}

.button-rect:focus {
  outline: 4px solid #ffc500;
}

/* spinner */
.loader {
  margin: 1rem auto;
  border: .5rem solid #000;
  border-top: .5rem solid #ffc500;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* footer */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: #ffca00;
}
@media print {
  footer {
    display: none !important;
  }
}