/* Your Styles */

@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Sahitya:wght@700&display=swap');
/* Style Tile with CSS var */

:root{
  --color1: #453A3E;
  --color2: #0B2351;
  --color3: #861001;
}

/* diagnostic styling. remove when done */
/* * {
  outline: 1px dotted gray;
} */

/* Layout with css grid */
body {
  display: grid;
  background-color: var(--color1);
}

main {
  /* css grid */
  place-self: center;

  /* flexbox */
  display: flex;
  flex-wrap: wrap;
}

figure {
background-color:var(--color2);
padding: 30px;
border-radius: 10px;

margin: 10px;

width: 300px;
}

/* Backdrop for modal overlay */
::backdrop {
  background: rgb(26, 21, 21);
}

/* Animation */
dialog {
  border: none;
  animation: rollIn 1s;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5);
}
h2{
  font-family: 'Sahitya', serif;
  color: #ECECEC;
  font-size: 225%;
  text-align: center;
}
figcaption{
  font-family: 'Kiwi Maru', serif;
  color: #ECECEC;
}