/* NOTE: margin-left and margin-right:auto makes objects centered. You'll find it all across this stylesheet because of that. I just wanted to include this because I dont want to find each individual instance of it being used. */
/* background image for all pages */
body{
  background-image: url(pix/mainbg.png);
  font-family: "Times New Roman", Serif;
}
/* header container */
header{
display: flex;
  width:75vmax;
  height: 25vmin;
  flex-flow:row nowrap;
  align-items: center;
  justify-content: space-around;
  flex: 1 1 0;
  background-image:url(pix/background.gif);
  background-repeat: repeat;
  border: 8px inset khaki;
  margin-left:auto;
  margin-right: auto;
  font-weight:900;
}
a, a:active{
  color: khaki;
  text-decoration-style: wavy;
  text-decoration-color: khaki;
}
a:hover, a:visited{
  color: lightgoldenrodyellow;
  text-decoration-color:lightgoldenrodyellow;
}
/* text in the header */
header h1{
  font-style: italic;
  /* outlines the text */
  text-shadow:
    -5px -2px 3px orange,
    5px -1px 0 orange,
    -1px 1px 0 orange,
    1px 1px 0 orange;
  font-size: clamp(5vw, 10vw, 50px);
  color:yellow;
  flex-shrink: 3;
  padding-bottom: 10px;
}
.hitcounter{
  border: 4px inset khaki;
  display:flex;
  flex-flow: column wrap;
  align-items:center;
  justify-content:center;
  width: 162px;
  margin:auto;
}
/* the nav itself */
nav{
  margin-left: auto;
  margin-right: auto;
  width: 75vmax;
}
/* nav container */
.nav{
  display:flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center
}
/* list used for nav */
.list{
  display:flex;
  flex-direction: row;
  justify-content: space-around;
  list-style-type: none;
}
/*buttons used for navigation */
.navbutton{
  width: 20vw;
  height: inherit;
  background-image: url(pix/bodybg.jpeg);
  border: 4px inset khaki;
  color:yellow;
  font-style: italic;
  font-family: "Times New Roman";
  font-size: 100%;
  font-weight: 900;
}
.navbutton:hover{
  filter:saturate(300%);
}
.navbutton:active{
  filter:saturate(100%);
}
/* links for nav so it isn't underlined and black*/
.navbutton > a{
  text-decoration: none;
  color:yellow;
}
audio{
  border:2px inset khaki;
  color: yellow;
  background-color: orange;
  width:100px;
  position: fixed;
  top: 0;
  left:0;
}
/* body container of pages (NOT body at top) */
.body{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  width:50vmax;
  margin-left:auto;
  margin-right: auto;
  border: 6px inset khaki;
  height:50vmax;
}
/* pages list */
.coolthings{
  border-right: 0.5px solid white;
  background-color: black;
  color: orange;
  font-style: italic;
  width: 20%;
  font-family: "Times New Roman";
  text-align: center;
  margin-bottom: none;
  text-decoration: none;
  overflow:scroll;
}
.coolthings > a > img{
  padding-bottom: 5%;
  width: 100%;
}
.featured{
  height:40%;
  width: 22vmin;
  position: absolute;
  top:inherit;
right:11vmax;
text-align:center;
  border: 8px inset khaki;
  background-color: brown;
  color: orange;
  overflow:scroll;
}
.featured > h3, h4{
  font-style: italic;
}

/* pages in pages list */
.listofpages > p{
  margin: none;
}
/* for important items in a page */
.listofpages > ul{
  font-style:normal;
  list-style-type: "➣ "
}
/* welcome page */
.welcomebody{
  width: 80%;
  color: yellow;
  font-family: "Times New Roman";
  text-align: center;
  background-image: url(pix/bodybg.jpeg);
}
.topoffireplace{
  width: 80%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: flex-end;
}
#fireplace{
  width:80%;
}
#contact333{
 display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  width:50vmax;
  margin-left:auto;
  margin-right: auto;
  padding-left:10%;
  padding-right:10%;
  border: 12px ridge khaki;
  height:30vmax;
  text-align:center;
  color: yellow;
  background-image: url("pix/bodybg.jpeg");
}
#contact h3{
font-style:italic;
}
/*about images */
.aboutbody > img{
width:40%;
  border: 4px inset lawngreen;
  margin-left: auto;
  margin-right: auto;
}
/*images containing links*/
.linkimg:hover{
  filter: saturate(300%);
}
.linkimg:active{
  filter: saturate(100%);
}
/* captions for images */
.teensytext{
  font-size:50%;
  color: inherit;
}
#PaiGon{
  width:20%;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background-color: darkred;
border: 4px inset khaki;

}
 
/* Handle */
::-webkit-scrollbar-thumb {
border: 1px inset khaki;
  background: khaki; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: lightgoldenrodyellow;
}
/* footer */
footer{
  width:30vmax;
  background-image: url(pix/bodybg.jpeg);
  border: 4px inset khaki;
  margin-top: 150px;
margin-left: auto;
  margin-right: auto;
  color:yellow;
  font-size: 1vmax;
  font-style: italic;
  text-align: center;
  height: auto;
  padding-top: 10px;
  font-family: "Times New Roman"
}