/* Button Do Options*/
.opt-btn {
    padding: 12.5px 30px;
    border: 0;
    border-radius: 100px;
    background-color: #021b2d;
    color: #ffffff;
    font-weight: Bold;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    display: flex;
    justify-content: center;
    margin: 5px;
    width: 70px;
}

.opt-btn > a{
   color: #8fa9fe;
}

.opt-btn:hover {
  background-color: #acd0e7;
  box-shadow: 0 0 20px #6fc5ff50;
  transform: scale(1.1);
  
}




.opt-btn:active {
  background-color: #7ec1ee;
  transition: all 0.25s;
  -webkit-transition: all 0.25s;
  box-shadow: none;
  transform: scale(0.98);
  
}


/* BUTTON DE PAUSA E RESTART */
/* Yoinked from CodePen, but improved the animation
so that it is smooth among other more minor things */
/* From uiverse.io by @Ali-Tahmazi99 */
#pauseAndPlay,#restart {
  background-color: #021b2d;
 display: inline-block;
 width: 100px;
 height: 50px;
 border-radius: 10px;
 border: 1px solid #03045e;
 margin: 5px;
 position: relative;
 overflow: hidden;
 transition: all 0.5s ease-in;
 z-index: 1;
}

#pauseAndPlay::before,#restart::before,
#pauseAndPlay::after,#restart::after {
 content: '';
 position: absolute;
 top: 0;
 width: 0;
 height: 100%;
 transform: skew(15deg);
 transition: all 0.5s;
 overflow: hidden;
 z-index: -1;
}

#pauseAndPlay::before,#restart::before {
 left: -10px;
 background: #331251;
}

#pauseAndPlay::after,#restart::after {
 right: -10px;
 background: #40027e;
}

#pauseAndPlay:hover::before,#restart:hover::before,
#pauseAndPlay:hover::after,#restart:hover::after {
 width: 58%;
}

#pauseAndPlay:hover,#restart:hover {
 color: #ffffff;
 transition: 0.4s;
}

#pauseAndPlay ,#restart {
 color: #e0e0fe;
 font-size: 18px;
 transition: all 0.3s ease-in;
}

/* Estilizando o input do to-do list */
.input-group {
 position: relative;
}

.input {
 border: solid 1.5px #9e9e9e;
 border-radius: 1rem;
 background: rgba(0, 0, 255, 0.381);
 padding: 1rem;
 font-size: 1rem;
 color: #f5f5f5;
 transition: border 150ms cubic-bezier(0.4,0,0.2,1);
}

.user-label {
 position: absolute;
 left: 15px;
 color: #e8e8e8;
 pointer-events: none;
 transform: translateY(1rem);
 transition: 150ms cubic-bezier(0.4,0,0.2,1);
}

.input:focus, input:valid {
 outline: none;
 border: 1.5px solid #1a73e8;
}

.input:focus ~ label, input:valid ~ label {
 transform: translateY(-50%) scale(0.8);
 background-color: #212121;
 padding: 0 .2em;
 color: #2196f3;
}