:root {
  --color: white;
  --hrColor: rgb(194, 79, 194);
  --dialogBackdropColor: rgb(194, 79, 194 / 25%);
  font-family: sans-serif;
}

body {
  margin: 0;
  padding: 0;
  color: var(--color);
  background-image: url(img/2025.jpg);
  background-size: cover;
  height: 100vh;
  width: 100%;
  backdrop-filter: brightness(10%);
  
}

h1 {
  margin-top: 0;
  padding-top: 2rem;
}

.hero h1 {
  font-size: 3rem;
}

.hero {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.hero > * {
  padding: 1rem;
}

hr {
  height: 5px;
  border: 0;
  box-shadow: 0 5px 5px -5px var(--hrColor) inset;
}

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

#about {
  width: 70%;
  margin: 0 auto;
}

#about > p {
  margin: 2rem;
}

#cfpDialog::backdrop {
  background-color: transparent;
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
}

#dialogCloseBtn {
  margin: 0px auto;
}

#cfpDialog:open::backdrop {
  background-color: rgb(255 255 255 / 20%);
}

@starting-style {
  #cfpDialog:open::backdrop {
    background-color: transparent;
  }
}