style.css

@media (max-width: 2560px) {
  /* For a screen < 960px, this CSS will be read */
  .card {
    width: 50%;
  }
}

@media (max-width: 960px) {
  /* For a screen < 960px, this CSS will be read */
  .card {
    width: 70%;
  }
}
@media (max-width: 720px) {
  /* For a screen < 720px, this CSS will be read */
  .card {
    width: 70%;


  }
}
@media (max-width: 540px) {
  /* For a screen < 540px, this CSS will be read */
  .card {
    width: 70%;
  }
}

body {
  background-color: rgb(250,250,250);
  font-family: Roboto;
}

.h1 {
  font-weight: 700
  font-size: 30;
}

.profile {
  object-fit: cover;
  width:150px;
  height:150px;
  border-radius: 50%;
  opacity: 1;
}

a {
  font-family: Roboto;
  color: #048BA8;
  text-decoration: none;
}

.card {
  background-color: rgb(225,225,225);
  border-radius: 3px;
  box-shadow: 5%;
  /*width: 50%;*/
  margin: 30px auto;
  text-align: center;
  padding: 30px;
}

.btn-red {
  margin: 10px;
  padding: 7px;
  background-color: rgb(250,24,37);
  color: white;
  border-radius: 5px
}
.btn-red:hover {
  margin: 10px;
  padding: 7px;
  background-color: rgba(250,24,37, 0.8);
  color: white;
  border-radius: 5px
}

.list-inline > li {
  display: inline-block;
  padding: 0px 10px;
}

.list-inline {
  list-style: none;
  padding-left: 0px;
}

.fab {
  font-size: 30px;
}

.fab:hover {
  font-size: 30px;
  opacity: 0.8;
}