@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

 .btn {
    padding: 0.5em 0.5em 0.5em;
    border-radius: 38px;
    margin: 8px 8px 8px 0px;
    color: #fbdedb;
    background-color: #fbdedb;
    display: inline-block;
    background: #d2d2d2;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    font-family: sans-serif;
    font-weight: 500;
    font-size: .75em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    -webkit-box-shadow: 1em -2rem 1em 0px rgb(0 0 0 / 38%) inset;
    -moz-box-shadow: 1em -2rem 1em 0px rgb(0 0 0 / 38%) inset;
    box-shadow: 1em -2rem 1em 0px rgb(0 0 0 / 38%) inset;
    position: relative;
}
.btn:hover, .btn:focus {
    opacity: 1;
}
.btn:active {
    -webkit-transform: scale(0.80);
    -moz-transform: scale(0.80);
    -ms-transform: scale(0.80);
    -o-transform: scale(0.80);
    transform: scale(0.80);
}
.btn.block {
    display: block !important;
}
.btn.circular {
  border-radius: 50em !important;
}


/* Colours */
.red {
    background-color: #d55050;
}
.teal {
    background-color: #50d5a1;
}
.sky {
    background-color: #6698cb;
}
.black {
    background-color: #5c6166;
}
.gray {
    color: black;
    background-color: #d2d2d2;
}
.orange {
    background-color: #e96633;
}
.pink {
    background-color: #cb99c5;
}
.green {
    background-color: #5bbd72;
}
.blue {
    background-color: #7abedf;
}
.yellow {
    background-color: #ecc92b;
}
.purple {
    background-color: #564f8a;
}