.basic {
  font-size: 15;
  font-family: monospace;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border-radius: 5px;
  width: 20%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


.bouncing-text {
  position: relative;
}

.bouncing-text:hover {
  display: flex;
}

.Q, .u, .i, .c, .k, .C, .l, .i2, .c2, .k2 {
  position: relative;
}

.Q {
  animation: bounce 1s ease infinite;
  -webkit-animation: bounce 1s ease infinite;
}

.u {
  animation: bounce 1s ease infinite .1s;
  -webkit-animation: bounce 1s ease infinite .1s;
}

.i {
  animation: bounce 1s ease infinite .2s;
  -webkit-animation: bounce 1s ease infinite .2s;
}

.c {
  animation: bounce 1s ease infinite .3s;
  -webkit-animation: bounce 1s ease infinite .3s;
}

.k {
  animation: bounce 1s ease infinite .4s;
  -webkit-animation: bounce 1s ease infinite .4s;
}

.C {
  animation: bounce 1s ease infinite .5s;
 -webkit-animation: bounce 1s ease infinite .5s;
}

.l {
  animation: bounce 1s ease infinite;
  -webkit-animation: bounce 1s ease infinite .6s;
}
.i2 {
  animation: bounce 1s ease infinite;
  -webkit-animation: bounce 1s ease infinite .7s;
}
.c2 {
  animation: bounce 1s ease infinite;
  -webkit-animation: bounce 1s ease infinite .8s;
}
.k2 {
  animation: bounce 1s ease infinite;
  -webkit-animation: bounce 1s ease infinite .9s;
}

 @keyframes bounce {
        0%   { transform: scale(1,1) translateY(0); }
        10%  { transform: scale(1.1,.9) translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-55px);}
        50%  { transform: scale(1.05,.95) translateY(0); }
        58%  { transform: scale(1,1) translateY(-7px); }
        65%  { transform: scale(1,1) translateY(0);}
        100% { transform: scale(1,1) translateY(0);}
    }

@-webkit-keyframes bounce {
       0%   { transform: scale(1,1) translateY(0); }
        10%  { transform: scale(1.1,.9) translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-55px);}
        50%  { transform: scale(1.05,.95) translateY(0); }
        58%  { transform: scale(1,1) translateY(-7px);}
        65%  { transform: scale(1,1) translateY(0);}
        100% { transform: scale(1,1) translateY(0);} 
}

#loading {
  position: absolute;
  background:white;
  width: 99%;
  height: 98%;
  z-index: 1;
}
#preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

@keyframes animation {
  0% {
    stroke-dasharray: 1 98;
    stroke-dashoffset: -105;
  }
  50% {
    stroke-dasharray: 80 10;
    stroke-dashoffset: -160;
  }
  100% {
    stroke-dasharray: 1 98;
    stroke-dashoffset: -300;
  }
}

#loading-spinner {
  transform-origin: center;
  animation-name: animation;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier;
  animation-iteration-count: infinite;
}