style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,700&display=swap');

body {
  background-color: #DDE6ED;
  font-family: 'Roboto Condensed', sans-serif;
  color: #27374D;
  font-size: 25px;
  line-height: 95%;
  text-align: center;
}

h1 {
  font-size: 40px;
  line-height: 50%;
}

h2, h3 {
  font-size: 28px;
  line-height: 50%;
}

a {
  color: #526D82;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font-size: 20px;
  color: white;
  border-radius: 8px;
  display: inline-block;
  border: none;
  padding: 15px 20px;
  transition-duration: 0.2s;
  background-color: #526D82;
  border: 2px solid #526D82;
}

button:hover {
  color: black;
  background-color: white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

img {
  border-radius: 20%;
  border: 1px solid #27374D;
}

.card-white {
  background: white;
  padding: 30px;
  border: 1px solid lightgrey;
  margin: 20px auto;
  box-shadow: 0px 10px 30px grey;
}

.container {
  width: 800px;   /* This sets the width */
  margin: 20px auto; /* This automatically sets left/right margins */
}

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

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

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

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

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