/* ==========================================================
   LAYOUT
========================================================== */

body {
  background: linear-gradient(to bottom, #fbfdff, #f4f8fb);

  color: var(--text);

  font-family: "Inter", sans-serif;

  line-height: 1.55;
}

/*----------------------------------------------------------
BACKGROUND
----------------------------------------------------------*/

body::before {
  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(rgba(35, 98, 143, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 98, 143, 0.035) 1px, transparent 1px);

  background-size: 42px 42px;

  z-index: -2;
}

body::after {
  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  background: radial-gradient(
    circle at top,
    rgba(35, 98, 143, 0.06),
    transparent 45%
  );

  z-index: -1;
}

/*----------------------------------------------------------
APP
----------------------------------------------------------*/

.app {
  position: relative;
  width: min(100% - 36px, var(--container-width));

  margin: 14px auto 26px;
}
.header,
.card,
.footer {
  position: relative;

  z-index: 2;
}
/*----------------------------------------------------------
VERTICAL RHYTHM
----------------------------------------------------------*/

.header {
  margin-bottom: 30px;
}

.card {
  margin-bottom: 18px;
}

.footer {
  margin-top: 34px;
}

/*----------------------------------------------------------
UTILITIES
----------------------------------------------------------*/

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.muted {
  color: var(--text-soft);
}

.small {
  font-size: 0.9rem;
}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media (max-width: 900px) {
  .app {
    width: min(100% - 24px, var(--container-width));
  }
}

@media (max-width: 640px) {
  .app {
    width: calc(100% - 18px);

    margin: 18px auto;
  }
}
.corner {
  position: absolute;

  pointer-events: none;

  user-select: none;

  opacity: 0.07;

  z-index: 0;
}

.corner-top-left {
  top: -8px;

  left: -45px;

  width: 80px;

  height: auto;
}

.corner-top-right {
  top: -8px;

  right: -45px;

  width: 80px;

  height: auto;
}