/*----------------- GENERAL STRUCTURE -----------------*/
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Major+Mono+Display&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Lato', sans-serif;
}

/*------------BACKGROUND STARS--------------*/
/* ---- reset ---- */
body { margin: 0; 
}

canvas { display: block; vertical-align: bottom; }
/* - particles.js container - */
#particles-js { position: absolute; width: 100%; height: 100%; z-index: -1; }
/*------------BACKGROUND STARS--------------*/

.maingridcontainer {
  display: grid; /*Horizonal page Layout*/
  grid-template-columns: 25px 1fr 25px; /*Horizonal page Layout*/

}
/*------------Header--------------*/
.parentheader {
  height:100vh; /* same height as the viewport window*/
  display: flex; /* make it a flexbox*/
  align-items: center; /* aligns block items in the area*/
  justify-content: center; /*Center vertically once rotated using viewport height*/
}
.childheader {
  transform: rotate(-90deg); /*rotate nav container 90 degres*/
  width:100vh; /*same width as the viewport height*/
  position: fixed; /* Stays fixed to within the area assigned*/
}
.menu {
  display: flex; /* set flexbox ul*/
  flex-direction: row; /* make list appear as a list using flexbox*/
  justify-content: space-around; /* distribute list equally*/
  list-style-type: none; /* delete bullets*/
  margin:0; /* delete spaces taken by bullets*/
  padding: 0 2rem 0 2rem;
}

/*------------Footer--------------*/
.parentfooter {
  height:100vh; /* same height as the viewport window*/
  display: flex;
  align-items: center; /* aligns block items in the area*/
  justify-content: center; /*Center vertically once rotated using viewport height*/
}
.childfooter {
  transform: rotate(-90deg); /*rotate nav container 90 degres*/
  width:100vh; /*same width as the viewport height*/
  position: fixed; /* Stays fixed to within the area assigned*/
  padding: 0 2rem 0 2rem;
}



/*------------MAIN - GRID--------------*/

.section-grid {
  /* Grid Fallback */
  display: flex;
  flex-wrap: wrap;
  
  /* Supports Grid */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  grid-auto-rows: minmax(200px, auto);
  grid-gap: 2.5rem;
  padding: 1.5rem;
}

.article-grid {
  /* Demo-Specific Styles */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 200px;
  
  /* Flex Fallback */
  margin-left: 5px;
  margin-right: 5px;
  flex: 1 1 200px;
}

.h2-grid, .p-grid{
  margin:.5rem .5rem .5rem .5rem;
}

.a-grid {
  text-decoration: none;
  opacity: .6;
}

.a-grid:hover {
  text-decoration: none;
  opacity: 1;
  transition-duration:.5s;
}




@media (max-width: 1300px) {

  .menu, .childfooter {
    padding: 0 3rem 0 8rem;
  }
  .a-grid {
    opacity: 1;
  }
  .section-grid {
    width:90%;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin:0 0 0 1rem;
  }
}

@media (max-width: 600px) { 
  
  .a-grid {
    opacity: 1;
  }
  .section-grid {
    padding:0rem;
  }
}


/* ---------------- STYLING ---------------- */
body{
  color: white; /* font is white througout the document*/
  cursor: url("https://agaleare.com/hectorarevalo/media/images_website/cursor_pointer.png"), auto;
}

a {
  cursor: url("https://www.agaleare.com/hectorarevalo/media/images_website/cursor_hand.png"),auto;
  text-decoration: none;
}

ul.menu a, a, a.childfooter:last-of-type {
  color: rgba(147, 149, 152, 0.80);
  font-size: 1rem;
  letter-spacing: 0.15em;
  font-weight:700;
}
ul.menu a:hover, a:hover {
  color: rgba(250, 250, 250, 1);
  transition-duration:.5s;
}

.section-main{
  height:100vh; /* same height as the viewport window*/
  display: flex;
  flex-direction: column;
  align-items: center; /* aligns block items in the area*/
  justify-content: center; /*Center vertically once rotated using viewport height*/
}

h1, h1 a{
  text-align: center;
  font-family: 'Major Mono Display', monospace;
}

h1.h1-main {
  font-size: 3.5rem;
  color: rgba(147, 149, 152, 0.90);
}

.p-main {
  text-align:center;
  font-size: 1.5rem;
  font-weight:400;
  width: 100%;
  padding:2rem 30% 0rem 30%;
  letter-spacing: 0.15em;
  line-height: 2rem;
}

.p-main:last-of-type {
  font-size: 1rem;
  padding-top:4rem;
  line-height: 2rem;
}
.p-main:last-of-type a {
  font-weight:700;
}

.article-bio{
  display: grid;
  grid-template-columns: 50% 50%;
  /*grid-template-rows: 1fr 100%;*/
  grid-auto-flow: row;
}
.photo-bio {
  grid-column: 1;
  grid-row: 1 / 4;

  background: linear-gradient(to left,
    rgba(0,0,0,.9), rgba(0,0,0,.7),
    rgba(0,0,0,.5), rgba(0,0,0,.2),
    rgba(0,0,0,.05),rgba(0,0,0,0),rgba(0,0,0,.05),
    rgba(0,0,0,.2),rgba(0,0,0,.5),
    rgba(0,0,0,.7), rgba(0,0,0,.9) ),
    url("https://www.agaleare.com/hectorarevalo/media/images_website/s3c7a.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 10%;
  
  margin-left:10%;
  width:90%;
}

.p-bio {
  grid-column: 2;

  text-align:left;
  font-size: 1.5rem;
  font-weight:400;
  width: 100%;
  padding:0rem 20% 2rem 2rem;
  letter-spacing: 0.15em;
  line-height: 2rem;
}
.p-bio a {
  font-size: 1.5rem;
}


h1.h1-pages, h1.h1-pages a{
  font-size: 1.7rem;
  padding:1rem 1rem 2rem 1rem;
}

h2.h2-pages, h2.h2-gen {
    color: rgba(250, 250, 250, 1);
    font-size: 1.6rem;
    font-weight:300;
    letter-spacing: 0.12em;
    padding:0rem 1rem .8rem 2rem;
}

.h3-gen {
  color: rgba(250, 250, 250, 1);
  font-size: 1.5rem;
  font-weight:300;
  letter-spacing: 0.12em;
  padding:0rem 0rem 2rem 2rem;
}

.h2-grid{
  color: rgba(250, 250, 250, 1);
  text-shadow: #000 0px 0 10px;
  font-size: 1.5rem;
  font-weight:400;
  text-align: center;
}
.p-grid{
  color: white;
  font-size: 1rem;
  font-weight:300;
  text-align: center;
}

p.childfooter {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  letter-spacing: 0.15em;
  font-weight:300;
}


.article-form{
  display: flex;
  flex-direction: column;
  align-items: center;
}

form{
  width:55%;
}

fieldset, form{
  border-style: none;
  padding:0;
  margin:0;
  
  display: flex;
  flex-direction: column;
}

legend.h2-gen {
  color: rgba(250, 250, 250, 1);
  font-size: 1.6rem;
  font-weight:300;
  letter-spacing: 0.12em;
  padding: 0rem 0rem .8rem 0rem;
}

fieldset > h3.h3-gen {
    padding: 0rem 0rem .8rem 0rem;
}

label:first-of-type{
  padding-top: 0;
}

label{
  text-align:left;
  font-size: 1.2rem;
  font-weight:300;
  padding-bottom:.2rem;
  padding-top: .8rem;
  letter-spacing: 0.15em;
  line-height: 2rem;
  cursor: url("https://agaleare.com/hectorarevalo/media/images_website/cursor_pointer.png"), auto;
}

input, textarea{
  border-style: none;
  width:100%;
  
  text-align:left;
  font-size: 1.2rem;
  font-weight:300;
  text-indent:1rem;
  
  padding-bottom:.2rem;
  color: rgba(255, 255, 255, .35);
  background-color:rgba(125, 125, 125, 0.20);

}

input.button {
  background-color:rgba(125, 125, 125, 0.20);

  padding: .8rem;
  margin-top: 1.5rem;

  margin-left:70%;
  width:30%;

  text-align:center;
  text-indent:0;
  color: rgba(255, 255, 255, .75);
  
  cursor: url("https://agaleare.com/hectorarevalo/media/images_website/cursor_hand.png"), auto;
}

input.button:hover{
  background-color:rgba(125, 125, 125, 0.60);
  color: rgba(255, 255, 255, 1);
  transition-duration:.5s;
}

/* ---------- Styling Single ----------- */

.section-single-container{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  
}

article.article-single-left,
article.article-single-video-left,
article.article-single-right,
{
  width:50%;
}

.figure-single-left{
  width: 75%;
  margin:0rem 0rem 0rem 25%;

  display: grid;
  grid-template-columns: 1fr 25%;
}

.figure-single-video-left{
  width: 75%;
  margin:0rem 0rem 0rem 25%;
}

.img-art{
  width:100%;
  padding:0rem 1rem 0rem 0rem;
  outline: none;
}

.figcaption-art{
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding:0rem 0rem 0rem 1rem;
  font-size:0;
}

.figcaption-art > img{
  width:100%;
  cursor: url("https://agaleare.com/hectorarevalo/media/images_website/cursor_hand.png"), auto;
}

.h3-single-right{
  text-align:left;
  font-size: 1.6rem;
  font-weight:300;
  width: 100%;
  padding:0rem 20% .5rem 2rem;
  letter-spacing: 0.15em;
  line-height: 2rem;
}
.p-single-right{
  text-align:left;
  font-size: 1.2rem;
  font-weight:400;
  width: 100%;
  padding:0rem 20% 2rem 2rem;
  letter-spacing: 0.15em;
  line-height: 2rem;
}


@media (max-width: 1300px) {

  h1.h1-pages, h1.h1-pages a{
  font-size: 1.2rem;
  }
    
  h2.h2-pages, h2.h2-gen {
  padding:0rem 0rem 0rem 1.6rem;
  }
  .h3-gen {
  padding:0rem 0rem 2rem 1.6rem;
  }
  
  legend.h2-gen {
    padding: 0rem 1rem 0rem 0rem;
  }
  
  fieldset > h3.h3-gen {
    padding:0rem 0rem 2rem 0rem;
  }
  
  .p-bio {
    font-size: 1.2rem;
    padding:1.5rem 10% 1.5rem 10%;
    line-height: 1.5rem;
  }
  .p-bio a {
    font-size: 1.2rem;
  }
  
  form{
    width:90%;
  }
  input.button {
    background-color:rgba(125, 125, 125, 0.50);
    margin-left:70%;
    width:30%;
  }
    /* SINGLE PIECE PAGE STYLES MAIN GRID ALIGNMENT */
  .section-single-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  article.article-single-left,
  article.article-single-video-left,
  article.article-single-right {
    width:100%;
  }
  
/* SINGLE PIECE PAGE STYLES PHOTOS ALIGNMENT */
  .figure-single-left{
    width: 70%;
    margin:0rem 15% 2rem 15%;
    
    display: flex;
    flex-direction: column;
  }
  
  .figure-single-video-left{
    width: 86%;
    margin:0rem 7% 2rem 7%;
  }
  
  .img-art{
    width:100%;
    pading:0rem .5rem 0rem .5rem;
  }
  .figcaption-art{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    padding:0rem 1rem 0rem 1rem;
  }

  .figcaption-art > img{
    width:30%;
    height: 100%;
    padding:2rem 0rem 0rem 0rem;
  }

}


@media (max-width: 600px) {
  
  h1.h1-main, h1.h1-main a{
    font-size: 2.5rem;
  }
  .p-main {
    font-size: 1rem;
    padding:1.5rem 10% 1.5rem 10%;
    line-height: 1.5rem;
  }

  .article-bio{
    display: flex;
    flex-direction:column;
  }
  .photo-bio {
    height:20rem;
    margin:0rem 5% 0rem 5%;
    width:90%;
  }
  .p-bio {
    text-align:center;
    font-size: 1rem;
    padding:1.5rem 10% 0rem 10%;
    line-height: 1.5rem;
  }
  .p-bio a {
    font-size: 1rem;
  }

  form{
    width:90%;
  }

  input.button {
  background-color:rgba(125, 125, 125, 0.50);
  margin-left:0;
  width:100%;
  }

  .h3-single-right{
    font-size: 1.4rem;
    padding:0rem 10% 0rem 10%;
    width: 90%;
  }
  .p-single-right{
    font-size: 1rem;
    padding:.25rem 10% 1.0rem 10%;
    line-height: 1.45rem;
    width: 90%;
  }

}