.list {
    background-color: rgba(255, 254, 252, 0.26);
    padding-bottom: 10%;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 5%;
    border-radius: 30px;
    border: 3px solid rgba(255, 255, 255, 0.555);
    box-shadow: 1px 2px 3px rgb(255, 255, 255), 
              1px 3px 5px rgb(255, 255, 255), 
              1px 5px 9px rgb(255, 255, 255), 
              1px 9px 17px rgb(255, 255, 255);
    transition: all 0.5s ease 0s;
}
.list:hover {
    box-shadow: 8px 9px 10px rgb(255, 255, 255), 
              7px 10px 12px rgb(255, 255, 255), 
              7px 12px 16px rgb(255, 255, 255), 
              8px 16px 24px rgb(255, 255, 255);
    transition: all 0.5s ease 0s;
}

.tasks {
    background-color: rgba(255, 255, 255, 0.253);
    font-size: 120%;
}

.title {
    font-size: 300%;
}

.count {
    font-size: 150%;
}


.completed {
    color: white;
    text-decoration: line-through;
}


.addtask{
    background-color: rgb(255, 217, 244);
    border: 3px solid rgb(255, 192, 226);
    font-size: 120%;
}
.addtask:hover {
    background-color: rgb(255, 192, 226);
    border: 3px solid rgb(255, 217, 244);
}

.clear {
    background-color: rgb(255, 217, 244);
    border: 3px solid rgb(255, 192, 226);
    font-size: 120%;
}
.clear:hover {
    background-color: rgb(255, 192, 226);
    border: 3px solid rgb(255, 217, 244);
}

.form-control {
    background-color: rgb(255, 217, 244);
    border: 3px solid rgb(255, 192, 226);
    font-size: 120%;
}
.form-control:focus {
    background-color: rgb(255, 192, 226);
    border: 3px solid rgb(255, 217, 244);
}

.check {
    background-color: rgb(255, 183, 131);
    border-radius: 25px;
    border: 3px solid white;
}
.check:hover {
    background-color: rgb(255, 143, 63);
    border-radius: 25px;
    border: 3px solid rgb(255, 200, 160);
}

.x {
    background-color: rgb(255, 183, 131);
    border-radius: 25px;
    border: 3px solid white;
}
.x:hover {
    background-color: rgb(255, 143, 63);
    border-radius: 25px;
    border: 3px solid rgb(255, 200, 160);
}


/* had to look up to change blue ring around input box to nothing */
input:focus, 
select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: initial;
}


/* BACKGROUND */

body {
      margin: 0;
      height: 100vh;
      overflow: hidden;
      background: linear-gradient(to top, #fed7a1, #fdbb71, #f7a17d, #f68d87, #d6779f, #a664a0);
      font-family: "corsairpe", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    .cloud {
      position: absolute;
      width: 300px;
      height: 150px;
      background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.25), transparent 70%),
                  radial-gradient(circle at 70% 50%, rgba(255,255,255,0.2), transparent 70%);
      filter: blur(20px);
      border-radius: 50%;
      animation: drift linear infinite;
    }

    @keyframes drift {
      from {
        transform: translateX(-400px);
      }
      to {
        transform: translateX(110vw);
      }
    }