@import url("css/vars.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Monsieur+La+Doulaise&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');


@import url("css/link.css");
@import url("css/sidebar.css");
@import url("css/grid.css");
@import url("css/landing.css");
@import url("css/events.css");
@import url("css/rsvp-button.css");
@import url("css/travel.css");

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--primary-color);
  font-family: 'Inter';
  margin: none;
}


.content {
  display: flex;
  flex-direction: row;
}

.landing-spacer {
  height: 40vh;
  width: 100vw;
  ;
}

.accent {
  color: var(--accent-color);
}

canvas {
  position: absolute;
  filter: blur(1px);
  z-index: -99;
}

a {
  color: inherit;
}

h1 {
  font-family: 'Source Serif 4';
  font-weight: 300;
  font-size: 6rem;
  margin-bottom: -1rem;
  color: var(--primary-color);
}

h2, h3, h4, h5 {
  font-weight: 300;
  margin-bottom: -0.2rem;
}

.heading {
  font-weight: 400;
 
}

.subheading {
  color: var(--primary-color-light);
}

p, .travel-info {
  font-size: 1rem;
  font-weight: 300;
}

li::marker {
  color: var(--accent-color);
  mix-blend-mode: multiply;
}

li {
  font-size: 0.7rem;
  line-height: 1.5rem;
}