:root {
  --header-bg:#222;
  --header-link:#eee;
  --header-link-bg:#000;
  --header-link-hover:#fff;
  --header-link-hover-bg:gold;
  --bg-index: url('/img/stormpeaksbg.jpg');
  --bg-main: url('/img/stormpeaksbg.jpg');
  --bg-about: url('/img/stormpeaksbg.jpg');
  --bg-razor: url('/img/ulduarbg.jpg');
  --bg-vyragosa: url('/img/cloudy_bg.jpg');
  --bg-catagory: url('/img/templebg.jpg');
  --bg-catagorymain: url('/img/ulduartbg.jpg');
  --body-text:#fff;
  --body-link:gold;
  --body-link-hover:cyan;
  --layout-main: url('/img/burlap_backdrop.jpg');
  --layout-about: url('/img/burlap_backdrop.jpg');
  --layout-razor: url('/img/metal_dark.jpg');
  --sub-bg: url('/img/burlap_backdrop.jpg');
  --sub-link:gold;
  --sub-link-hover:cyan;
  --content-link:white;
  --content-link-hover:white;
  --content-link-bg: rgba(0,0,0,.5);
  --content-link-bg-hover: rgba(199, 149, 60,.5);
  --content-link-border:gold;
  --content-link-border-hover:cyan;
  --hr:grey;
}

a {
  transition:.5s;
  text-decoration:none;
  color:var(--body-link);
}
a:hover {
  transition:.5s;
  text-decoration:none;
  color:var(--body-link-hover);
}
h1,h2,h3,h4 {
  font-family: "Metamorphous", serif;
  font-weight: bold;
}
hr {
  width:100%;
  color:var(--hr);
}
summary {
  font-family: "Metamorphous", serif;
  font-weight: bold;
  font-size: 30px;
}

body {
  font-size:15px;
  font-family: "Metamorphous", serif;
  font-style: normal;
  height:100%;
  color: var(--body-text);
}

.index {
  background:var(--bg-index);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  text-align:center;
  height:100%;
  width:100%;
  overflow:hidden;
}

.index img {
  width: auto;
  height: 75%;
  padding: 25px;
}

.main {
  background:var(--bg-main);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.about {
  background:var(--bg-about);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.razor {
  background:var(--bg-razor);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.catagory {
  background:var(--bg-catagory);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.catagorymain {
  background:var(--bg-catagorymain);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.header {
  background:var(--header-bg);
  width:50%;
  height:180px;
  text-align:center;
  margin:auto;
}
.header img {
  width:100%;
  max-height:125px;
  margin:0 0 15px 0;
}
.header a {
  background:var(--header-link-bg);
  color:var(--header-link);
  padding:10px;
  margin:5px;
  transition:.5s;
  border-radius:5px;
}
.header a:hover {
  color:var(--header-link-hover);
  background:var(--header-link-hover-bg);
  transition:.5s;
}
.layout-main {
  display:inline-box;
  width:50%;
  margin:auto;
  background: var(--layout-main);
  background-size: auto;
  background-repeat: repeat;
}
.layout-about {
  display:inline-box;
  width:50%;
  margin:auto;
  background: var(--layout-about);
  background-size: auto;
  background-repeat: repeat;
}
.layout-razor {
  display:inline-box;
  width:50%;
  margin:auto;
  background: var(--layout-razor);
  background-size: auto;
  background-repeat: repeat;
}

.layout-razor img {
  width:100%;
  height:auto;
}

.welcome {
  height:auto;
  width:95%;
  padding: 25px;
}

.welcome-blurb {
  display:flex;
  flex-direction:row;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding:25px;
  gap:10px;
  text-align:center;
}
.content a {
  background: var(--content-link-bg);
  color:var(--content-link);
  padding:15px;
  border-radius:5px;
  border: 5px solid var(--content-link-border);
  transition:.5s;
}
.content a:hover {
  color:var(--content-link-hover);
  background:var(--content-link-bg-hover);
  border: 5px solid var(--content-link-border-hover);
  transition:.5s;
}
.decor {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
}
.metamorphous-regular {
  font-family: "Metamorphous", serif;
  font-weight: 400;
  font-style: normal;
}
.tapestry-regular {
  font-family: "Tapestry", serif;
  font-weight: 400;
  font-style: normal;
}
.info {
  grid-template-columns: auto auto;
  padding:25px;
  margin:10px;
  gap:10px;
}
.button {
  display:grid;
  grid-template-columns:auto auto;
  text-align:center;
  gap:10px;
  margin:auto;
  padding:25px 50px;
}
.subcatagory {
  background: var(--sub-bg);
  background-size: auto;
  background-repeat: repeat;
  padding:15px;
  margin:25px;
  border-radius:10px;
  border:5px solid gold;
}
.subcatagory ul {
  list-style-type:none;
  font-size:15px;
}
.subcatagory ul a {
  transition:.5s;
  color:var(--sub-link);
  font-size:17px;
}
.subcatagory ul a:hover {
  color:var(--sub-link-hover);
  transition:.5s;
}
.shrine {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  width:100%;
  padding:25px;
}
.shrine p {
  width:65%;
}

.vyragosa {
  background:var(--bg-vyragosa);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  width:100%;
  height:auto;
  font-size:3vw;
  text-align:center;
}
.vyragosa img {
  max-width:100%;
  height:auto;
}
.vyragosa a {
  transition:.5s;
}
.vyragosa a:hover {
  color:cyan; 
  transition:.5s;
}
.dragon {
  padding:5%;
  text-align:left;
  font-size:4vw;
}
.dragon p {
  padding-left:5.2%;
}
.dragon h2 {
  padding-left:5.2%;
}