:root {
  --pageUnit: 5vw;
  --maxWidth:80vw;
  --headerWidth:80vw;
  --blue:black;
  --purple:#9D4497;
  --headerHeight:10vh;
  --headerContents:5vw;
  --transitionStyle:all 0.3s ease-out;
  --footerHeight:2.5vw;
  --HeaderPlusFooterHeight:calc(var(--footerHeight) + 20vh + 2vw);
}
body{
  font-family: 'Martel', serif;
  margin:0;
  padding: 0;
  min-height: 100%;
  /* max-width: 100%; */
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* grid-template-columns: 100%; */
  grid-template-columns: 10% 80% 10%;
  grid-template-areas:
  "header header header"
  ". main ."
  "footer footer footer";
  overflow-x: hidden;
  align-items: baseline;
}
html {
  max-width: 100%;
}
.logo{
  width: var(--headerContents);
  height: var(--headerContents);
  transition: var(--transitionStyle);
  /* transform: scaleX(1); */
  padding: 1vw;      
}
.logo:hover{
  transform: scaleX(-1);
  transition: var(--transitionStyle);  
}
.headerContainer{
  position: fixed;
  z-index: 1;
  background-image: linear-gradient(-90deg, white, gainsboro);
  /* background-color: gainsboro; */
  margin:0;
  padding: 0;
  width:100vw;
  display:flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  transition: var(--transitionStyle);
}
header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  width: var(--headerWidth);
  transition: var(--transitionStyle);
  grid-area: header;
  height: var(--headerheight);
}

nav{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  width: calc(var(--headerContents)*8);
  list-style-type: none;
  font-size: calc(var(--headerContents)*0.5);
  transition: var(--transitionStyle);       
}
a{
  color:black;
  text-decoration: none;
}
nav > a:hover{
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-shadow: .5px .5px gray;
}
.background{
  z-index: -1;
}
main{
  width: var(--maxWidth);
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  margin-top:20vh;
  margin-bottom: 20vh;
  padding: 0;
  min-height: calc(100vh - var(--HeaderPlusFooterHeight));
  grid-area: main;
}
main > ul{
  text-align: left;
}
section{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}
section > figure{
  width:calc(var(--pageUnit)*3);  
  display: flex;
  flex-direction:column;
  /* justify-content: flex-end;
  align-items: flex-start; */
  text-align: center;
}
section > figure > img{
  margin: 0px auto;
  height: calc(var(--pageUnit)*3);
  width: calc(var(--pageUnit)*3);
  background-color: gray;
}
section > figure > p{
  text-align: center;  
}
footer{
  z-index: 1;
  background-color: gainsboro;
  margin:0;
  padding: 1vw;
  width:100vw;
  height: var(--footerHeight);
  display:flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  grid-area: footer;
}
footer > span{
  width:25vw
}

body > span{
  height: 30vh;
}
.contact-form{
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;

}
.contact-form > span > input{
  width:40vw;
}
.contact-form > span  > textarea{
  width:40vw;
}
.contact-form > button{
  width:20vw;
}
.send{
  font-family: "Varela Round", Arial, Helvetica, sans-serif;
  background-color: gainsboro;
}
.portfolio-item{
  display:flex;
  flex-direction: column;
}
.link{
  width:calc(var(--pageUnit)*2);  
}
.portfolio-container{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: baseline;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
  :root {
    --headerHeight:10vh;
    --footerHeight:10vh;
    --headerContents:7vw;
  }
  .headerContainer {
    height: 10vh;
  }
  footer > a{
    width:8vw;
    height:8vw;
    padding: 1vw;
  }
  footer > a > svg{
    width: 8vw;
    height: 8vw;
  }
  a svg:hover { 
    fill: var(--blue);
    width: 10vw;
    height: 10vw;
    transition: var(--transitionStyle)
  }
  a svg:not(:hover) { 
    width: 8vw;
    height: 8vw;
    transition: var(--transitionStyle)
  }
  .contact-form > span > input{
    width:80vw;
  }
  .contact-form > span  > textarea{
    width:80vw;
  }
  .contact-form > button{
    width:40vw;
  }     
}
.activePage{
  text-decoration: underline;
  text-decoration-color: var(--blue);
}
.blue-text{
  color: var(--blue);
}