body { /*backdrop*/
	max-height: auto;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-image:url("https://file.garden/akpJXC7cShbwSWp6/Dwarves%20of%20Thedas/IMG_7756.png");
		}

a:link{
  color: white;
}

a:visited{
  color: white;
}

a:active{
  color: white;
}

.container{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	align-items:center;
	height:auto;
  position:relative;
}
@media (max-width:500px){
.container{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	height:auto;
  position:relative;
}
}

#header-box{
  text-align:center;
  line-height:10%;
  width:91.5vw;
  color:#D49715;
  text-shadow:1px 3px 1px #543000;
}

#footer-box{
  text-align:center;
  width:91.5vw;
  color:#D49715;
  text-shadow:1px 3px 1px #543000;
}

#nav-button{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:1vw;
  height:34vw;
  font-size:2.5vw;
  font-variant:small-caps;
  font-weight:900;
}
@media (max-width:500px) {
  #nav-button{
  display:flex;
  flex-direction:row;
  gap:3vw;
  height:17vw;
  width:80vw;
  font-size:3.5vw;
  font-variant:small-caps;
  font-weight:900;
}
}

#nav-button2{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:34vw;
  width:60vw;
  font-size:2.5vw;
  font-variant:small-caps;
  font-weight:900;
}
@media (max-width:500px) {
  #nav-button2{
  gap:1vw;
  height:50vw;
  width:80vw;
  font-size:4vw;
  font-variant:small-caps;
  font-weight:900;
}
}

.button {
  border:1.1vw double;
  border-color: #D49715 #543000 #D49715;
  width:55%;
  height:3vw;
  padding:5vw;
  margin:0.2vw;
  text-align:center; 
  text-decoration: none; 
  cursor: pointer;
  background:#162a45;
  box-shadow:2px 2px 5px black;
}


.button2 {
  border:1.1vw double;
  border-color: #D49715 #543000 #D49715;
  width:55%;
  height:3vw;
  padding:5vw;
  text-align:center;
  text-decoration: none; 
  cursor: pointer;
  background:#162a45;
  box-shadow:2px 2px 5px black;
}

.button3 {
  border:1.1vw double;
  border-color: #D49715 #543000 #D49715;
  width:60%;
  height:auto;
  background-size:cover;
  padding: 11.5vw;
  margin:0.5vw;
  text-align:center; 
  text-decoration: one;
  cursor:pointer;
  background-image:url("https://file.garden/akpJXC7cShbwSWp6/Dwarves%20of%20Thedas/Untitled%20design%20(5).png");
  box-shadow:2px 2px 5px black;
}
@media (max-width:500px) {
  .button3 {
  border:1.1vw double;
  border-color: #D49715 #543000 #D49715;
  width:70%;
  height:50%;
  }
}

.button:hover{
  box-shadow:0px 5px 10px black;
  transform:scale(1.03);
  transition-duration: 0.25s;
}

.button2:hover{
  box-shadow:0px 5px 10px black;
  transform:scale(1.03);
  transition-duration: 0.25s;
}

.button3:hover{
  box-shadow:0px 5px 10px black;
  transform:scale(1.03);
  transition-duration: 0.25s;
}


		p.small { /*line spacing*/
  line-height: 0;
}
p.big {
  line-height: 1.8;
}

@font-face { /*custom fonts*/
  font-family: dwarvesc;
  src: url("https://dwarvesofthedas.neocities.org/dwarvesc.woff") format("opentype");
}