style-2022.css

<!--
/*https://fonts.google.com/specimen/Roboto*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,300&display=swap");

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
  font-size: 12pt;
  /* background: linear-gradient(to bottom, #d1d1d1 0%, #f1f1f1 100%); */
  /* background: #f1f1f1; */
  /* more background at https://wallpaperset.com/blank-blueprint-background */
  background: #1f5ba3 url(images/bg_blueprint_90907.jpg);
  box-shadow: inset 0.5em 5em 10em rgba(255, 255, 255, 0.3);

  color: rgb(219, 220, 240);
  /* color: whitesmoke; */
  /* height: 100vh; */
}

.about blockquote {
  font-style: italic;
  font-weight: bold;
  text-align: center;
}
nav {
  /* background: #0076ff; */
  padding: 0 1em;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
}

nav li {
  list-style: none;
  margin: 0.6em;
}

nav a {
  text-decoration: none;
  color: #e2edfe;
  font-size: 12pt;
  font-weight: bolder;
}
nav svg {
  height: 14pt;
}
header {
  /* background: #0076ff; */
  text-align: center;
  padding: 2em 0;
}
#logo {
  max-width: 640px;
  width: 95%;
}
main {
  padding-top: 2em;
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
}

.demo {
  text-align: center;
  max-width: 900px;
  margin: auto;
}

h2 {
  text-align: center;
  margin: 1em;
  /* color: #556; */
  font-size: 30pt;
}
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 90%;
  margin: auto;
  /* max-width: 1300px; */
}

.card {
  width: 40em;
  background: #f3f3f1;
  color: #333;
  /* height: 100%; */
  margin: 10px;
  overflow: hidden;
  border: 1px solid #40474e;
  /* border-radius: 10px; */
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3);
}

.card-content {
  padding: 1em;
  line-height: 1.3;
}
.card-content ul {
  padding-left: 1em;
}
h3 {
  padding-top: 1em;
  padding-bottom: 0.6em;
  padding-left: 0.9em;
  padding-right: 0.9em;
  background-color:#56677b;
  color: whitesmoke;
}

.btn {
  display: inline-block;
  background-color: #0076ff;
  border: 2px rgba(138, 58, 212, 0.541);
  color: rgb(238, 238, 255);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2em;
  border-radius: 6px;
  padding: 5px 20px;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}

@media screen and (max-width: 1000px) {
  nav ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}