:root {
  /* User input values */
 --grid-layout-gap: 5px;
 --grid-column-count: 3;
 --grid-item-min-width: 360px;
  /* Calculated values */
 --gap-count: calc(var(--grid-column-count) - 1);
 --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
 --grid-item-max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
}

html {
  height: 100%;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  background-color: rgb(38, 54, 233);
  color: aquamarine;
  height: 91vh;
  margin: 0px;
  display: flex;
  flex-direction: column;
  background-image: url("./bgimages/8.png");
}

header {
  text-align: center;
  background-color: lightcyan;
  color: darkslateblue;
  font-weight: bold;
  font-size: x-large;

}

main {
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* Makes the main content scrollable */
}

footer {
  margin-top: auto;
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  position: fixed;
  left: 0;
  bottom: 0px;
  padding-bottom: 10px;
  padding-top: 10px;
  overflow: hidden;
  width: 100%;
}

#top-banner {
  text-align:center;
  font-weight: 900;
  font-size: x-large;
  color: blue;
}

.gallery {
  color: rgb(218, 242, 4);
}

.gallery>a {
  color: #f71010;
}

a:hover {
  text-decoration-line: overline;
}

.inside-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
  padding: 0px;
  border-radius: 5%;
}

.inside-flex-item {
  display: flex;
  text-align: center;
  text-decoration: solid;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr));
  gap: var(--grid-layout-gap);
  margin: 2px;
  padding: 2px;
  justify-items: center;
  border: 5px;
  border-color: #f71010;
}

.grid-text-area {
  background-color: bisque;
  color: black;
  padding: 2ch;
  font-size: large;
  border: 5px;
  border-color: red;
  border-radius: 5%;
  border-width: 8px;
  border-style:groove;
} 
.grid-text-area ul {
  list-style-type: "☑ ";
  margin-left: -2ch;
  margin-top: 0ch;
  margin-bottom: -1ch;  
}
#centertop {
  text-align: center;
}

.grid-item {
  display: grid;
  border-radius: 5%;
  border-color: #f71010;
  color: rgb(16, 10, 10);
  vertical-align: middle;
  margin: 6px;
  padding: 6px;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.grid-item p {
  text-align: left;
  font-size: medium;
}

.grid-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.grid-inside-img img {
  width: 100%;
  object-fit: contain;
}

p {
  text-align: center;
  font-size: x-large;
}

.grid-color-1 {
  background-color: aqua;
}

.grid-color-2 {
  background-color: rgb(68, 233, 17);
}

.grid-color-3 {
  background-color: rgb(157, 255, 0);
}

.grid-color-4 {
  background-color: rgb(255, 251, 0);
}

.grid-color-5 {
  background-color: rgb(240, 236, 33);
}

.grid-color-6 {
  background-color: rgb(33, 240, 123);
}

.grid-item-bluecntr {
  text-align: center;
  color: #0099cc;
  font-weight: bold;
  font-style: oblique;
}

.dues_container {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
}

.outer {
  position: relative;
}

.outer:hover .inner {
  display: block;
}

.inner {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: medium;
  text-align: center;
  color: whitesmoke;
  background-color: black;
}

.dues {
  color: #000;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-weight: bold;
  font-size: larger;
  background-color: wheat;
  width: 260px;
  border-radius: 5%;
  align-self: center;
}

.dues_box {
  text-align: center;
  color: #000;
  background-color: whitesmoke;
}

.dues_box>img {
  width: 220px;
}

/* ---   css-examples/css-cookbook/sticky-footer--download.html */

section {
  height: 100%
}

.wrapper {
  min-height: 90%;
  /* display: grid; */
  /* grid-template-rows: auto 1fr auto; */
}

.page-body {
  padding: 5px;
  border-bottom: 5px;
  background-color: yellow;
}

/* Highlight tile on hover */
.active-tile {
  background-color: #f0f8ff; /* Light blue */
  transition: background-color 0.3s ease;
}

/* Keep selected tile highlighted */
.selected-tile {
  background-color: #cce5ff; /* Darker blue */
  border: 2px solid #0056b3;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}