/* 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;
  background-color: black;
}

.quote {
  font-family: Arial, Helvetica, sans-serif;
  width: 50lvw;
  text-align: center;
  font-size: 0.9em;
    & a {text-decoration: none; color: white;}
    & a:hover {opacity: 0%; transition-duration: 1.2s;}
}

h1, h2, h3, h4 {
  text-align: center;
  font-family: "Courier New", serif;
  color: white;
}

nav a {color: red; text-decoration: none;}

.grid-container-a h4 {font-size: 1.3em;}
.grid-container-a h4:hover {color: deeppink;}
  
.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 */
.index-wall-right {
  position: fixed;
  right: 0;
  top: 0;
    & img {
      width: 100%;
    }
}

.index-wall-left {
  position: fixed;
  left: 0;
  top: 0;
    & img {
      width: 100%;
    }
}

.grid-container-a {width: 50vw;}

.grid-a-portals {
  grid-column: auto / span 4;
  padding: 10px;
  margin: 0px 30px 50px 30px;
}

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

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

.grid-a-portals img {
  max-width: 100%;
  opacity: 60%;
}
  
.grid-a-portals img:hover {
  opacity: 100%;
  transform: scale(1.1);
  transition-duration: 0.7s;
}

                                    /* c = Artwork */
.grid-container-c {
  width: 55lvw;
  min-width: 900px;
}

.grid-col-c {
	grid-column: auto / span 3;
	display: flex;
	flex-direction: column;
	margin: 0px 10px 0px 10px;
}

.col-photo img {width: 100%; padding: 0px 0px 20px 0px;}

.painting-nav {
  width: 50lvw;
  color: white;
    & a {color: Coral;}
    & a:hover {color: deeppink;}
}

@media only screen and (width <= 750px) {
	.grid-container-c {width: 90lvw; min-width: 90lvw;}
	.grid-col-c {grid-column: auto / span 6;}
}
                                                                      /* c = about me + Crew Leader bios */
/* This is a single-line comment
.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%;
}
c = about me + Crew Leader bios */
                                                                                           /*  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: 1250px) {
  .grid-a-portals {grid-column: auto / span 6;}
  .quote, .painting-nav {width: 90lvw;}
}
  
@media only screen and (max-width: 750px) {
  .grid-a-portals {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;}
}