:root{
  --main-col: rgb(39, 35, 30);
  --sec-col:rgb(71, 58, 43);
  --h1-col: rgb(255, 145, 17);
  --h2-col: rgb(170, 81, 57);
    
  --n-wid: 10%;
  --n-top: 9.3em;
  --n-thickness: 0.3em;
}

*{
  margin: 0;
  padding: 0;
}

body{
  background-color: var(--main-col);
  color: white;
}


#home .Nav{
  width: 100%;
  display: grid;
  grid-template-rows: auto auto auto auto;
  margin-left:5%;
}

.Nav a{
  color: rgb(255, 184, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  background-color: var(--sec-col);
  border-top: thick solid var(--main-col);
  border-top-left-radius: 2em;
  border-bottom-left-radius: 2em;
  font-size: x-large;
  text-decoration-line: none;
}

.Nav .activePage{
  text-decoration-line:underline;
}

.Credits{
  color: var(--sec-col);
  text-align: center;
}


/* How to Calc border position: calc((44.5vw - 9em)/2 + 9em) */

.Header{
  display: grid;
  height: 44.5vw;
  background: linear-gradient(90deg, var(--main-col) 29%, transparent 29%), linear-gradient(transparent var(--n-top), var(--sec-col) var(--n-top), var(--sec-col) calc((44.5vw - var(--n-top))/4 + 9.1em), transparent 0%, transparent calc((44.5vw - var(--n-top))/4 + 9.1em + var(--n-thickness)), var(--sec-col) 0%, var(--sec-col) calc((44.5vw - 9.03em)/2 + 9em), transparent 0%, transparent calc((44.5vw - 9em)/2 + 9em + var(--n-thickness)),var(--sec-col) 0%, var(--sec-col) calc((44.5vw - var(--n-top))*3/4 + 9.2em), transparent 0%, transparent calc((44.5vw - var(--n-top))*3/4 + 9.2em + var(--n-thickness)), var(--sec-col) 0%);
  grid-template-columns: 30% 70%;

  
}

.Header img{
  width: 100%;
  mask: linear-gradient(90deg, transparent 5%, black 30%);
  -webkit-mask-image: linear-gradient(90deg, transparent 5%, black 30%);
  z-index: 1;;
}
.H_info{
  text-align: left;
  height: 44.5vw;
  display: grid;
  grid-template-rows: calc(var(--n-top) - var(--n-thickness)) auto;
}


.H_info h1{
  font-size:xxx-large;
  margin-left:8%;
  color: var(--h1-col);
}

.H_info h2{
  font-size: x-large;
  margin-left:15%;
  color: var(--h2-col);
}

.Socials{
  display: grid;
  grid-template-columns:auto 5vw 5vw 5vw auto;
}

.Socials h2{
  grid-column: 1/6;
  margin-top: 2em;
  text-align: center;
  color: var(--h1-col);
}

.Socials img{
    width: 100%;
}

.instagram{
  grid-column: 2/3;
  height: 5vw;
  background-image: url("../imgVids/icons8-instagram-192.png");
  background-size: 100%;
}

.instagram:hover{
  grid-column: 2/3;
  height: 5vw;
  background-image: url("../imgVids/icons8-instagram-myColored.png");
  background-size: 100%;
}

.facebook{
  grid-column: 3/4;
  height: 5vw;
  background-image: url("../imgVids/icons8-facebook-192.png");
  background-size: 100%;
}

.facebook:hover{
  grid-column: 3/4;
  height: 5vw;
  background-image: url("../imgVids/icons8-facebook-myColored.png");
  background-size: 100%;
}

.linkedin{
  grid-column: 4/5;
  height: 5vw;
  background-image: url("../imgVids/icons8-linkedin-192.png");
  background-size: 100%;
}

.linkedin:hover{
  grid-column: 4/5;
  height: 5vw;
  background-image: url("../imgVids/icons8-linkedin-myColored.png");
  background-size: 100%;
}


/*///////////////////////////////// Project Page Css: ///////////////////////////////////*/

#projects {
  background-color: var(--main-col);
}

#projects main{
  display: grid;
  grid-template-areas:
    "navBar navBar"
    "navScroll projectContent"
    "navScroll projectContent";
  grid-template-columns: 25vw auto;
}

#projects .Nav, #about .Nav, #contact .Nav{
  grid-area: navBar;
  position: fixed;
  margin-top: -4em;
  width: 100%;
  display: grid;
  grid-template-columns: auto 20% 20% 20% 20% auto;
  grid-gap: 0.125em;
}

#projects .Nav a, #about .Nav a, #contact .Nav a{
  border: none;
  border-top-left-radius: 0em;
  border-bottom-left-radius: 0em;
  border-bottom-right-radius: 0em;
  font-size: x-large;
  background-color: var(--sec-col);
  color: var(--main-col);
  padding: 0.2em 0em;
  transform: translate(0em, 1.35em);
}

#projects .Nav #Arrow,  #about .Nav #Arrow, #contact .Nav #Arrow{
  display:block;
  position:absolute;
  margin: 3.75em calc(50vw - (3%/2));
  width: 3%;
  background: none;
  
}

#projects .Nav .menuArrow, #about .Nav .menuArrow, #contact .Nav .menuArrow{
  width: 100%;
  background-color: none;
  rotate: 90deg;
  
}

#projects #firstNav, #about #firstNav, #contact #firstNav{
  grid-column: 2/3;
  border: none;
  border-bottom-left-radius: 2em;
}

#projects #lastNav, #about #lastNav, #contact #lastNav{
  border-bottom-right-radius: 2em;
}

#projects .Nav a:hover, #about .Nav a:hover, #contact .Nav a:hover{
  background-color: rgb(114, 99, 82);
}

#projects h1{
  font-size: 5vw;
  margin-bottom:0.5em;
  color: var(--h1-col);
  grid-area: title;
  position: sticky;
}

#projects h2{
  width: 105%;
  margin-left: -2.5%;
  color: var(--h2-col);
  background: rgb(101, 78, 49); 
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  font-size: xx-large;
  text-shadow: var(--main-col) 0px 0px 5px;
  padding:1em 0em;
}

#projects .projectHeader h2{
  width: 100%;
  margin-left: 0;
  color: var(--h2-col);
  background: none; 
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  font-size: xx-large;
  text-shadow: var(--main-col) 0px 0px 5px;
  padding:1em 0em;
}

#projects .projectHeader{
  display: grid;
  grid-template-columns: auto 5%;
  margin-left: -2.5%;
  background: rgb(101, 78, 49); 
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  padding:1em 1em 1em 0em;
}

.Project{
  text-align: center;
  /*background: rgb(101, 78, 49);*/
  background: linear-gradient(0deg, var(--sec-col) 85%, var(--main-col) 100%);
  width: 100%;
  padding-bottom: 1em;
}

.projectContent{
  grid-area: projectContent;
  margin-top: 4em;
}

#projects .Main-Image{
  max-width: 80%;
  max-height: 35em;
  margin: auto;
}

#projects .Sub-Images{
  margin:auto;
  width: 60%;
  display: grid;
  grid-template-columns: repeat(4, 20%);
  justify-content:space-around;
  background: var(--main-col);
  padding: 0.5em;
}

#projects .Sub-Images img{
  margin:auto;
  width: 100%;  
  
}

#projects .Sub-Images img:hover{
  opacity: 0.75;
}

#projects p{
  text-align: left;
  margin: 1em 10%;
  text-indent: 2.5em;
  line-height: 1.5em;
}

#projects .GithubLink img{
  width: 100%;
  margin:  1.5em 0em 0em -1em; 
/*   position:absolute; */
  filter: drop-shadow(0px 0px 1px var(--h1-col));
  z-index: 1;
}

#projects .GithubLink img:hover{
  filter: drop-shadow(0px 0px 4px var(--h2-col));
}

.Project p a{
  color: white;
}
.Project p a:hover{
  color: var(--h1-col);
}

.Project ul{
  width: 50%;
  text-align: left;
  margin: auto;
}

.Project ul li{
  margin-bottom: 0.5em;
}

.projectNav{
  grid-area: navScroll;
  position: fixed;
  text-align: center;
  width: 25vw;
  margin-top:5em;
}

.projectNav ul{
  height: 20vh;
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  list-style-type: none;
}

.projectNav a{
  color: var(--h1-col);
  text-decoration-line: none;
}

.projectNav a:hover{
  color: var(--h2-col);
  text-decoration-line: underline;
}

/*////////////////////////About/////////////////////////*/

.about .content{
  display: grid;
  grid-template-areas: 
    "title slideshow"
    "headshot slideshow"
    "paragraph slideshow";
  grid-template-rows: 12vh 44vh 44vh;
  grid-template-columns: 55% 45%;
  height: 100%;
}




#about .title{
  grid-area: title;
  color: var(--h1-col);
  font-size: xxx-large;
  margin:auto;
  text-shadow: 0px 0px 10px black;
}

#about .Headshot{
  grid-area: headshot;
  margin: auto;
  width: 40%;
  max-height: inherit;
  border-radius: 50%;
  background:linear-gradient(rgba(255, 145, 17,0.1) 10%, rgba(255, 145, 17,0.5) 40%, var(--h2-col) 70%);
  
}


#about .imgSlideshow{
  grid-area: slideshow;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
}

#about .imgSlideshow #SlideShowImgs img{
  width: 100%;
  max-height: 100vh;
  
  margin: auto;
}



#about .Paragraph{
  grid-area: paragraph;
  width: 100%;
  color: white;
  background: rgba(1,1,1,0.5);
  text-align: center;
  font-size: 1.1em;
}

#about .Paragraph p{
  width: 75%;
  margin: auto;
  text-align: left;
  text-indent: 2em;
}

#about .Paragraph h3{
  color: var(--h1-col);
}

#about #Buttons{
  display: grid;
  grid-template-columns: repeat(4, 2em);
  grid-gap:1em;
  justify-content: center;
}
#about #Buttons div{
  height: 0.75em;
  width: 0.75em;
  background: black;
  border-radius: 0.5em;
  margin:auto;
  margin-top: -2em;
}

#about #Buttons .active{
  background: white;
}

#about #Buttons div:hover{
  background: grey;
}

/*///// Contact Me /////*/

#contact h1{
  color: var(--h1-col);
  text-align: center;
  padding-top:1em;
}

#contact main > h2{
  color: var(--h2-col);
  text-align: center;
}


#contact form{
  width: 75%;
  margin: auto;
}

#contact fieldset{
  width: 100%;
  border-radius: 1em;
  border: thick solid var(--sec-col);
} 

#contact legend{
  margin: 1em auto;
  padding: 0em 0.5em;
  color: var(--h2-col);
  font-size: x-large;
  font-weight: bold;
}

#contact .contactInfo{
  display: grid;
  grid-template-columns:50% 50%;
  
}

#contact .input{
  display: grid;
  grid-template-columns: auto;
  text-align: center;
  margin-bottom: 1em;
  color: var(--h1-col);
}

#contact .input input{
  width: 75%;
  margin: auto;
  background: rgb(71, 58, 43);
  border: thin solid rgb(101, 78, 49);
  color: white;
}
#contact .input + .input + .input{
  grid-column: 1/3;
  width: 50%;
  margin: 0em auto 1em auto;
}

#contact .input textarea{
  width: 75%;
  margin: auto;
  resize: none;
  background: var(--sec-col);
  border: thin solid rgb(101, 78, 49);
  color: white;
}

#contact .input + .input textarea{
  height: 5em;
  max-height: 9em;
  resize: vertical;
}

#contact .submit {
  border: none;
  text-align: center;
  margin-top: 1em;
}

#contact .submit input{
  width: 10%;
  background: var(--h2-col);
  border: thin solid var(--h1-col);
  border-radius: 2em;
  padding: 0.5em;
}

#contact .mistake{
  color: red;
  height: 1em;
  word-wrap: anywhere;
}