@import url('/css/reset.css');

@font-face {
  font-family: 'Assistant';
  src: url('../fonts/Assistant-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
}

:root {
  /* Sizes */

  --ratio: calc(3 / 4);

  --ratio-2: calc(var(--ratio) * var(--ratio));
  --ratio-3: calc(var(--ratio-2) * var(--ratio));
  --ratio-4: calc(var(--ratio-3) * var(--ratio));
  --ratio-5: calc(var(--ratio-4) * var(--ratio));
  --ratio-6: calc(var(--ratio-5) * var(--ratio));
  --ratio-7: calc(var(--ratio-6) * var(--ratio));
  --ratio-8: calc(var(--ratio-7) * var(--ratio));
  --ratio-9: calc(var(--ratio-8) * var(--ratio));
  --ratio-10: calc(var(--ratio-9) * var(--ratio));
  --ratio-11: calc(var(--ratio-10) * var(--ratio));
  --ratio-12: calc(var(--ratio-11) * var(--ratio));
  --ratio-13: calc(var(--ratio-12) * var(--ratio));
  --ratio-14: calc(var(--ratio-13) * var(--ratio));

  --size-regular: 32px;

  --size-small-1: calc(var(--size-regular) * var(--ratio));
  --size-small-2: calc(var(--size-regular) * var(--ratio-2));
  --size-small-3: calc(var(--size-regular) * var(--ratio-3));
  --size-small-4: calc(var(--size-regular) * var(--ratio-4));
  --size-small-5: calc(var(--size-regular) * var(--ratio-5));
  --size-small-6: calc(var(--size-regular) * var(--ratio-6));
  --size-small-7: calc(var(--size-regular) * var(--ratio-7));
  --size-small-8: calc(var(--size-regular) * var(--ratio-8));
  --size-small-9: calc(var(--size-regular) * var(--ratio-9));

  --size-large-1: calc(var(--size-regular) / var(--ratio));
  --size-large-2: calc(var(--size-regular) / var(--ratio-2));
  --size-large-3: calc(var(--size-regular) / var(--ratio-3));
  --size-large-4: calc(var(--size-regular) / var(--ratio-4));
  --size-large-5: calc(var(--size-regular) / var(--ratio-5));
  --size-large-6: calc(var(--size-regular) / var(--ratio-6));
  --size-large-7: calc(var(--size-regular) / var(--ratio-7));
  --size-large-8: calc(var(--size-regular) / var(--ratio-8));
  --size-large-9: calc(var(--size-regular) / var(--ratio-9));
  --size-large-10: calc(var(--size-regular) / var(--ratio-10));
  --size-large-11: calc(var(--size-regular) / var(--ratio-11));
  --size-large-12: calc(var(--size-regular) / var(--ratio-12));
  --size-large-13: calc(var(--size-regular) / var(--ratio-13));
  --size-large-14: calc(var(--size-regular) / var(--ratio-14));

  --size-px: 1px;
  --size-px-2: calc(var(--size-px) * 2);
  --line-height: calc(1 / var(--ratio));

  --font-weight-heavy: 712;
  --font-weight-regular: 360;

  /* Colors - https://coolors.co/312c2b-524948-57467b-7cb4b8-70f8ba-cafe48-fdfefb-574ae2-7065e6 */
  
  --foreground: #312c2b;
  --foreground-alt: #524948;
  --accent-1: #57467b;
  --accent-2: #7cb4b8;
  --accent-3: #70f8ba;
  --accent-4: #cafe48;
  --background-r: 253;
  --background-g: 254;
  --background-b: 251;
  --background: rgb(
    var(--background-r),
    var(--background-g),
    var(--background-b)
  );
  --background-semi-transparent: rgba(
    var(--background-r),
    var(--background-g),
    var(--background-b),
    0.8
  );
  --link-color: #30A7C5;
  --link-interaction-color: #53BBD5;
}

html,
body {
  font-family: 'Assistant';
  font-size: var(--size-regular);
  line-height: calc(1 / var(--ratio));
  font-weight: var(--font-weight-regular);
  background-color: var(--background);
  color: var(--foreground);
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.step {
  width: 1920px;
  height: 1080px;
  transition: opacity 300ms ease-in-out;
}

.step.future {
  opacity: 0;
}

.step.active,
.step.past {
  opacity: 1;
}

#title {
  display: grid;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(
    -10deg,
    var(--background),
    var(--background) 50%,
    var(--accent-4) 50%,
    var(--accent-4)
  );
}

h1 {
  font-size: var(--size-large-4);
  font-weight: var(--font-weight-heavy);
  text-align: center;
  padding: var(--size-large-5);
}

.slide {
  padding: var(--size-regular);
}

h2 {
  font-size: var(--size-large-3);
  font-weight: var(--font-weight-heavy);
  margin-bottom: var(--size-small-1);
}

h2::after {
  content: '';
  display: block;
  height: var(--size-small-4);
  background-image: linear-gradient(
    to right,
    var(--accent-1),
    var(--accent-3)
  );
}

.sub-slide {
  display: grid;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  gap: var(--size-regular);
}

.sub-slide.text {
  grid-template-columns: var(--size-large-11) var(--size-large-11);
  align-items: flex-start;
  justify-items: stretch;
}

.sub-slide.text .title {
  grid-column: 1 / 3;
  padding-bottom: var(--size-small-3);
  border-bottom: var(--size-px-2) solid var(--foreground-alt);
}

.caption {
  font-size: var(--size-large-1);
}

a:link,
a:visited {
  color: var(--link-color);
}

a:hover,
a:active {
  color: var(--link-interaction-color);
}

h3 {
  font-size: var(--size-large-2);
  font-weight: var(--font-weight-heavy);
}

h4 {
  font-size: var(--size-large-1);
  font-weight: var(--font-weight-heavy);
}

ul {
  list-style-type: circle;
  margin-left: var(--size-regular);
}

ol {
  list-style-type: decimal;
  margin-left: var(--size-regular);
}

#wrap-up {
  display: flex;
  flex-direction: column;
  background-color: var(--background-semi-transparent);
}

#wrap-up .content {
  flex-grow: 1;
  display: grid;
  grid-template-columns: var(--size-large-10) var(--size-large-10);
  gap: var(--size-regular);
  justify-content: space-around;
  align-content: center;
  text-align: center;
}