:root{
--clr-background: #FFF;
--font-size:16px;
--main-padding: 5px;
}

* {
  box-sizing: border-box;
}

html, body { 
  margin:0; 
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: var(--font-size);
  XXoverflow-x: hidden; 
  color: var(--clr-gray);
}

#TopGrid {
  display: grid;
  grid-gap: 4px;
  row-gap: 10px;
  grid-template-columns: 0.5fr 0.5fr;
  grid-template-rows: 1200px 1200px 1200px 200px; /* include gap */
  grid-template-areas:
  "TA1 TB1"
  "TA2 TB2"
  "TB3 TB3"
  "TA3 TA3"
 ;
}

@media (max-width: 1200px) {
 #TopGrid {
   row-gap: 10px;
   width: 100vw; 
   XXoverflow-x: hidden;
   grid-template-columns: 1fr;
   grid-template-rows: 1200px 1200px 1200px 1200px 1200px 200px;
   grid-template-areas:
   "TA1"
   "TB1"
   "TA2"
   "TB2"
   "TB3"
   "TA3"
  ;
 }
}

#TB1Grid {
  display: grid;
  background-color: #DDD;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 1000px;
  grid-template-areas:
  "TB1-A1 TB1-B1"
  "TB1-A2 TB1-A2"
 ;
}
#TB1-A1 { /* column 1 proposals */
  padding-left: 10%;
  font-size: 1.2em;
  overflow-y: auto;
}
#TB1-A1 li {
  padding:0.3em;
  line-height:1.0em;
}

#proposal > div {
  padding: 5%;
  padding-top:0px;
}
img.doc {
  height:100%;
  width:100%;
  object-fit: cover;
  object-position: top;
}
#map-image {
  object-fit: contain;
}
/* * { border: 1px solid red } DEBUGGING */ 


/* #TB1 { NEVERposition: NEVERrelative; breaks grid } */ 
/* #TB1Grid { NEVERposition: NEVERrelative; /* breaks grid } */ 

#TA2-B1 {
  padding-top: 8%;
}  
#TA2-B1 .over  { 
  top: 2%;
  left: 70%;
  right: 10%;
  font-size: 1.5em;
}

.over  {  /* for both thumbnail documents */
  position: absolute;
  display:inline-block;
  top: 54%;
  left: 10%;
  right: 10%;
  margin: auto; 
  color: darkblue; 
  font-weight: bold;
  font-size: 2em;
  white-space: nowrap;
  border: 1px solid black;
  padding: 20px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0px 10px 10px #777;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
}

.over:hover {
  transform: scale(1.03);
  box-shadow: 0px 10px 15px #777;
}
.over:active {
  transform: scale(1.05);
  box-shadow: 0px 10px 20px #777;
}

#TB1 h3 {
  margin-bottom: 5px;
} 
#TB1 ul {
  list-style-type: none;
  padding: 0px;
  line-height: 1.5em;
  margin-top: 0px;
}
#TB1 a {
  text-decoration: none;
}
#TB1 li:hover {
  background-color: white;
}
#TB1-B1 {
  overflow-y: scroll;
}

#TA2Grid {
  display: grid;
  grid-gap: 4px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 298px 298px 600px;
  grid-template-areas:
  "TA2-A1 TA2-B1" 
  "TA2-A2 TA2-B1" 
  "TA2-A3 TA2-A3" 
 ;
}

#TB2Grid {
  display: grid;
  grid-gap: 4px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 600px 298px 298px;
  grid-template-areas:
  "TB2-A1 TB2-A1" 
  "TB2-A2 TB2-B2" 
  "TB2-A2 TB2-B3" 
 ;
}

#TB3Grid {
  display: grid;
  grid-gap: 4px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 600px 298px 298px;
  grid-template-areas:
  "TB3-A1 TB3-A1" 
  "TB3-A2 TB3-B2" 
  "TB3-A2 TB3-B3" 
 ;
}


.vbuttons {
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
  margin-top:20px;
}
.vbutton { 
  border: 2px solid black; 
  border-radius: 20px;
  box-shadow: 0px 5px 10px #777;
  overflow: hidden;
  width: 80%;
  height: 35%;
  margin-bottom: 10px;
}
.vidlink {
  cursor: pointer;
}

.vbutton:hover {
  transform: scale(1.03);
  box-shadow: 5px 7px 10px #777;
}
.vbutton:active {
  transform: scale(1.05);
  box-shadow: 0px 0px 0px #777;
}
.vbutton img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.vbuttons .overlay {
  text-align: center;
  color: black; 
  font-weight: bold;
  font-size: 1.2em;
  white-space: nowrap;
}


#TA1Grid {
  display: grid;
  grid-gap:3px;
  grid-template-columns: 40% 60%;
  grid-template-rows: 230px 400px 310px 260px;
  grid-template-areas:
  "TA1-A1 TA1-A1"
  "TA1-B2 TA1-A2"
  "TA1-A4 TA1-B4"
  "TA1-A5 TA1-A5"
 ;
}

#TA1 {
  background: linear-gradient(skyblue, white 20em, transparent 20em);
  position: relative;
  overflow: hidden; 
}
#TA1 h1 { 
  margin-bottom: 0px; 
  margin-top: auto;
  font-size:3em;
}
#TA1-A2 { 
  padding-right: 5%;
  font-size: 1.2em;
  overflow-y: auto;
}
img.TL { 
  position: absolute; 
  top:0px; 
  left:0px; 
  max-height: 100%;
  max-width:30%;
}
img.TR { 
  position: absolute; 
  top:0px; 
  right:0px; 
  max-height: 80%; /* not working */
  max-width:19%;
}
  
#TA1-A1 {
  text-align: center;
  max-height: 100%; 
  display: flex;
  align-items: left;
  flex-direction: column;
}
#TA1-A1 > ul { 
    display: inline-block;
    font-size: 1.4em;
    width: 300px;
    overflow-y: auto;
    height: 100%;
    left: 40%;
    text-align: left;
    color: #555;
    margin-left: 40%;
    margin-bottom:0px;
    padding-left:20px;
}

#TA1-B2 {
 display: flex;
 flex-direction: column;
 XXjustify-content: center;
 XXalign-items: center;
 gap: 10px;
}
#vbuttons {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 XXgap: 10px;
}
#vbuttons > div {
 XXwidth: 80%;
}
#vbuttons .row {
 flex: 1;
}



#TA2-B1 {
  XXposition: relative; /* temp */
}
#TA2-B1 > div {
  padding: 5%;
}
#TA2-B1 img {
  object-position: top;
  box-shadow: 1px 1px 20px 5px rgb(0 0 0 / 30%);
  object-fit: contain;
}
/* * { border: 1px solid red } DEBUGGING */ 



#TA2-B1 { 
  display: flex;
  background-color: #CCC;
  overflow-y: hidden;
  justify-content: center;
  align-items: center; 
}

.img2 {
  width: 100%;
  height: 100%;
}
.img2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#TA1-A5 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#rep { 
  display: flex;
  width: 80%;
  height: 80%;
  gap: 20px;
}
#rep img { /* both images */
  object-fit: cover;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#rep .column { 
  flex: 1; 
  font-size: 1.3em;
}

#TB1 img {
  box-shadow: 1px 1px 20px 5px rgb(0 0 0 / 30%);
  /* offset-x offset-y blur-radius spread-radius color */
  object-position: top;
}
#TA3 {
  text-align:center;
  margin-top:10px
}
#TA3 img {
  width: 20%;
}
#copyright {
  position: relative; 
  margin-right:10px;
  text-align: right;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* added */
    z-index: 1000;
}
.modal.hidden {
    display: none;
}
.modal-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 30px;
    color: #333;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 10px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0px 10px 10px #777;
    z-index: 1001;
}
iframe {
    max-width: 100%;
    max-height: 100%;
}