/* Fonts */

/* font-family: 'Playfair Display', serif; */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap");

/* font-family: 'IBM Plex Sans', sans-serif; */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap");

/* font-family: 'IBM Plex Mono', monospace; */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap");

/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a,
input {
  outline: none;
}

/* Root */

:root {
  /* Brand Colors */
  --brand-gray-lighter: #3a3a3a;
  --brand-gray-light: #2b292b;
  --brand-gray-dark: #1f1e1f;
  --brand-gray-darker: #191819;

  /* primary */
  --brand-primary-1: #fce6dd;
  --brand-primary-2: #f8ccbb;
  --brand-primary-3: #f5b398;
  --brand-primary-4: #f19976;
  --brand-primary-5: #ee8146;
  --brand-primary-6: #fb7943;

  /* library */
  --brand-library-1: #3e506c;
  --brand-library-2: #2f3c51;
  --brand-library-3: #1f2836;
  --brand-library-4: #151c26;
  --brand-library-5: #141923;

  /* Typeface  */
  --font-family-serif: "Playfair Display", serif;
  --font-family-sans: "IBM Plex Sans", sans-serif;
  --font-family-mono: "IBM Plex Mono", monospace;
  --font-color-primary: #f8f9fa;
  --font-color-secondary: #8f8e8f;

  /* Header */
  /* stylelint-disable-next-line length-zero-no-unit */
  --alert-height: 0px; /* NOTE: must keep unit value for calc functions */
  --header-border-size: 2px;
  --header-height: 105px;
  --compound-size: calc(var(--header-height) + var(--alert-height));
}

/* Global Defaults */

html,
body {
  font-family: var(--font-sans);
  font-size: 10px;
  font-variant-numeric: lining-nums;
}

body:not(.user_is_tabbing):focus {
  outline: none;
}

body {
  background: var(--brand-gray-dark);
  background: linear-gradient(
    180deg,
    var(--brand-gray-light) 0%,
    var(--brand-gray-dark) 100vh,
    var(--brand-gray-darker) 100%
  );
  background-color: var(--brand-gray-dark);
  color: var(--font-color-primary);
  font-family: var(--font-family-sans);
  min-width: 320px;
}

body::before {
  background-image: url("/images/grid.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 600px;
  left: 50%;
  max-width: 1200px;
  position: absolute;
  top: var(--header-height);
  transform: translateX(-50%);
  width: 100%;
  -webkit-transform: translateX(-50%) translate3d(0, 0, 0);
  z-index: -1;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-6);
  line-height: var(--font-lineheight-1);
}

h1,
.h1 {
  font-size: 4rem;
}

h2,
.h2 {
  font-size: 3.5rem;
}

h3,
.h3 {
  font-size: 2.6rem;
}

h4,
.h4 {
  font-size: 2.4rem;
}

h5,
.h5 {
  font-size: 2rem;
}

h6,
.h6 {
  font-size: 1.8rem;
}

:is(p, ul, ol, dl, blockquote) {
  font-size: 1.8rem;
}

p {
  line-height: var(--size-8);
}

a {
  color: var(--font-color-primary);
  cursor: pointer;
  text-decoration: none;
}

button,
.button {
  background-color: transparent;
  border: 0;
  color: var(--font-color-primary);
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-family-mono);
  font-size: 1.6rem;
  position: relative;
  text-align: center;
}

section {
  padding-bottom: var(--size-12);
  padding-top: var(--size-12);
}

section + section {
  border-top: 2px solid var(--brand-gray-light);
}

:root {
  /* Open Roots Sizes | Instead of installing it */
  /* Font Sizes */
  --font-size-00: 0.5rem;
  --font-size-0: 0.75rem;
  --font-size-1: 1rem;
  --font-size-2: 1.1rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-5: 2rem;
  --font-size-6: 2.5rem;
  --font-size-7: 3rem;
  --font-size-8: 3.5rem;
  --font-size-fluid-0: clamp(0.75rem, 2vw, 1rem);
  --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
  --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
  --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
  /* Font Weights */
  --font-weight-1: 100;
  --font-weight-2: 200;
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
  --font-weight-8: 800;
  --font-weight-9: 900;
  /* Font Line Height */
  --font-lineheight-00: 0.95;
  --font-lineheight-0: 1.1;
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.75;
  --font-lineheight-5: 2;
  /* Font Letter Spacing */
  --font-letterspacing-0: -0.05em;
  --font-letterspacing-1: 0.025em;
  --font-letterspacing-2: 0.05em;
  --font-letterspacing-3: 0.075em;
  --font-letterspacing-4: 0.15em;
  --font-letterspacing-5: 0.5em;
  --font-letterspacing-6: 0.75em;
  --font-letterspacing-7: 1em;
  /* Sizes */
  --size-000: -0.5rem;
  --size-00: -0.25rem;
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;
  --size-9: 4rem;
  --size-10: 5rem;
  --size-11: 7.5rem;
  --size-12: 10rem;
  --size-13: 15rem;
  --size-14: 20rem;
  --size-15: 30rem;
  /*Colors*/
  --gray-0: #f8f9fa;
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --red-0: #fff5f5;
  --red-1: #ffe3e3;
  --red-2: #ffc9c9;
  --red-3: #ffa8a8;
  --red-4: #ff8787;
  --red-5: #ff6b6b;
  --red-6: #fa5252;
  --red-7: #f03e3e;
  --red-8: #e03131;
  --red-9: #c92a2a;
  --pink-0: #fff0f6;
  --pink-1: #ffdeeb;
  --pink-2: #fcc2d7;
  --pink-3: #faa2c1;
  --pink-4: #f783ac;
  --pink-5: #f06595;
  --pink-6: #e64980;
  --pink-7: #d6336c;
  --pink-8: #c2255c;
  --pink-9: #a61e4d;
  --grape-0: #f8f0fc;
  --grape-1: #f3d9fa;
  --grape-2: #eebefa;
  --grape-3: #e599f7;
  --grape-4: #da77f2;
  --grape-5: #cc5de8;
  --grape-6: #be4bdb;
  --grape-7: #ae3ec9;
  --grape-8: #9c36b5;
  --grape-9: #862e9c;
  --violet-0: #f3f0ff;
  --violet-1: #e5dbff;
  --violet-2: #d0bfff;
  --violet-3: #b197fc;
  --violet-4: #9775fa;
  --violet-5: #845ef7;
  --violet-6: #7950f2;
  --violet-7: #7048e8;
  --violet-8: #6741d9;
  --violet-9: #5f3dc4;
  --indigo-0: #edf2ff;
  --indigo-1: #dbe4ff;
  --indigo-2: #bac8ff;
  --indigo-3: #91a7ff;
  --indigo-4: #748ffc;
  --indigo-5: #5c7cfa;
  --indigo-6: #4c6ef5;
  --indigo-7: #4263eb;
  --indigo-8: #3b5bdb;
  --indigo-9: #364fc7;
  --blue-0: #e7f5ff;
  --blue-1: #d0ebff;
  --blue-2: #a5d8ff;
  --blue-3: #74c0fc;
  --blue-4: #4dabf7;
  --blue-5: #339af0;
  --blue-6: #228be6;
  --blue-7: #1c7ed6;
  --blue-8: #1971c2;
  --blue-9: #1864ab;
  --cyan-0: #e3fafc;
  --cyan-1: #c5f6fa;
  --cyan-2: #99e9f2;
  --cyan-3: #66d9e8;
  --cyan-4: #3bc9db;
  --cyan-5: #22b8cf;
  --cyan-6: #15aabf;
  --cyan-7: #1098ad;
  --cyan-8: #0c8599;
  --cyan-9: #0b7285;
  --teal-0: #e6fcf5;
  --teal-1: #c3fae8;
  --teal-2: #96f2d7;
  --teal-3: #63e6be;
  --teal-4: #38d9a9;
  --teal-5: #20c997;
  --teal-6: #12b886;
  --teal-7: #0ca678;
  --teal-8: #099268;
  --teal-9: #087f5b;
  --green-0: #ebfbee;
  --green-1: #d3f9d8;
  --green-2: #b2f2bb;
  --green-3: #8ce99a;
  --green-4: #69db7c;
  --green-5: #51cf66;
  --green-6: #40c057;
  --green-7: #37b24d;
  --green-8: #2f9e44;
  --green-9: #2b8a3e;
  --lime-0: #f4fce3;
  --lime-1: #e9fac8;
  --lime-2: #d8f5a2;
  --lime-3: #c0eb75;
  --lime-4: #a9e34b;
  --lime-5: #94d82d;
  --lime-6: #82c91e;
  --lime-7: #74b816;
  --lime-8: #66a80f;
  --lime-9: #5c940d;
  --yellow-0: #fff9db;
  --yellow-1: #fff3bf;
  --yellow-2: #ffec99;
  --yellow-3: #ffe066;
  --yellow-4: #ffd43b;
  --yellow-5: #fcc419;
  --yellow-6: #fab005;
  --yellow-7: #f59f00;
  --yellow-8: #f08c00;
  --yellow-9: #e67700;
  --orange-0: #fff4e6;
  --orange-1: #ffe8cc;
  --orange-2: #ffd8a8;
  --orange-3: #ffc078;
  --orange-4: #ffa94d;
  --orange-5: #ff922b;
  --orange-6: #fd7e14;
  --orange-7: #f76707;
  --orange-8: #e8590c;
  --orange-9: #d9480f;
}

.hopin-container { 
  overflow: hidden;
  padding-top: 75.25%; 
  position: relative;
  margin:50px 0;
}

.hopin-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}