@import "./navbar.css";
@import "./heading.css";

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap');

:root {
  --bg-light: #EDF2F4;
  --fg-light: #460a63;
  --accent-light: #A7FF35;

  --bg-dark: #282228;
  --fg-dark: #A7FF35;
  --accent-dark: #460a63;
  
  --bg: light-dark(var(--bg-light), var(--bg-dark));
  --fg: light-dark(var(--fg-light), var(--fg-dark));
  --accent: light-dark(var(--accent-light), var(--accent-dark));
}

html, body {
  height: 100vw;
  width: 100%;

  margin: 0;
  padding: 0;
  overflow: hidden;
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

.content {
  display: grid;
  grid-auto-rows: 100vh;
  grid-auto-flow: row;

  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-timeline-name: --content-scroll;
  scroll-timeline-axis: block;

  width: 100vw;
  height: 100vh;
  
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

.button-simple {
  background-color: var(--fg);
  color: var(--bg);
  height: 90%;

  font-size: 0.75em;
  padding: 0.5em;
  place-self: center left;
  box-sizing: border-box;
  border-radius: 0.25em;
  border: none;
  margin: 0;

  font-weight: bold;
  font-family: Roboto, Arial, sans-serif;

  cursor: pointer;
}

.box {
  padding: 1rem;
  border-radius: 0.5rem;

  background-color: rgba(from var(--bg) r g b / 0.7);

  transition: backdrop-filter 0.2s ease;

  &:hover, &:has(*:focus) {
    backdrop-filter: blur(8px);
  }
}