* {
  box-sizing: border-box;

}

html,

body {
  margin: 0;

  width: 100%;
  min-height: 100%;

  color: #172033;

  background: #f7faff;
}
html {

  height: 100%;

  overflow: hidden;

}
body {

  height: 100%;

  overflow: hidden;
}
button,

input {
  font: inherit;

}
.top-nav {

  position: fixed;
  top: 0;
  left: 0;

  right: 0;

  z-index: 20;

  padding: 12px 16px;
}

.top-nav nav {

  max-width: 1050px;
  margin: auto;
  background: #fff;

  border: 1px solid #dce8f5;
  border-radius: 6px;

}
.top-nav-left {
  list-style: none;

  display: flex;
  align-items: center;
  gap: 2px;

  margin: 0;

  padding: 4px;
}
.nav-element {

  display: block;

  text-decoration: none;

  color: #5a6980;

  padding: 8px 12px;

  border-radius: 4px;
  font-size: 14px;

  font-weight: 600;

  transition:
    background 0.15s,
    color 0.15s;
    
}
.nav-element:hover {
  background: #eef6ff;

  color: #126bb0;
}
.nav-element.active {

  background: #e8f4ff;

  color: #126bb0;
}
.page {

  width: 100%;

  height: 100dvh;

  padding: 82px 20px 20px;
  display: grid;

  place-items: center;

}

.card {

  width: min(920px, 100%);

  margin: auto;

  background: #fff;
  border: 1px solid #dfeaf5;

  border-radius: 8px;
  padding: 30px;
}

.eyebrow {
  display: none;

}
.muted {

  color: #65748a;
}
.button {

  border: 1px solid #cfe1ef;

  background: #fff;
  color: #176da8;
  border-radius: 5px;

  padding: 10px 16px;
  font-weight: 700;

  cursor: pointer;
  line-height: 1.1;

}
.button:hover {

  background: #f1f8ff;
}
.button.primary {

  background: #2389cc;
  border-color: #2389cc;
  color: #fff;

}
.button.primary:hover {

  background: #176fae;
}
.button.danger {

  color: #c43e3e;

  border-color: #efcccc;
}
.button:disabled {
  opacity: 0.55;

  cursor: not-allowed;

}
.hidden {
  display: none !important;

}
.status {

  min-height: 20px;
  margin: 10px 0 0;
  font-size: 14px;

  color: #65748a;

}
.status.error {

  color: #c43e3e;

}
.field {
  display: flex;

  flex-direction: column;
  gap: 6px;

  text-align: left;
}
.field label {

  font-size: 13px;

  font-weight: 700;

  color: #536278;

}
.field input {

  height: 42px;
  border: 1px solid #d5e2ee;
  border-radius: 5px;

  padding: 0 11px;
  outline: 0;

  font: inherit;
  background: #fff;

}
.field input:focus {
  border-color: #4b9bd0;
  box-shadow: 0 0 0 2px #e9f5ff;

}
.actions {

  display: flex;

  gap: 8px;
  flex-wrap: wrap;
}
#toastr {

  position: fixed;

  right: 18px;

  bottom: 18px;

  z-index: 100;
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 8px;
  pointer-events: none;

}
.toastr-toast {

  min-width: 230px;
  max-width: min(380px, calc(100vw - 36px));

  display: flex;
  align-items: flex-start;
  gap: 10px;

  background: #fff;
  border: 1px solid #d9e5ef;

  border-left: 3px solid #4b9bd0;

  border-radius: 5px;
  padding: 10px 10px 10px 11px;

  box-shadow: 0 6px 20px rgba(23, 32, 51, 0.08);
  opacity: 0;

  transform: translateY(6px);
  transition:

    opacity 0.16s,
    transform 0.16s;
  pointer-events: auto;

}
.toastr-visible {
  opacity: 1;

  transform: translateY(0);

}
.toastr-success {

  border-left-color: #2685c5;
}
.toastr-info {

  border-left-color: #4b9bd0;
}
.toastr-warning {

  border-left-color: #c58a32;
}
.toastr-error {

  border-left-color: #c43e3e;

}
.toastr-icon {
  width: 20px;

  height: 20px;
  display: grid;

  place-items: center;
  flex: 0 0 20px;

  border: 1px solid currentColor;

  border-radius: 50%;
  font-size: 12px;

  font-weight: 800;
}
.toastr-success .toastr-icon {

  color: #2685c5;
}
.toastr-info .toastr-icon {

  color: #4b9bd0;
}
.toastr-warning .toastr-icon {

  color: #a96e16;

}

.toastr-error .toastr-icon {

  color: #c43e3e;

}
.toastr-content {
  display: flex;
  flex-direction: column;

  gap: 2px;

  line-height: 1.35;

  font-size: 13px;
  color: #43536a;

  flex: 1;

}
.toastr-content strong {
  font-size: 13px;

  color: #172033;
}
.toastr-close {

  border: 0;
  background: none;

  color: #8794a7;

  cursor: pointer;
  padding: 0 2px;
  font-size: 18px;
  line-height: 18px;

}

.about-card {
  max-width: 760px;

}
.about-card h1 {

  font-size: 38px;
  margin: 0 0 8px;

}
.about-card > p {

  max-width: 620px;
  line-height: 1.6;

  color: #65748a;
  margin: 0;

}
.facts {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;

  margin-top: 22px;

}
.facts div {

  border-top: 1px solid #dce8f5;

  padding: 13px 0;
  text-align: left;
}
.facts strong,

.facts span {
  display: block;

}
.facts span {

  color: #65748a;

  font-size: 14px;
  margin-top: 4px;
  line-height: 1.45;

}
@media (max-width: 650px) {

  .facts {
    grid-template-columns: 1fr;
  }
  .about-card {

    padding: 22px;
    
  }
  .about-card h1 {

    font-size: 31px;
  }
}
.videoplayerthing {

  display: block;
  width: 100%;

  height: 100%;

}

html,
body {

  font-family:

    "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive,
    sans-serif;
    
}
body {

  overflow-y: auto;
}
html {
  overflow-y: auto;

}
.page {

  min-height: 100dvh;
  height: auto;

}
.about-card {

  margin: 0 auto;
}
.videoplayerthing {

  width: 100%;

  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;

}
.facts a {

  color: #176da8;
  text-decoration: none;

}
.facts a:hover {
  text-decoration: underline;

}
/* .about-card { max-width: 52rem; } */
/* .about-card p { line-height: 1.65; } */
/* .about-card a { text-underline-offset: 3px; } */