:root{
   --color1: #e2e6e1;
   --color2: #686966;
   --color3: #e6dc97;
   --color4: #d1c7b0;
   --color5: #90763A;
   --color6: #c7b281;
}

.activePage{
   border-bottom: thin solid white;
}

main, footer{
   background-color: var(--color1);
   padding-left: 10%;
   padding-right: 10%;
}

footer a{
   text-decoration: underline;
}

nav{
   display: grid;
   grid-template-columns: auto auto auto auto;
   justify-content: space-evenly;  
   color: var(--color1);
   padding-top: 1%;
   padding-bottom: 1%;
   font-size: 110%;
   padding-left: 4%;
   padding-right:4%;
   font-size: 130%;
   background-color: rgba(51, 51, 51, .3);
}

a{
   text-decoration: none;
   color: var(--color2);
}

a:visited{
  color: var(--color2);
}

#index article a:visited{
   color: var(--color6);
}

a:hover{
  color: #a6a6a6;
}

nav a:hover{
   color: gray;
   transform: scale(1.1);
}

nav a:link, nav a:visited{
   color: var(--color1);  
}

header{
   text-align: center;
   padding-top: 5%;
   margin-top:0;
   font-size: 200%;
   padding-bottom: 10%;
   color: var(--color1);
   background-color: rgba(51, 51, 51, .3);
}

.left{
   margin-left: 18%;
}

.right{
   margin-right: 18%;
}

#index article p{
   font-size: 110%;
   line-height: 2;
}

.homeP2{
   font-size: 200%;
   border: double var(--color6);
   border-radius: 2%;
   text-align: center;
   font-weight: bold;
   padding: 3%;
   margin: 1%;
}

#index article p{
   margin-bottom: 10%;
}

.pizza{
   margin-top: 10%;
}

.galleryLink{
   color: var(--color6);
   font-size:150%;
}

body{
   padding: 0%;
   margin: 0%;
   color: var(--color2);
   font-family: lucida sans;
   background-image: url("../images/copperhead2.jpeg");
   background-attachment: fixed;
   background-size: 100%;
}

h2{
   text-align: center;
   font-size: 200%;
   margin-top: 4%;
   margin-right: 4%;
}

img{
   max-width:100%;
}

.drawings img{
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-top: 6%;
   
}

.headings{
  margin-left: 13%;
  margin-top: -10%;
  padding-top: 11%;
  font-size: 150%;
}

figcaption{
   text-align: center;
   padding-top: 3%;
}

.in{
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 3%;
    min-width: 95%;
}

.out{
    margin-right: 0;
    padding-right: 0;
    margin-bottom: 3%;
    min-width: 95%;
}

footer{
   background-color: var(--color4);
   text-align:center;
   padding: 1%;
   line-height: .5;
}

footer nav{
   background-color: var(--color4);
   font-size: 100%;
   border: solid thin var(--color2);
   margin-bottom: 3%;
}

footer nav a, footer nav a:visited{
   color: var(--color2);
   padding-bottom: 6%;
   padding-top: 6%;
}

footer nav a:hover{
   color: whitesmoke;
}


#index h2, #about h2, #contact h2{
   margin-top: 8%;
   padding-bottom: 5%;
   border-bottom: dotted var(--color2);
}

article{
   margin-top: 5%;
   margin-bottom: 10%;
}

figcaption a{
   text-decoration: underline;
}

.home article p{
   background-color: var(--color3);
   padding: 5%;
   margin: 9%;
   border-radius: 5%;
   text-align: center;
   font-size: 140%;
   line-height: 1.6;
}

input[type=submit]{
   width: 25%;
   color: var(--color1);
   background-color: var(--color2);
   border: none;
   padding: 1%;
   font-family: lucida sans;
   font-size: 110%;
   border-radius: 5%;
   max-width: 100%;
   margin-top: 3%;
   transition: all .05s ease-in-out;
}


input[type=submit]:hover{
   transform: scale(1.08);
 }  

fieldset p{
 padding-left: 4%;
}

legend{
 font-size: 120%;
 color: var(--color5);
   padding-bottom: 5%;
}

.feedback{
   color: #d15e3b;
}

fieldset{
   border: none;
   background-color: #d6dbd5;
   margin-top: 5%;
   padding-top: 0;
   padding-bottom: 4%;
}

.emailLabel{
   margin-right: 2.9%;
}


select{
   border: none;
   padding: 1%;
}

select option{
   border-bottom: thin dotted var(--color2);
}

select option:checked{
   background-color: grey;
}

#about article h3{
   color: var(--color5);
   padding-top: 10%;
   margin-left: 10%;
}

.aboutParagraph1{
   padding: 8%;
   margin: 6%;
   font-size: 120%;
   line-height: 2;
}

.aboutParagraph2{
   font-size: 120%;
   line-height: 2;
   padding-left: 10%;
}

.aboutImg2{
   width: 75%;
    padding-left: 10%;
    margin-right: 15%;
   margin-bottom: 0%;
 }

.aboutImg3{
    width: 75%;
    padding-left: 10%;
    margin-right: 15%;
    margin-top: 0%;
 }

.homeP3{
   margin-top: 18%;
   margin-right: 18%;
   margin-left: 15%;
}

.homeP2{
   margin: 8%;
   margin-top: 12%;
   margin-left: 18%;
   padding: 7%;
}

.homeP1{
   margin: 8%;
   margin-left: 18%;
}

.dog{
   margin-right: 1%;
}

.pizza{
margin-top: 20%;
   margin-left: 0%;
}

.home1{
   margin-left: 12%;
   
}

.home2{
   margin-right: 17%;
}

nav a, .homeP2, .pagenav p{
   transition: all .2s ease-in-out;
}

.homeP2:hover{
   transform: scale(1.2);
}

.pagenav p:hover{
   transform: scale(1.2);
}

.toTop{
   text-align: center;
   position: sticky;
   top:0;
   left:0; 
   top: 88%;
   padding-top: 3%;
   
}

.toTop a, .toTop a:visited, .toTop a:link{
   color: var(--color2);
   text-decoration: underline;
   margin-right:-100%;
}

#gallery .drawings, #gallery .boxes, #gallery .paintings{
   margin-right: 8%;
   margin-left: 8%;
}

table{
   border: thin solid var(--color5);
   margin-left: 20%;
   margin-bottom: 8%;
   width: 60%;
   text-align: left ;
   border-collapse: collapse;
   max-width: 100%;
 }

table td{
   padding-left: 5%;
   padding-right: 5%;
}

 .table{
    border-bottom: dotted var(--color2);
 }

 .table h4{
    color: var(--color5);
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
 }

.galleryP{
   padding: 4%;
   border-radius: 5%;
   line-height: 2;
}

/**********************************/

/***********ALL*****************/
.grid-layout{
   display: grid;
   grid-template-areas: "nav"
                       "header" 
                       "main";
}

.grid-layout main{
   grid-area: main;
}

.grid-layout nav{
   grid-area: nav;
}

.grid-layout header{
   grid-area: header;
}

.grid-layout .pagenav{
   display: grid;
   grid-template-columns: auto auto auto;
   justify-content: space-evenly;
   padding-bottom: 1%;
   padding-top: 1%;
   border-bottom: dotted;
   position: sticky;
   top: 0;
   left: 0;
   background-color: var(--color1);
   margin-left: 8%;
   margin-right: 8%;
}

.grid-layout footer{
   display: grid;
   grid-template-areas: "footNav"
                       "footer";
}


.grid-layout footer nav{
   grid-area: footNav;
}

.grid-layout footer section{
   grid-area: footer;
}

.galleryP{
   margin: 10%;
   background-color: var(--color3);
}

/*************GALLERY*************/

.grid-layout .drawings{
   display:grid;
   grid-template-columns: auto auto auto;
   grid-template-rows: auto auto auto;
   margin: 5%;
   padding-bottom: 5%;
   border-bottom: dotted;
}

.grid-layout .paintings{
   display:grid;
   grid-template-columns: auto auto auto;
   grid-template-rows: auto auto auto;
   margin: 5%;
   padding-bottom: 5%;
   border-bottom: dotted;
}

.grid-layout .boxes{
   display:grid;
   grid-template-columns: auto auto;
   margin: 5%;
   padding-bottom: 5%;
   border-bottom: dotted;
   
}

/***********ABOUT***********/

.grid-layout#about .all{
  display: grid;
  grid-template-columns: 40% 60%;
}

/************HOME*************/


.grid-layout#index article{
   display: grid;
   grid-template-columns: auto auto ;
}

/*********FORM***************/

.grid-layout#form .feedback{
   grid-area: feedback;
}

.grid-layout#form h2{
   grid-area: formH2;
}

.grid-layout#form form{
   grid-area: form;
}

.grid-layout#form article{
   display: grid;
   grid-template-areas: "formH2"
                        "feedback"
                        "form";
}