/* Google Font Import */
@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,900');

/* ROOT VARIABLES */
:root {
  --text-color: hsla(210, 50%, 85%, 1);
  --shadow-color: hsla(210, 40%, 52%, .4);
  --btn-color: hsl(210, 80%, 42%);
  --bg-color: #141218;
}

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY */
body {
    min-height: 100vh;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    overflow: hidden;
    position: relative;
}

/* ======= Animated Background ======= */
.area {
    background: linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
}

.circles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
}

/* Unique circle settings */
.circles li:nth-child(1){ left: 25%; width:80px; height:80px; animation-delay:0s; }
.circles li:nth-child(2){ left:10%;  width:20px; height:20px; animation-delay:2s; animation-duration:12s;}
.circles li:nth-child(3){ left:70%; width:20px; height:20px; animation-delay:4s; }
.circles li:nth-child(4){ left:40%; width:60px; height:60px; animation-delay:0s; animation-duration:18s; }
.circles li:nth-child(5){ left:65%; width:20px; height:20px; animation-delay:0s; }
.circles li:nth-child(6){ left:75%; width:110px; height:110px; animation-delay:3s; }
.circles li:nth-child(7){ left:35%; width:150px; height:150px; animation-delay:7s; }
.circles li:nth-child(8){ left:50%; width:25px; height:25px; animation-delay:15s; animation-duration:45s; }
.circles li:nth-child(9){ left:20%; width:15px; height:15px; animation-delay:2s; animation-duration:35s; }
.circles li:nth-child(10){ left:85%; width:150px; height:150px; animation-delay:0s; animation-duration:11s; }

@keyframes animate {
    0%   { transform: translateY(0) rotate(0deg); opacity:1; border-radius:0; }
    100% { transform: translateY(-1000px) rotate(720deg); opacity:0; border-radius:50%; }
}

/* WRAPPER */
.wrapper {
    width: 770px;
    padding: 35px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    position: relative;
    z-index: 1;
}

.wrapper .content-box {
    padding: 13px 20px 0;
    border-radius: 10px;
    border: 2px solid #bfbfbf;
}

.wrapper .input-field{
  padding: 13px 20px 0;
  position: absolute;
  opacity: 0;
  z-index: -99;
}

/* CONTENT & BUTTONS */
.content-box .content {
    margin-top: 17px;
    display: flex;
    padding: 12px 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #bfbfbf;
}

.result-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 140px);
}

.result-details li {
    display: flex;
    height: 20px;
    list-style: none;
    align-items: center;
}

.content button {
  position: relative;
  padding: 7px 16px;
  border: none;
  cursor: pointer;
  font-family: "Source Code Pro";
  font-weight: 900;
  text-transform: uppercase;
  font-size: 17px;
  color: var(--text-color);
  background-color: var(--btn-color);
  box-shadow: var(--shadow-color) 2px 2px 22px;
  border-radius: 5px;
  overflow: hidden;  
  transition: transform 0.15s ease-in-out;
}

/* Button click shrink */
.content button:active { transform: scale(0.93); }

/* Button bubble effect */
button::before {
  content: '';
  pointer-events: none;
  opacity: .6;
  background:
    radial-gradient(circle at 20% 35%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
    radial-gradient(circle at 75% 44%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
    radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, var(--text-color) 5px, var(--text-color) 6px, transparent 6px);

  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  position: absolute;
  animation: bubbles 5s linear infinite both;
}

@keyframes bubbles {
  to { transform: translate(0, -66.666%); }
}

/* Make Responsive */
@media (max-width: 820px) {
  .wrapper {
    width: 100%;
    padding: 20px;
  }
}

@media (max-width: 600px) {
  .result-details { width: 100%; margin-top: 10px; justify-content: center; }
  .content { flex-direction: column; gap: 10px; }
  .content button { width: 100%; text-align: center; }
}

.typing-text p span{
  position: relative;

}

.typing-text p span.active{
  color: #FFAC1C;
}

.typing-text p span.correct{
  color: rgb(30, 187, 30);
}

.typing-text p span.incorrect{
  color: red;
  outline: 1px solid #fff;
  background: #ffc0cb;
  border-radius: 1px;
}

::selection{
  color: #fff;
  background: #FEBE10;
}