@use "variables";

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: variables.$scale;
}

body {
  font-family: var(--font-family), serif;
  color: var(--text-color);
  background-color: var(--ground-background);
  margin: 0;
  padding: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --glow-image: url(../../../images/topbar.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
  --glow-blend: hard-light, color-dodge;
}

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

.layout-wrapper {
  min-height: 100dvh;
  scroll-behavior: smooth;
  background-color: var(--ground-background);
  background-blend-mode: var(--glow-blend);
  background-image: var(--glow-image);
  background-position: top;
  background-repeat: no-repeat;
  background-size: auto 20rem;
}

p {
  color: var(--text-color);
}

p.p-secondary {
  color: var(--text-secondary-color);
}
