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

/* GLOBAL */
html, body {
    font-family: 'Roboto', sans-serif;
  }
body{
    background-color: #E0E5EC;
    color: rgb(44,44,46)
}
@media screen and (prefers-color-scheme: dark) {
    body {
      background-color: white;
      color: black;
    }
}
.btn {
    color: rgb(44,44,46);
    padding: 2vh;
    border-radius: 1vh;
    text-decoration: none;
    background-color:#E0E5EC;
    box-shadow: 5px 5px 13px rgb(163,177,198,0.6), -5px -5px 16px  rgba(255,255,255, 0.5);      
}
ul, h1{
    margin: 0px;
}


/* TYPOS */
.text-muted{
    color: rgb(142, 142, 147);
}


/*
 * NAVBAR
*/
.main-nav ul {
    list-style-type: none;
    padding: 2vh;
    overflow: hidden;
    background-color:#E0E5EC;
    box-shadow: 5px 5px 19px rgb(163,177,198,0.6), -5px -5px 16px  rgba(255,255,255, 0.5);
}
  
.main-nav ul  li {
    float: left;
}
  
.main-nav  ul li a {
    display: block;
    color: rgb(44,44,46);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
  

/*
 * JUMBOTRON
*/
.jumbotron{
    margin: 0px;
    /*height: 95vh;*/
    display: block;
    margin: 10vh;
}
.jumbotron .text-lead{
    width: 120vh;
    display: float;
    float: left;
}
.jumbotron h1{
    font-size: 4em;
}
.lead-btn{
    list-style: none;
    padding: 0px;
    display: block;
}
.lead-btn li{
    float: left;
    margin-left: 0px;
    margin-right: 2vh;
    margin-top: 4vh;
}
.image-lead img{
    padding-top: 10%;
    height: 40vh;
    float: right;
    display: float;

}


/*
 * USERS PAGE
*/
.navbar-container{
    margin: 0 auto;
    width: 35%;
}
.navbar-container input{
    width: 100%;
    background-color:#E0E5EC;
    box-shadow: 5px 5px 19px rgb(163,177,198,0.6), -6px -6px 16px  rgba(255,255,255, 0.5);
      border: 0px solid black;
      font-size: 1.5em;
      padding: 1.5vh;
      border-radius: 1vh;
      margin-top: 5vh;
      color: rgb(72, 72, 74);
}
.flex{
    display: flex;
    flex-wrap: wrap;
}



/* CARD */ 
.card{
      background-color:#E0E5EC;
      box-shadow: 5px 5px 19px rgb(163,177,198,0.6), -5px -5px 16px  rgba(255,255,255, 0.5);
      width: 50vh;
      padding-bottom: 1vh;
      margin: 5vh;
}
.card .avatar img{
    width: 15vh;
    border-radius: 50%;
    margin: 2vh;
    float: left;
    box-shadow: 5px 5px 19px rgb(163,177,198,0.6), -5px -5px 16px  rgba(255,255,255, 0.5);
}
.card .avatar{
    text-align: center;
}
.card .content{
    float: right;
    margin-right: 5vh;
    margin-top: 2vh;
    color: rgb(99, 99, 102);
}
.card-btn{
    margin-top: 2vh;
    margin-left: 0px;
    text-align: center;
    display: block;
}