/*Style.css*/

:root {
  --primary: #9A2A2A;
  --secondary: #191970;
  --accent: #32ca42;
  --bg: #FAF9F6;
  --text: #1F2937;
  --error: #D2042D;
  --grey: #ddd;
  --light: #b2beb5;
  --green: #d1ebd3;
  --yellow: #f2e88a;
  --red: #d97576;
  --c1: #003366;
  --c2: #174978;
  --c3: #2f5f8a;
  --c4: #46769b;
  --c5: #5e8cad;
  --c6: #75a2bf;
  --c7: #f2fcff;
  --w1: 350px;
  --w2: 150px;
  --f1: 8px;
  --f2: 10px;
  --f3: 12px;
  --f4: 15px;
  --f5: 18px;
  --f6: 20px;
  --f7: 25px;
  --f8: 30px;
  --f8: 35px;
  --m1: 5px;
  --m2: 7px;
  --m3: 10px;
  --m4: 12px;
  --b1: 65px;
  --b2: 50px;
  --b3: 40px;
  --b4: 20px;
  --b5: 105px;
  --dashwidth-mb: 360px;
  --dashwidth-pc: 720px;
}

html,
body {
  display: flex;
  flex-direction: column;
  align-items: center;

  background: #fafafa !important;
  color: var(--text);
  font-family: 'Roboto', sans-serif;
  width: 100%;
  margin: 0;
  padding: 0;

  overflow-x: hidden;
  overflow-y: auto;
  /* allow vertical scroll */
}


/* ===============================
   Mobile Shell
================================ */
.dash-wrap {
  width: var(--dashwidth-mb);
  margin: 0px;
  padding: 5px;
  background: #fff;
  padding-top: var(--b3);
  padding-bottom: var(--b3);
}

@media screen and (min-width: 700px) {
  .dash-wrap {
    width: var(--dashwidth-pc);
    padding: 20px;
    padding-top: var(--b3);
    padding-bottom: var(--b3);
  }
}

/* ===============================
   Typography
================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

/* ===============================
   Other
================================ */

.page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.flex-h2 {
  font-size: 25px;
  font-weight: 600;
  color: var(--text)
}

.flex-h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--c3)
}

.clear-btn {
  height: 35px;
  padding: 0 12px;
  background: var(--c5);
  border: 1px solid var(--c1);
  border-radius: 7px;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer
}

.clear-btn:hover {
  transform: scale(.9);
  opacity: .7
}