@font-face {
  font-family: "Fancy";
  src: url("/fonts/Roboto-Italic.ttf");
  font-style: italic;
}
@font-face {
  font-family: "Fancy";
  src: url("/fonts/Roboto-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: "Fancy";
  src: url("/fonts/Roboto-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Fancy";
  src: url("/fonts/Roboto-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: "Fancy";
  src: url("/fonts/Roboto-Regular.ttf");
  font-style: normal;
  font-weight: normal;
}

:root {
  --blue: #0d6efd;
  --fog-blue: #7492BA;

  --blue-rgb: 13, 110, 253;
  --fog-blue-rgb: 116, 146, 186;

}

html {
  font-size:18px;
}

body {
  font-family: "Fancy", sans-serif;
}

/* Background color classes */
.bg-blue {
  background-color: var(--blue);
}

.bg-fog-blue {
  background-color: var(--fog-blue);
}

/* Text color classes */
.text-blue {
  color: var(--blue);
}

.text-fog-blue {
  color: var(--fog-blue);
}

/* List marker color classes */
.list-blue > li::marker {
  color: var(--blue);
}

.list-fog-blue > li::marker {
  color: var(--fog-blue);
}

/* Headings */

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 1rem;
}

@media(max-width:768px) {
  h1 {
    font-size: 1.6rem;
  }
  h2 {
    font-size:1.35rem;
  }
  h3 {
    font-size: 1.18rem;
  }
}

/* Everything else */

.primary-feature-heading {
  display:flex;
  align-items: center;
  margin-bottom: 15px;
}

.primary-feature-heading .feature-icon {
  margin-right:15px;
}

.feature-icon {
  color:#fff;
  display:flex;
  width:55px;
  height:55px;
  border-radius:55px;
  line-height: 0;
  justify-content:center;
  align-items:center;
  font-size:26px;
  margin-bottom:10px;
}

.feature-icon-home {
  width:145px;
  height:145px;
  border-radius:145px;
  font-size:90px;
}

.screenshot-phone {
  width:250px;
  border: solid 2px #aaa;
  border-radius:32px;
}
.screenshot-phone img {
  width:100%;
  border: solid 7px #000;
  border-radius:30px;
}

.screenshot-desktop {
  width:700px;
  max-width:100%;
}
.screenshot-desktop img {
  width:100%;
  border: solid 7px rgba(0,0,0,0.02);
  border-radius:13px;
}

.screenshot-detail {
  width:250px;
}
.screenshot-detail img {
  width:100%;
}

.screenshot-document {
  width:300px;
  display:block;
  text-decoration: none;
}
.screenshot-document img {
  width:100%;
  border: solid 10px rgba(0,0,0,0.05);
  border-radius:12px;
}
.screenshot-document p {
  font-size:0.8rem;
  margin-bottom:5px;
}

ol.big-list > li::marker {
  font-size:1.25rem;
}
@media(max-width:768px) {
  ol.big-list > li::marker {
    font-size:1.18rem;
  }
}

ol.big-list > li {
  margin-bottom:30px;
}