html {
   --background-color-light: pink;
  --background-color-dark: purple;
  --accent-color-light: black;
  --acent-color-dark: white;
  --yellow-accent: yellow;
  --golden-accent: gold;
  --pink-accent: #ff78d2;
  --plum-accent: plum;
  --magenta-accent: magenta;
  --lila-accent: #cb8aeb;
  --hot-pink-accent: hotpink;
  --beige-accent: beige;
  --lila-accent: #cb8aeb;
  --pink-world-accent: #f5b5e0;
  --gray-accent: gray;
}

@font-face {
  font-family: Rounded;
  src: url("assets/style/Rounded\ Elegance\ Regular.otf");
}

body {
background-color: var(--pink-world-accent);
font-family: Rounded;
font-size: 50px;
text-align: center;
}

.homenav a {
  background-color: var(--accent-color-light);
  color: var(--acent-color-dark);
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
}

.homenav a:hover {
  background-color: var(--gray-accent);
}

.active {
  border-radius: 20px;
}

img {
  width: 300px;
  height: 300px;
  border-radius: 25px;
}

img:hover {
  transform: scale(1.2);
  box-shadow: 10px 10px 20px var(--accent-color-light);
}

details {
  position: relative;
}

summary {
  list-style: none;
  cursor: pointer;
}


.popover {
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--pink-world-accent);
  padding: 20px;
  width: 250px;
  box-shadow: 0 5px 15px var(--gray-accent);
  border-radius: 10px;
}

details {
  position: relative;
  font-size: 30px;
}


ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

@media (min-width: 60em) {
  ul {
  grid-template-columns: 1fr 1fr 1fr;
  }
}

a:focus-visible,
button:focus-visible {
  outline: 5px solid var(--yellow-accent);
}