/* -- INIT -- */
:root {
  --main-bg: rgb(255, 234, 165);
  --main-content: rgb(153, 189, 134);
  --post-card: rgb(172, 99, 151);
  --post-card-hover: rgb(188, 166, 218);
}


/* -- INDEX -- */
body {
  background-color: var(--main-bg);
  color: black;
  font-family: Verdana;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

/* Header */

header {
  background-color: indianred;
  background-blend-mode: overlay;
  padding-left: 20px;
}

h1 {
  font-family: fantasy;
  color: black;
  opacity: 100%;
}

/* Main */

header,
footer {
  border-radius: 5px;
}

main {
  min-height: 100dvh;
  display: flex;
  flex-direction: row;
}

#site-content-container {
  background-color: color-mix(in srgb, var(--main-content) 90%, transparent);
  border-radius: 10px;
  width: 90%;
  display: flex;
  flex-direction: column;
}

.post {
  background-color: color-mix(in srgb, var(--post-card) 70%, transparent);
  color: darkmagenta;
  margin: 5px;
  padding: 2px;
  padding-left: 10px;
  height: 10rem;
  border-radius: 10px;
}

.post:hover {
  background-color: color-mix(in srgb, var(--post-card-hover) 100%, transparent);
  transition: 1s;
  cursor: pointer;
}

.post-span {
  font-size: small;
  font-style: italic;
}

/* Frame */

#frame-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: color-mix(in srgb, rosybrown 90%, transparent);
  padding-top: 10px;
  border-radius: 10px;
  width: 10%;
}

#frame-container:hover {
  background-color: color-mix(in srgb, rosybrown 100%, transparent);
  transition-duration: 500ms;
}

#mini-banner {
  font-weight: bolder;
  font-family: sans-serif;
  text-align: center;
  width: 90%;
}

#mini-banner:hover {
  background-color: color-mix(in srgb, teal 80%, transparent);
  transition-duration: 500ms;
  text-indent: 0.2rem;
  letter-spacing: 0.2rem;
  cursor: pointer;
  border-radius: 5px;
}

.frame-buttons {
  width: 150px;
  background-color: blanchedalmond;
  border-radius: 5px;
  border-style: double;
}

/* Footer */

footer {
  background-color: color-mix(in srgb, red 70%, transparent);
  background-blend-mode: multiply;
  display: flex;
  flex-direction: row;
  padding-left: 20px;
  padding: 5px;
}

.footer-text {
  font-family: fantasy;
  font-weight: bold;
  color: black;
}

/*-- GALLERY --*/

#gallery-container {
  display: flex;
  flex-direction: column;
  padding: 5px;
  gap: 5px
}

.gallery-image {
  width: 60%;
}