/* a = Index */
/* b = nav */
/* c = about me + Crew Leader bios */
/* d = stone road gazette */
/* e = Dream Journal */
/* f = Our Ship + Pirates */
/* g = Surfing The Web */
/* h = Our Guset Book */
/* i = Social Media */

body {
  display: grid;
  align-items: center;
  justify-items: center;
  height: 100vh;
  margin: 0;
}

a:link {color: navy; text-decoration: none;}
a:hover {color: deeppink;}
a:active {color: ForestGreen;}

header, footer{
  grid-column: auto / span 12;
}
  
h1, h2, h3, h4 {
  text-align: center;
  font-family: "Courier New", serif;
  color: black;
}

.grid-container-a, .grid-container-b, .grid-container-c, .grid-container-d, .grid-container-e, .grid-container-f, .grid-container-g, .grid-container-h, .grid-container-i{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  justify-items: stretch;
}
                                                                                      /* a = Index */
.body-overlay img {
  width: 100vw;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}
  
.grid-a-bottom-margin {
  margin-bottom: 120px;
}

.grid-container-a {
  width: 60vw;
  background-image: url(images/snow-small-2.gif);
}

.grid-container-a h1, .grid-container-a h2{
  color: white;
}

.grid-container-a h1:hover{
  color: deeppink;
}

.grid-a-portals, .grid-a-span, .grid-a-six, .grid-a-three-blue, .grid-a-three-green {
  padding: 10px;
  margin: 10px;
}

.grid-a-portals {
  grid-column: auto / span 4;
  border: dotted white 1px;
}

.grid-a-span {
  grid-column: auto / span 12;
}

.grid-a-six {
  grid-column: auto / span 6;
  background-color: NavajoWhite;
  border: solid Peru 7px;
}

.grid-a-three-blue, .grid-a-three-green {
  grid-column: auto / span 3;
}

.grid-a-portals img, .grid-a-three-blue img, .grid-a-three-green img {
  max-width: 100%;
}
  
.grid-a-portals img:hover, .grid-a-three-blue img:hover, .grid-a-three-green img:hover {
  filter: opacity(50%);
  transform: rotate(180deg);
  transition-duration: 0.7s;
}
                                                                      /* c = about me + Crew Leader bios */
.crewcolumns, .grid-container-c {
  width: 60vw;
  background: AntiqueWhite;
}

.grid-container-border-triangle {
  border-right: solid 12px;
  border-left: solid 12px;
  border-image-source: url(images/arrow-6.png);
  border-image-slice: 40;
  border-image-repeat: repeat;
}

.bio-body, .bio-photo-facts {
  padding: 10px;
}

.grid-c-headshot, .grid-c-bio, .grid-c-footer {
  padding: 10px;
  margin: 10px;
  border: dashed DarkSeaGreen 2px;
  border-radius: 10px;
  justify-content: center;
  align-content: top;
}

.grid-c-headshot img {
  max-width: 100%;
  border-radius: 10px;
}
  
.grid-c-headshot {
  grid-column: auto / span 5;
}

.grid-c-bio, .bio-body {
  grid-column: auto / span 7;
}

.grid-c-footer {
  grid-column: auto / span 12;
}

.bio-photo-facts {
  grid-column: auto / span 5;
}

.crewcolumns {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: normal;
  padding-right: 5px;
  padding-left: 5px;
}

.crewitems {
  grid-column: auto / span 4;
  padding: 15px;
  margin-top: 12px;
}

.crewitems img, .bio-photo-facts img, .bio-body img {
  max-width: 100%;
}

.crewitems img:hover{
  transform: rotate(1080deg);
  border: dashed darkred 5px;
  background-color: red;
  transition-duration: 1.5s;
}

.crewitems h3:hover{
  color: red;
}
                                                                                        /* f = Our Ship + Pirates */
.grid-container-f {
  width: 40vw;
}

.grid-f-body {
  grid-column: auto / span 12;
  background: Antiquewhite;
  justify-content: center;
  justify-content: stretch;
  padding: 20px;
}

.grid-f-body img {
  width: 50%;
  justify-self: stretch;
  justify-items: center;
}
                                                                                          /* g = Surfing The Web */
.grid-container-g {
  width: 60vw;
  background: black;
}

.grid-g-list h1{
  color: white;
}

.grid-g-span, .grid-i-span {
  grid-column: auto / span 12;
  padding: 0 20px 0 20px;
}

.grid-g-links-six {
  grid-column: auto / span 6;
  padding: 0px 10px 0px 0px;
}

.grid-g-links-six h2, .grid-g-links-six h1, .grid-g-links-six a, .grid-g-links-six li {
  color: white;
}

.grid-g-links-six a:hover {
  color: deeppink;
}
  
.grid-g-list {
  grid-column: auto / span 4;
  margin: 10px;
  justify-content: stretch;
}

.grid-g-list img, .grid-i-list img {
  width: 100%;
  justify-self: stretch;
}

.grid-g-list a, .grid-g-list h2, grid-g-list h1 {
  color: white;
}

.grid-g-list a:hover {
  color: deeppink;
}

.grid-g-list img:hover, .grid-i-list img:hover {
  opacity: 70%;
}
                                                                                            /* h = Our Guset Book */
.grid-container-h {
  width: 30vw;
  height: 90vh;
}

.grid-h-iframe {
  grid-column: auto / span 12;
  justify-items: center;
  justify-content: stretch;
  background-color: black;
}
                                                                                              /* i = Social Media */
.grid-container-i {
  width: 300px;
}

.grid-i-list {
  grid-column: auto / span 12;
  padding: 10px;
  margin: 10px;
  justify-content: stretch;
}

                                                                                              /* j = Quotes + Details */
.grid-container-i {
  width: 50vw;
  background-color: AntiqueWhite;
}

.grid-j-header, .grid-j-photo {
  padding: 10px;
  margin: 10px;
}

.grid-j-header {
  grid-column: auto / span 12;
}

.grid-j-photo {
  grid-column: auto / span 3;
}

.grid-j-photo img {
  width: 100%;
}


.grid-j-quotes {
  grid-column: auto / span 9;
  padding: 0px 10px 0px 10px;
  margin: 0px 10px 0px 10px;
}

@media only screen and (max-width: 750px) {
  .grid-a-portals, .grid-a-six, .grid-a-three-blue, .grid-a-three-green {grid-column: auto / span 12;}
  .grid-a-bottom-margin {margin-bottom: 40px;}

  .grid-c-headshot, .grid-c-bio, .crewitems {grid-column: auto / span 12;}
  .grid-g-list, .grid-g-links-six {grid-column: auto / span 12;}
  .grid-h-iframe {grid-column: auto / span 12;}
  .grid-i-list {grid-column: auto / span 12;}
  .grid-container-a, .grid-container-b, .grid-container-c, .crewcolumns, .grid-container-d, .grid-container-e, .grid-container-f, .grid-container-h, .grid-container-i {width: 90vw;}
  .grid-container-g {width: 95vw; margin: 0px;}
}