body{
    background-color: silver;
    background: rgb(245, 241, 241);
  /* color: white; */
    padding: 20px;
    font-family: Arial, Verdana, sans-serif;
}

h1{
    color: #64645A;
    background-color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    padding: inherit;
}

p{
    margin: 0px;
    padding: 5px;
}

.fourteen{
    background-color: rgb(0,136,221);

}

.thirteen{
    background-color: rgb(0,149,226);

}

.twelve{
    background-color: rgb(0,160,230);

}

.eleven{
    background-color: rgb(48,170,233);

}

.ten{
    background-color: rgb(84,182,237);

}

.nine{
    background-color: rgb(114,193,240);
}

.eight{
    background-color: rgb(140,202,242);

}

.seven{
    background-color: rgb(0,187,136);

}

.six{
    background-color: rgb(245,176,204);

}

.five{
    background-color: rgb(246,159,192);

}

.four{
    background-color: rgb(245,140,178);

}

.three{
    background-color: rgb(244,123,166);

}

.two{
    background-color: rgb(243,106,152);

}

.one{
    background-color: rgb(244,90,139);

}

.last{
    background-color: rgb(238,62,128);

}
:root{--grey:rgb(0,187,136);
    --white:#fff;
    --optional:#D1D1D1;
  }
.btn{
    display: flex;
    align-items: flex-end;
    width: 300px;
    height: 17vh;
    margin: auto;
}
.btn-but{
  display: flex;
 justify-content: center;
 align-items: center;
 background: none;
 color: var(--black);
 border: 2px solid black;
 text-transform: capitalize;
 font-size: 20px;
 margin: 30px auto;
 padding: 15px 25px;
 border-radius: 5px;
 position: relative;
 transition: color 0.3s ease-in-out;
 width: 180px;
 text-align: center;
 text-decoration: none;
}

.btn-but::before{
content: "";
position: absolute;
width: 0;height: 100%;
background: var(--grey);
top: 0;left: 0;
transition: width 0.3s ease-in-out;
z-index: -1;
}
.btn-but:hover::before{width: 100%;}

.btn-but:hover{color: var(--white);}