h1   {color: #eaecc7; font-weight: bold; font-family: "Georgia"; font-size: 32px;
   text-shadow: 0 0 5px rgb(139, 116, 65), 0 0 10px black,
   -2px 2px 0 #3e4629,
                          2px 2px 0 #3e4629,
                         2px -2px 0 #3e4629,
                        -2px -2px 0 #3e4629
   ;

}
li   {color: #eef0c9; font-family: "Gill Sans";  text-shadow: -1px 1px 0 #3e4629,
                          1px 1px 0 #3e4629,
                         1px -1px 0 #3e4629,
                        -1px -1px 0 #3e4629;

}
h2 {color: #645c41; font-size: 20px; font-family: "Gill Sans";  text-shadow:
                   0 0 10px rgb(236, 236, 217),
                   0 0 10px rgb(236, 236, 217),
                  0 0 10px rgb(236, 236, 217) ;}

h3  {color: #eaecc7; font-weight: bold; font-family: "Georgia"; font-size: 32px;
   text-shadow: 0 0 5px rgb(139, 116, 65), 0 0 10px black,
   -2px 2px 0 #3e4629,
                          2px 2px 0 #3e4629,
                         2px -2px 0 #3e4629,
                        -2px -2px 0 #3e4629
   ;

}
/* use H3 for anything where you want to use H1 : only one H1 per page,
and in the main page it's on the main content. */
p    {color: #eef0c9; font-family: "Gill Sans";  text-shadow: -1px 1px 0 #3e4629,
                          1px 1px 0 #3e4629,
                         1px -1px 0 #3e4629,
                        -1px -1px 0 #3e4629}
                        
b  {color: #d1c294; font-size: 16px; font-family: "Gill Sans";  text-shadow: -1px 1px 0 #2e3320,
                          1px 1px 0 #2e3320,
                         1px -1px 0 #2e3320,
                        -1px -1px 0 #2e3320,
                   0 0 5px black ;}

a { color: #b69114;  }

textbig {
  font-size: 24px;
}

textsmall {
  font-size: 16px;
}
diffclass { color: #b69114; font-family: "Gill Sans"; font-size:80px; }
* {
  box-sizing: border-box;
}

body {
  
  background-image: url('../css/images/mountainrange3.png');
  position:fixed;
  background-size: fill;
}

maincontainer {
  width: 60%;
  height: 95vh;
  display: grid;
  margin-left:auto;
  margin-right:auto;
  column-gap: 10px;
  row-gap: 10px;
  grid-template:
    "icon nav"
    "sidebar infocontainer";
  grid-template-rows: 20% 80%;
  grid-template-columns: 20% 1fr;

}

maincontainer2 {
  width: 60%;
  height: 95vh;
  display: grid;
  margin-left:auto;
  margin-right:auto;
  column-gap: 10px;
  row-gap: 10px;
  grid-template:
    "icon nav"
    "sidebar main2";
  grid-template-rows: 20% 80%;
  grid-template-columns: 20% 1fr;

}


   @media only screen and (max-width: 800px) {
    maincontainer {
      overflow-y: scroll;
      display: grid;
      height: 95vh;
      width: 95vw;
      grid-template-areas:
      "nav nav"
      "main main"
      "sidebar sidebar";
      grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;}
  bottom, blurb, handinjury, icon, footer {display: none;}
  sidebar {
    margin-top: -60vh;
  }
}

infocontainer {
  display: grid;
  row-gap: 1px;
  column-gap: 10px;
  grid-template:
    "main main"
    "bottom blurb";
  grid-template-rows: 61% 1fr;
  grid-template-columns: 60% 1fr;

}

handinjury {
  padding: 28px 28px;
            float: left;
          width: 150px;
          height: 190px;
          line-height: 15px;
          margin-left: 5%;
          margin-top: -35%;
         border-image:  url("../css/images/border.png") 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid;
    border-radius: 7px;  
    background-color:rgba(70, 60, 39, 0.3);
}

backgroundblog {
  background-image: url('../css/images/bgmodified.png');
  position:sticky;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}

sidebar { 
          grid-area:sidebar;
          padding: 28px 28px;
          box-sizing: border-box;
            float: left;
            line-height: 30px;
          font-family: arial;
        background-image: url('../css/images/seamlesstexdirtwall.png');

          border-style: double;
  }
nav {
  grid-area: nav;
  margin: 10px 10px;
  padding: 28px 28px;
  font-family: helvetica;
  background-image: url('../css/images/seamlesstexdirtwall.png');
  border-style: double;


}
rightimage {
  float:right;
  max-width: 100%;
  margin: 1dvh;
}
text-up {
  margin-top: -30px;
}
 main {
  grid-area: main;
  margin: 10px;
  padding: 28px 28px;
  font-weight:bold;
  color: #5c5439;
  background-image: url('../css/images/seamlesstexdirtwall.png');
  overflow: auto;

}

 main2 {
  grid-area: main2;
  margin: 10px;
  padding: 20px;
  font-weight:bold;
  color: #5c5439;
  background-image: url('../css/images/seamlesstexdirtwall2.png');
  overflow: auto;
  border-image:  url("../css/images/border2.png") 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid;
    border-radius: 7px;  
    background-color:rgba(70, 60, 39, 0.3);

}

mainchild {
  display:block;
  margin-left:auto;
  margin-right:auto;
    border-image:  url("../css/images/border2.png") 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid;
    border-radius: 7px;  
    background-color:rgba(70, 60, 39, 0.3);
  padding: 10px 10px;
}
 mainnotintro {
  margin: 10px;
  padding: 28px 28px;
  width: 90vh;
  height : 680px;
  margin-left: 35%; 
  margin-top: 180px; 
  position: absolute;
  font-family: helvetica; 
  background-image: url('../css/images/mountainrange3.png');
  overflow: auto;

}
blogbase {

  margin: 10px;
  padding: 28px 28px;
  width: 600px;
  height : 600px;
  margin-left: 200px; 
  margin-top: 70px; 
  position: relative;
  font-family: helvetica; 
  overflow: auto;


}
icon {
  grid-area:icon;
  margin: 10px 10px;
  padding: 28px 28px;
  font-family: helvetica;
  text-align: fixed; 
}
 bottom { 
  grid-area: bottom;
  height: 30%;
  padding: 28px 28px;
  
  margin: 10px 10px;
  text-align: fixed; 
  overflow: auto;
  background-image: url('../css/images/brickwallseamless2.png') ;
  border-style: double;

}
blurb { 
  grid-area: blurb;
  height:auto;
  margin: 10px 10px;
  padding: 28px 28px;
  font-size: 16px;
  overflow: auto; 
  background-image: url('../css/images/brickwallseamless2.png') ;
  border-style: double;
}

 footer {
  grid-area: footer;
  margin: 0px 0px ;
  height: 40px;
  position: fixed;
  font-family: helvetica;
  text-align: center; 
  top: 95%;
  bottom: 0;
  left: 0; 
  right: 0;

}

@keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }


img {
  max-width: 100%;
}