/* All elements width includes borders and padding */
  * {
    box-sizing: border-box;
    transition-duration: 200ms;
  }
  
  body {
    color: #309DF5;
    line-height: 1.5;
    font-size: 14px;
    font-family: 'Courier New', Courier, monospace;
  }

  span {
    font-size: large;
  }

  button, input[type="submit"] {
    background-color: #309df5;
    color: white;
    font-weight: bolder;
    font-family: 'Courier New', Courier, monospace;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    }
  
    button:disabled{
      background-color: #878B8E;
      opacity: .5;
    }
  
    button:enabled:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    }

    /* The pseudo form-control */
  #play_pseudo, input[type="text"], input[type="password"]{
    width: 200px;
    height: 50px;
    padding-left: 10px;
    border-radius: 4px;
    border: #878B8EBB solid 2px;
    font-family: 'Courier New', Courier, monospace;
    color: #878B8E;
    font-size: 14px;
    font-weight: bold;
  }

  /* The output */
  #output{
      font-size: 80px;
      font-weight: bolder;
  }

  .pulsate-fwd {
	  -webkit-animation: pulsate-fwd 0.8s ease-in-out both;
	  animation: pulsate-fwd 0.8s ease-in-out both;
  }

  .scale-in-tl {
    -webkit-animation: scale-in-tl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-tl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .scale-out-tl {
    -webkit-animation: scale-out-tl 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-out-tl 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  }

  .myform{
    margin-top: 60px;
  }

  .form_header {
    font-weight: bolder;
    margin-bottom: 40px;
  }

  .btn_link {
    font-size: large;
    font-weight: bold;
    cursor: pointer;
  }

  .disp_none {
    display: none !important;
  }

  /* Rows*/
  .row::after {
  content: "";
  clear: both;
  display: table;
  }

  /* Classes containing "col-"*/
  [class*="col-"] {
  float: left;
  padding: 15px;
  }

  /* Column width for small devices (i.e. smart phones)*/
  [class*="col-"] {
  width: 100%;
  }

  /* Column width for large devices (i.e. computers)*/
  @media only screen and (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  #output {font-size: 150px;}
  }

  /* Column width for large devices (i.e. tablets)*/
  @media only screen and (min-width: 600px) {
  body {font-size: 24px;}
  button {font-size: 24px; padding: 12px 20px;}
  .col-t-1 {width: 8.33%;}
  .col-t-2 {width: 16.66%;}
  .col-t-3 {width: 25%;}
  .col-t-4 {width: 33.33%;}
  .col-t-5 {width: 41.66%;}
  .col-t-6 {width: 50%;}
  .col-t-7 {width: 58.33%;}
  .col-t-8 {width: 66.66%;}
  .col-t-9 {width: 75%;}
  .col-t-10 {width: 83.33%;}
  .col-t-11 {width: 91.66%;}
  .col-t-12 {width: 100%;}
  .myform {margin-top: 100px;}
  #output {font-size: 120px;}
  #play_pseudo, input[type="text"], input[type="password"] {width: 400px; padding-left: 20px;}
  }

  /* ----------------------------------------------
 * Generated by Animista on 2022-10-13 1:12:19
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation pulsate-fwd
 * ----------------------------------------
 */
@-webkit-keyframes pulsate-fwd {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    50% {
      -webkit-transform: scale(1.3);
              transform: scale(1.3);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  @keyframes pulsate-fwd {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    50% {
      -webkit-transform: scale(1.3);
              transform: scale(1.3);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
}

/**
 * ----------------------------------------
 * animation scale-in-tl
 * ----------------------------------------
 */
 @-webkit-keyframes scale-in-tl {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-tl {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation scale-out-tl
 * ----------------------------------------
 */
 @-webkit-keyframes scale-out-tl {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    opacity: 1;
  }
}
@keyframes scale-out-tl {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    opacity: 1;
  }
}