@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
    background-color: #f1f1f1;
    color: #0f141e;
    font: normal 16px 'Roboto', 'sans-serif';
    font-weight: bold;
}


  a{
    color:black;
    text-decoration: none;
  }
  a:hover{
    text-decoration: underline;
  }
  a:active{
    color:blue;
  }
  a:visited{
    color:whitesmoke;
  }
  .info a:visited{
    color: #86898f;
  }


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

  .info p{

    color:#86898f;
    margin: 0;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
   /* text-transform: uppercase;
    letter-spacing: 5px;
    word-spacing: 42px;*/
  }
  .info-text{
    margin-left: 40px;
  }
  .info-text h4{
    margin-bottom: 10px;
  }

  
  /* .social{
      background: red;
      border: 5px solid blue;
      padding: 15px;
      margin: 20px;
  } */
  /*Box Model*/
  .container{
      padding-top: 30px;
      width: 750px;
      margin: auto;

  }

    /* .box-model > div{
      float: left;
      background: #000;
      height: 200px;
      width: 20%;
      border: 4px solid red;
    } */
    .card{
      padding: 15px 20px;  
      background-color: red;
      margin-bottom: 20px;
      border-radius: 20px;
    }

    .bg-yellow{
      background:#FFFAFA;
    }


    .bg-red{
      background:#FFFAFA;
    }

    .bg-green{
      background:#FFFAFA;
    }
    .info {
      display: flex;
      margin-bottom: 20px;
    }


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

    .list{
      padding: 0 20px;
    }
    .list li{
      color:#86898f;
      margin-bottom: 10px;
    }

    .table{
      width: 100%;
    }

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

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

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

    .contact h2{
      text-align: center;
    }
    .form-group label{
        display: block;
        font-size: 14px;
        box-sizing: border-box;

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

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


    .row > .form-group{
      width: 50%;
    }

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

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

    }

    .btn:hover{
      opacity: 0.9;
    }

    @media(max-width:700px){
        .info{
          display: block;
        }
    }
    /* .box{
      position: fixed;
      left: 450px;
      padding: 100px;
      left: 0px; 
      position: absolute;
      margin-top: 200px;
      width: 50px;
      height: 50px;
      background: lightcoral;
    }
    .position{
      height: 300px;
      width: 300px;
      position: absolute;
      padding: 20px;
      border: 4px solid black;
      margin-top: 40px;
    } */