@import url("./config.css");

* {
  box-sizing: inherit;
}

body {
  margin: 0 auto;
  height: var(--page-height);
  width: var(--body-width-default);

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  background-color: var(--background-level-1);
}

@media screen {
  body {
    width: var(--body-width-large-screen);
  }
}

@media screen and (max-width: 768px) {
  body {
    width: var(--body-width-small-screen);
  }
}

section.slide {
  height: 100dvh;
  width: 75%;
  padding: var(--slide-content-padding);

  &.centered-layout {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }
}

p {
  width: var(--description-width);
  margin-top: 0;

  font-family: var(--description-font-family);
  font-size: var(--description-font-size);

  color: var(--foreground-level-1);
  text-align: justify;
}