html {

  width: 100%;
  height:auto;

  margin: 0;
  border: 0;
  padding: 0;
}

body {

  display: flex;

  width: 100%;
  height: 100%;

  margin: 0;
  border: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 0;
  padding-right: 0;

  justify-content: center;
}

.inline {
  display: inline;
}

.vid-smaller {

  max-height: 700px;
  width: auto;

}

.aboutImage {

  width: 250px;
  height: auto;

  max-width: 100%;

  min-height: 0px;
  min-width: 0px;

  object-fit:contain;

}

.galleryImage {

  max-height: 100%;
  max-width: 100%;

  min-height: 0px;
  min-width: 0px;

  object-fit:contain;
}

video {
  padding: 0px;
}

p {
  font-family: myFont2;
  font-size: min(18px, 5vw);
  text-align: center;
  margin:12px;
}

a {
  display:flex;
  flex-direction: column;
  width:auto;
  height:auto;
  font-family: myFont2;
  font-size:min(18px, 5vw);
}

video {

  width:100%;
  height:100%;

}

.compVid{
  max-width:480px;
  max-height: 360px;
}

.topspace {

  margin-top: 12px;
}

.bottomspace {

margin-bottom: 12px;

}

.nospace {
  margin-top: 0px;
  margin-bottom: 0px;
}

figure {

  display:flex;
  flex-direction: column;
  height:min-content;
  width:auto;
  margin:0px;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(100, 100, 100, 0);
  background-color: rgba(240, 240, 240, 0);
}

.award {
  border: 0px solid rgb(180, 180, 180);
  background-color: rgba(0,0,0,0);
}

figcaption {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: myFont2;
  font-size: min(16px, 5vw);
  border-top: 2px solid rgb(180, 180, 180);
  width: 100%;
  height:100%;
}

figcaption br {display:block;}

.gridGallery {

  display:grid;
  height:auto;
  width:auto;
  grid-template-columns:repeat(2,1fr);
  grid-column-gap: 4px;
  grid-row-gap:4px;
  justify-content: stretch;
  align-content: stretch;
  justify-items:center;
  align-items:center;
}

.gridGallery2 {

  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-column-gap: 4px;
  grid-row-gap:4px;
  justify-content: stretch;
  align-content: stretch;
  justify-items:center;
  align-items:center;
  height:auto;
  width:auto;
}

.gridGallery3 {

  display:grid;
  height:auto;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-column-gap: 4px;
  grid-row-gap:4px;
  justify-content: center;
  align-content: center;
  justify-items:center;
  align-items: center;
}

#grdAbout {

  display:grid;
  width:100%;
  height: 100%;
  grid-template-rows: 100px max-content max-content auto 20px;
  grid-template-columns: 1fr;
  grid-row-gap:8px;
  justify-content:stretch;
  align-content:stretch;
  justify-items:center;
  align-items:stretch;
}

#AboutButton {
  grid-row: 1;
  grid-column: 1;
}

#AboutHeader {
  grid-row: 2;
  grid-column: 1;
}

#AboutImage {
  grid-row: 3;
  grid-column: 1;
}

#AboutContent {

  grid-row: 4;
  grid-column: 1;

  display:flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-family: myFont2;

}

#AboutCopyright{
  grid-row: 5;
  grid-column: 1;
  padding-left: 8px;
  padding-right: 8px;
}

@media (max-width:870px) {.gridGallery2 {grid-template-columns:repeat(2, 1fr);}}

@media (max-width:752px) {

  p {text-align: justify; text-justify:auto;}
  br {display:none;}
  section br {display:block;}
  section p {text-align: center;}
}

@media (max-width:500px) {

.gridGallery2 {grid-template-columns:1fr;}
.gridGallery {grid-template-columns: 1fr;}

}