@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/** {
    padding: 0;
    margin: 0;
}*/

body {
    background-color: #f1f1f1;
    color: #0f141e;

font-size: 16px;
font-weight: normal;
font-family: 'Roboto', sans-serif;

/*font: normal 16px 'Roboto', sans-serif;*/
;

/*font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;*/
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

a:active {
    color: blue;
}

a:visited{
    color: grey;
}

.avatar {
    width: 200px;
    border-radius: 28px;
    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
}

.info {
    display: flex;
    margin-bottom: 20px;
}

@media (max-width: 700px) {
    .info {
        text-align: center;
        display: block;
    }
}

.info-text {
    margin: 40px;
}
.info-text h4 {
    margin-bottom: 10px;
}
.info p{
    color: #86898f;
    margin: 0;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
    /*text-transform: uppercase;*/
    /*letter-spacing: 5px;*/
    /*word-spacing: 10px;*/
} 
 /*Box Model*/
 .container{
    max-width: 750px;
    margin: auto;
    padding-top: 30px;
 }

 /*.social {*/
    /*background: paleturquoise;*/
    /*padding: 15px;*/
    /*padding: 15px 40px;*/
    /*padding: 15px 20px 25px 30px;*/
    /*padding-top: 15px;
    padding-right: 20px;
    padding-bottom: 25px;
    padding-left: 30px;
    margin: 5px;

    border: 5px solid red;
    border-bottom-style: dotted;
    border-top-width: 15px;
    border-right-color: black;*/
/*}*/

/*.box-model > div {
    float: left;
   background: black;
   height: 200px;
   border: 4px solid red;
   width: 25%;
   box-sizing: border-box;
}*/

.bg-yellow {
    background: #fff9dc;
}

.bg-green {
    background: #e5ffe7;
}

.bg-red {
    background: #ffe5e5;
}

.card {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 20px;
}

.card h2 {
    margin-bottom: 20px;
}

.list {
    padding: 0 20px;
    /*list-style: none;*/
}

.list li {
    color: #86898f;
    margin-bottom: 10px;
    /*border-bottom: 1px solid grey;*/
}

.table {
    width: 100%;
}

.table td {
    padding-bottom: 10px;
}

.table td:nth-child(2) ,
.table td:nth-child(3) {
    color: #86898f;
}

/*.table tr:nth-child(even) {
    background: red;
}*/

/*.table tr:nth-child(odd) {
    background: red;
}*/

.link-list {
    list-style: none;
    padding: o;
}

.link-list li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

.form-group label {
  display: block;
  font-size: 15px;
  color: #86898f;  
} 

.form-group input, 
.form-group textarea{
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    border-bottom: 1px solid #ccc;
    color: #000;
    padding: 15px 0 10px;
    outline: none;
    font-family: inherit;
}

.row {
    display: flex;
    margin-bottom: 20px;
}

.row > .form-group {
    width: 50%;
    margin-right: 20px;
}

/*.row > .form-group:first-child {
    margin-right: 20px;
}*/

.btn {
    background: #111;
    padding: 10px 15px;
    color: #fff9dc;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.btn:hover {
    opacity: 0.9;
}

/*position*/

/*.position {
    position: relative;
    border: 4px solid black;
    margin-top: 48px;
    padding: 20px;
    height: 200px;
}

.box {
    position: fixed;
    top: 0;
    left: 0px;
    width: 100%;
    height: 50px;
    background: lightcoral;
}*/

body {
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .btn {
       width: 9em;
       height: 3em;
       border-radius: 30em;
       font-size: 15px;
       font-family: inherit;
       border: none;
       position: relative;
       cursor: pointer;
       overflow: hidden;
       z-index: 1;
       box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff ;
   }
   .btn::before {
       content: '';
       width: 0;
       height: 3em;
       border-radius: 30em;
       position: absolute;
       top: 0;
       left: 0;
       background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
       transition: .5s ease;
       display: block;
       z-index: -1; 
   }
   .btn:hover::before {
      width: 9em; 
   }