@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  --blue: #009ddc;
  --white: hsl(0, 0%, 95%);
  --lightgrey: hsl(0deg, 0%, 90%);
  --black: hsl(0, 0%, 10%);
  --maroon: #40101b;
  --darkgrey: hsl(0deg, 0%, 20%);
  --mediumgrey: hsl(0deg, 0%, 40%);

  --font: "Roboto", sans-serif;

  --background: var(--white);
  --background-secondary: var(--darkgrey);
  --accent: var(--maroon);
  --header: var(--darkgrey);
  --text: var(--maroon);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--text);
  height: 100%;
  width: 100%;
}

html, body, dialog {
  font-family: var(--font);
  color: var(--text);
}

dialog {
  background: var(--background);
}

#dialogContent {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
}

dialog p {
  max-height: calc(100vh - 200px);
  width: calc(100vw - 100px);
  max-width: 800px;
  overflow: auto;
}

::backdrop {
  background: black;
  opacity: 0.75;
}