
.bodyhome {
  background-image: url("testing/grave.png");
  background-size: cover;
  background-position: center top;
  background-color:black;
}

/* colors ----------------------------------
  Naturals
#606157 light gravestone gray
#2f302d dark gravestone gray
#b5b4aa light yellow gray
#f5f1e9 yellow white
#1a2021 dark blue gray

  Reds
#2e0b0b dark red
#481511 slightly lighter red
#5b1e13 lighter oranger red
#cb180a brightest red


*/

/* font stuff???? ----------------------------------*/

.spectral-regular {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: normal;
}

.spectral-regular-italic {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: italic;
}

.jacquard-12-regular {
  font-family: "Jacquard 12";
  font-weight: 400;
  font-style: normal;
}



/* homepage only ---------------------------*/

.gravestone h1 {
  font-family: "Jacquard 12";
  font-weight: 400;
  font-style: normal;
  font-size: 200px;
  color:#2f302d;
  text-shadow: -4px -6px black;
}


.gravestone h3 {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: normal;
  font-size:20px;
}

.gravestone{
  text-align: center;
  color:black;
  float: center;
  padding-top: 40px;
  background-image: url("testing/gravestone.png");
  background-size: 100%;
  height:1200px;
  width: 1000px;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat;
}

.about{
  padding:10px;
  width:700px;
  margin:auto;
  background-color: #2f302d;
  box-shadow: 8px 10px black inset;
  color:#b5b4aa;
}

.insta{
height:70px;
width:100%;
display:flex;

}

.insta a{
  font-family: "Jacquard 12";
  font-size: 60px;
  margin:auto;
  overflow: auto;
  justify-content:center;
  text-decoration:none;
  display:flex;
  align-items:center;
  color:#2f302d;
  text-shadow: -2px -2px black;
  align-self: center;
}

.insta a img {
  width:96px;
  height:96px;
  float:left;
}

.insta a:hover {
  filter: drop-shadow(0px 4px 8px #b5b4aa)
}

.navhome {
  height:180px;
  width:1100px;
  overflow:auto;
  margin:auto;
  align-items:center;
  display:flex;
  position: sticky;
  top: 0;
}

.navhome a {
  font-family: "Jacquard 12";
  font-size: 40px;
  margin:auto;
  overflow: auto;
  display:block;
  justify-content:center;
  float:center;
  text-decoration:none;
  text-align:center;
  color:black;
}

.navhome a:hover {
color:#f5f1e9;  
filter: drop-shadow(0px 0px 8px #f5f1e9) brightness(120%)
}

.navhome a img {
  width:96px;
  height:96px;
  float:top;
  display:block;
  padding:0px;
  margin:auto;
}


/* universal ----------------------------------*/

.nav {
  height:100%;
  width:200px;
  overflow:auto;
  align-items:center;
  display:flex;
  flex-direction: column;
  position: fixed;
  top: 0;  
}

.nav a {
  font-family: "Jacquard 12";
  font-size: 40px;
  margin:auto;
  overflow: auto;
  display:block;
  justify-content:center;
  float:center;
  text-decoration:none;
  text-align:center;
  color:black;
}

.nav a:hover {
color:#f5f1e9;  
filter: drop-shadow(0px 0px 8px #f5f1e9) brightness(120%)
}

.nav a img {
  width:96px;
  height:96px;
  float:top;
  display:block;
  padding:0px;
  margin:auto;
}

.pagetitle {
  margin:auto;
  width:1200px;
  height: 300px;
  background-color:#b5b4aa;
  border-style:solid;
  border-color:black;
  border-width:7px;
  box-sizing: border-box;
}

.pagetitle h1 {
  font-family: "Jacquard 12";
  font-weight: 400;
  font-style: normal;
  font-size: 150px;
  line-height: 0.1;
  color:black;
}
  
.pagetitle h3 {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 0.1;
  color:#1a2021;
  font-size: 20px;
}

body {
  background-image: url("testing/grave.png");
  background-size: cover;
  background-position: center top;
  background-color:black;

.main {
  width:1200px;
  height:100%;
  background-color:#1a2021;
  margin:auto;
  display:flex;
  border: 7px solid black;
  border-top: 0px;
  padding-top:45px;
  box-sizing: border-box;
}

.main p {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: normal;
  color:#f5f1e9;
  font-size:17px;
  margin:10px;
  
}

.tabs {
  display:flex;
  flex-direction:row;
  width:100%;
  height:60px;
  justify-content: space-around;
  margin:auto;
}

.tabs button {
  overflow:auto;
  align-items:center;
  width: 100%;
  height:100%;
  text-align:center;
  border: 7px solid black;
  font-family: "Jacquard 12";
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  color:black;
  background-color:#b5b4aa;

}

/* Dropdown content */
.comics {
  display: none;
  position: absolute;
  background-color: #b5b4aa;
  min-width: 200px;
}

/* Links inside dropdown content */
.comics a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.comics a:hover {
  background-color: #f1f1f1
}

/* Show the dropdown content on hover */
.comicsbtn:hover .comics {
  display: block;
}

/* Change background color of dropdown button on hover */
.comicsbtn:hover {
  background-color: black;
  color:#f5f1e9;
}




























