/******************************************************************************
css for index page
******************************************************************************/
:root {
  --light: #e9ebeb;
  --dark: #9e9791;
  --darker: #514a47;
  --darkest: #292929;
  --third: #ee646e;
}

/******************************************************************************
set id elements
******************************************************************************/
#dream-img-a {
  content: url("../img/laptop/laptop-01.jpg");
}

#dream-img-b {
  content: url("../img/laptop/laptop-01.jpg");
}

#design-img-a {
  content: url("../img/drawing/drawing-01.jpg");
}

#design-img-b {
  content: url("../img/drawing/drawing-01.jpg");
}

#develop-img-a {
  content: url("../img/humanity/humanity-code-01.jpg");
}

#develop-img-b {
  content: url("../img/humanity/humanity-code-01.jpg");
}

/******************************************************************************
p5 Canvas
******************************************************************************/
/* hold p5 canvas in landing */
.landing-canvas {
  display: grid;
  grid-area: landing-canvas;
}

/* child of container landing */
.landing {
  display: grid;
  grid-area: landing;
  grid-template-columns: calc(100vw - 20px);
  grid-template-rows: calc(100vh - 140px - 40px);
  grid-template-areas: "landing-canvas";
}

/* landing parent container */
.container-landing {
  grid-area: cont-landing;
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "landing";
  /* margin: 10px 0;/ */
}

/*end/bottom of landing holds down arrow*/
/* .landing-end {
  border: 1px solid blue;
  display: grid;
  grid-area: landing-end;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: ". arrow .";
} */

/******************************************************************************
p5 Canvas end
******************************************************************************/

/******************************************************************************
arrow to sections
******************************************************************************/
.arrow-bar-l,
.arrow-bar-r {
  width: 30px;
  height: 1px;
  background-color: var(--darker);
}

/* rotate top bar */
.arrow-bar-l {
  display: grid;
  transform: translate(4px, 0) rotate(45deg);
}

/* rotate bottom bar */
.arrow-bar-r {
  display: grid;
  transform: translate(-4px, 0) rotate(-45deg);
}

.arrow-d-box:hover {
  cursor: pointer;
}

.arrow-d-box:hover .arrow-bar-l,
.arrow-d-box:hover .arrow-bar-r {
  background-color: var(--third);
}

.arrow-left {
  display: grid;
  grid-area: arrow-l;
  justify-content: end;
  align-items: center;

}

.arrow-right {
  display: grid;
  grid-area: arrow-r;
  align-items: center;
}

.arrow-d-box {
  display: none;
  grid-area: arrow-d-box;
  grid-template-columns: auto auto;
  grid-template-areas: "arrow-l arrow-r";
  opacity: 1;
  transition: 2s all ease;
}

/* do i need this?  */
/* #arrow-to-dream.arrow-d-box {
  display: grid;
} */

.arrow-d-box.active {
  opacity: 0;
}

.container-arrow-d {
  /* border: 1px solid black; */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 8vh;
  grid-template-areas: ". arrow-d-box .";
}

/* bounce down effect */
.arrow-d-bounce {
  animation: bounce 8s infinite;
  animation-delay: 6s;
}

@keyframes bounce {

  0%,
  30%,
  100% {
    transform: translateY(0);
  }

  15% {
    transform: translateY(15px);
  }
}

/******************************************************************************
arrow to section end
******************************************************************************/

/******************************************************************************
container 1 
image | text
text  | image
cont-1-img-b for dyanimc montage scroll
******************************************************************************/
.container-1-left,
.container-1-right {
  /* sm */
  /* border: 1px solid black; */
  display: grid;
  grid-area: container-1;
  grid-template-columns: 1fr;
  /* wrap just around desired space */
  grid-template-rows: auto auto;
  /* span the size of the screen height */
  /* grid-template-rows: calc(100vh - 40px - 40px); */
  grid-template-areas: "cont-1-img" "cont-1-body";
  justify-items: center;
  grid-gap: 20px;
}

.cont-1-img-left,
.cont-1-img-right {
  /* sm */
  /* border: 1px solid green; */
  display: grid;
  grid-area: cont-1-img;
  grid-template-columns: 1fr;
  grid-template-areas: "cont-1-img-a";
  width: 100%;
  justify-items: center;
  align-items: center;
}

.cont-1-body-left,
.cont-1-body-right {
  /* sm */
  /* border: 1px solid red; */
  display: grid;
  grid-area: cont-1-body;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "cont-1-body-a" "cont-1-body-b";
  width: 100%;
  text-align: center;
  justify-items: center;
}

.cont-1-img-a {
  /* border: 1px dotted blue; */
  display: grid;
  grid-area: cont-1-img-a;
  width: 100%;
  max-width: 300px;
  min-width: 100px;
  height: auto;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 0 rgba(0, 0, 0, 0.2),
    6px 6px 9px 0 rgba(0, 0, 0, 0.2),
    inset 0 0 0 0 rgba(255, 255, 255, 0.2),
    -6px -6px 9px 0 rgba(255, 255, 255, 0.5);
}

.cont-1-img-b {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  max-width: 300px;
  min-width: 100px;
  height: auto;
  border-radius: 10px;
}

.cont-1-body-a {
  /* border: 1px dotted blue; */
  display: grid;
  grid-area: cont-1-body-a;
  width: 100%;
  max-width: 300px;
  min-width: 100px;
  align-items: end;
}

.cont-1-body-b {
  /* border: 1px dotted blue; */
  display: grid;
  grid-area: cont-1-body-b;
  width: 100%;
  max-width: 300px;
  min-width: 100px;
}

/******************************************************************************
container 1 end
******************************************************************************/

/******************************************************************************
for large screens
******************************************************************************/
@media only screen and (min-width: 850px) {

  .arrow-d-box {
    display: grid;

  }

  /* container 1 */
  .cont-1-img-a {
    max-width: 600px;
    min-width: 100px;
  }
  
  .cont-1-img-b {
    max-width: 600px;
    min-width: 100px;

  }
  
  .cont-1-body-a {
    max-width: 600px;
    min-width: 100px;
  }
  
  .cont-1-body-b {
    max-width: 600px;
    min-width: 100px;
  }

  .container-1-left {
    /* lg */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: calc(100vh - 40px - 40px);
    grid-template-areas: "cont-1-img cont-1-body";
    justify-items: center;
    grid-gap: 20px;
  }

  .container-1-right {
    /* lg */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: calc(100vh - 40px - 40px);
    grid-template-areas: "cont-1-body cont-1-img";
    justify-items: center;
    grid-gap: 20px;
  }

  .cont-1-img-left {
    /* lg */
    display: grid;
    grid-area: cont-1-img;
    grid-template-columns: 1fr;
    grid-template-areas: "cont-1-img-a";
    width: 100%;
    justify-items: end;
    align-items: center;
  }

  .cont-1-img-right {
    /* lg */
    display: grid;
    grid-area: cont-1-img;
    grid-template-columns: 1fr;
    grid-template-areas: "cont-1-img-a";
    width: 100%;
    justify-items: start;
    align-items: center;
  }

  .cont-1-body-left {
    /* lg */
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 3fr;
    grid-template-areas: "cont-1-body-a" "cont-1-body-b";
    text-align: center;
    justify-items: end;
  }

  .cont-1-body-right {
    /* lg */
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 3fr;
    grid-template-areas: "cont-1-body-a" "cont-1-body-b";
    text-align: center;
    justify-items: start;
  }
}