/*
I originally used "w3.css" from https://www.w3schools.com/w3css/tryw3css_templates_teal.htm as
a building block for these pages.  I made some mods to it, hence, my custom "my-w3-based.css".
But in the long run, it was absolutely bloated, and I ended up rewriting most stuff from scratch.
I started building this new style sheet adding my own custom styles, and at the end, my intention
was to just extract the bits and pieces I needed from my custom "my-w3-based.css" file to slay
bloated beast and have something more readable.  But I was not able to quickly extract what I
needed with futzing up a few things.  So in the interest of time, I am just keeping the bloated
beast, including this second style sheet, and then at some future point when I have more time, I
will extract what I need and make one, simply, easy to read style sheet.  But for not, getting
this out the door is priority...
*/

.container_1_col {display: grid; grid-template-columns: auto; padding: 20px; gap: 20px; justify-content: center;}
.container_1_col > div {padding: 20px; text-align: center;}

.container_2_col {display: grid; grid-template-columns: auto auto; padding: 20px; gap: 20px; justify-content: center;}
.container_2_col > div {padding: 20px; text-align: center;}

.container_3_col {display: grid; grid-template-columns: auto auto auto; padding: 20px; gap: 20px; justify-content: center;}
.container_3_col > div {padding: 20px; text-align: center;}

.container_4_col {display: grid; grid-template-columns: auto auto auto auto; padding: 20px; gap: 20px; justify-content: center;}
.container_4_col > div {padding: 20px; text-align: center;}

@media (max-width:1200px) {.container_2_col,.container_3_col,.container_4_col {display: grid; grid-template-columns: 100%; padding: 10px; gap: 20px; justify-content: center;}}

@media (max-width:1200px) {.container_1_col {width: 100%; padding: 10px;}}
@media (min-width:1201px) {.container_1_col {width: 80%;}}

@media (max-width:1200px) {.container_2_col {width: 100%;}}
@media (min-width:1201px) {.container_2_col {width: 80%;}}

@media (max-width:1200px) {.container_3_col {width: 100%;}}
@media (min-width:1201px) {.container_3_col {width: 80%;}}

@media (max-width:1200px) {.w3-container {width: 100%;}}
@media (min-width:1201px) {.w3-container {width: 1000px;}}

@media (max-width:1200px) {ul {padding-inline-start: 10px;}}

/* Okay, here's my new attempt at overlay popups that do not screw up the grid layout */
.mp-hidden {display: none;}
.mp-overlay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); z-index: 1000;}
.mp-popup {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px 30px; border-radius: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); z-index: 1001; max-width: 800px; width: 90%;}
.mp-close-btn {position: absolute; top: -10px; right: 15px; font-size: 48px; cursor: pointer;}

/* okay, this will give us Lauren's custom bullets using her logo */
li {
  display: flex;
  align-items: center;
  padding: 10px;
}

li::before {
  content: url("resources/GCGS_logo--40px.png");
  margin-right: 30px;
}