@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Questa Grande";
  src: url("fonts/questa_grande_regular.otf") format("opentype");
}

html {
  font-family: "Roboto", sans-serif;
  line-height: 1.4;
  background: #2e2e2e;
  color: #2e2e2e;
}

body {
  max-width: 730px;
  min-height: 100vh;
  margin: 0 auto;
}

footer {
  margin: 30px 20px;
  text-align: right;
}

h1 {
  margin: 0;
  font-family: "Questa Grande", serif;
  font-size: 38px;
  text-align: center;
}

h2 {
  margin: 0;
  font-family: "Questa Grande", serif;
  font-weight: normal;
  font-size: 38px;
  color: #82c4ff;
}

h3 {
  margin: 5px 0 0 0;
  font-weight: normal;
  font-size: 21px;
  text-align: right;
  color: white;
}

a {
  color: white;
}

p {
  margin: 15px 0 0 0;
}

ul {
  margin: 15px 0 0 0;
  padding-left: 25px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
}

.grid > * {
  flex-grow: 1;
  padding: 20px;
  border: 1px solid #d8eafe;
}

.grid > a {
  text-decoration: none;
}

.grid > a:hover {
  background: #ffe497;
}

.grid > *.blue {
  background: #d8eafe;
  border: none;
}

.grid > *.yellow {
  background: #ffe497;
  border: none;
}

.grid > *.white {
  background: #fbfbfb;
  border: none;
}

.grid > *.red {
  background: #ff8e8e;
  border: none;
}

.grid > *.green {
  background: #c3e177;
  border: none;
}

.grid > *.blue a,
.grid > *.yellow a,
.grid > *.white a,
.grid > *.blue h2,
.grid > *.yellow h2,
.grid > *.white h2,
.grid > *.blue h3,
.grid > *.yellow h3,
.grid > *.white h3 {
  color: #2e2e2e;
}

.swiper-button-next::after, .swiper-button-prev::after {
  color: #2e2e2e;
}

.center {
  text-align: center;
}