/*Root*/

:root {
  --text:#fff;
  --link: #ffd700;
  --link-hover: #27f4b9;
  --itallic:;
  --bold:;
  --hr: rgba(250,250,250,.4);
  --header:url('https://timelostprotodrake.neocities.org/img/tlpdanim.gif');
  --bg-index:url('https://timelostprotodrake.neocities.org/img/stormpeaksbg.jpg');
  --bg-main:url('https://timelostprotodrake.neocities.org/img/stormpeaksbg.jpg');
  --bg-games:url('https://timelostprotodrake.neocities.org/img/ulduarbg.jpg');
  --bg-general:url('https://timelostprotodrake.neocities.org/img/ulduartbg.jpg');
  --bg-subcategory:url('https://timelostprotodrake.neocities.org/img/temple2bg.jpg');
  --bg-subcategoryrazor:url('https://timelostprotodrake.neocities.org/img/templebg.jpg');
  --container-main:url('https://timelostprotodrake.neocities.org/img/burlap_backdrop.jpg');
  --container-games:url('https://timelostprotodrake.neocities.org/img/metal_dark.jpg');
  --container-general:url('https://timelostprotodrake.neocities.org/img/wood-weathered.jpg');
  --container-subcategory:url('https://timelostprotodrake.neocities.org/img/wood-weathered.jpg');
  --container-subcategoryrazor:url('https://timelostprotodrake.neocities.org/img/metal_dark.jpg');
  --border-main:url('https://timelostprotodrake.neocities.org/img/border-1.jpg') 10 round;
  --border-games:url('https://timelostprotodrake.neocities.org/img/border-2.jpg') 10 round;
  --border-general:url('https://timelostprotodrake.neocities.org/img/border-3.jpg') 10 round;
  --border-subcategory:url('https://timelostprotodrake.neocities.org/img/border-3.jpg') 10 round;
  --border-subcategoryrazor:url('https://timelostprotodrake.neocities.org/img/border-2.jpg') 10 round;
  --nav: #222;
  --nav-hover: #111;
  --button:rgba(0,0,0,.5);
  --button-hover:rgba(199, 149, 60,.5);
}

/*Main*/

a {
  color: var(--link);
  text-decoration:none;
  cursor: url('https://cdn.cursors-4u.net/previews/world-of-warcraft-wow-glowing-hand-armor-d297a8ec-32.webp') 32 32, auto !important;
}
a:hover {
  color:var(--link-hover);
  text-decoration:none;
}

i { color:var(--itallic);}

b { color:var(--bold);}

h1,h2,h3,h4,h5,h6 {
  font-family: "Metamorphous", serif;
  margin:0;
}

hr {
  color:var(--hr);
  width:95%;
}
summary {
  font-family: "Metamorphous", serif;
  font-size:2em;
}

body {
  background-color: #000;
  font-size:15px;
  font-family: "Metamorphous", serif;
  font-style: normal;
  margin:0;
  color: var(--text);
  cursor: url('https://cdn.cursors-4u.net/previews/world-of-warcraft-wow-hand-armor-0d67e864-32.webp') 32 32, auto !important;
}

.index {
  background: var(--bg-index);
  background-size:cover;
  background-attachment:fixed;
}

.dragon {
  display:flex;
  height:100%;
  justify-content:center;
  padding:10px 0;
}

.dragon img {
  height:90vh;
}

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

.main .container {
  background:var(--container-main);
  border-image:var(--border-main);
}

.games {
  background: var(--bg-games);
  background-size:cover;
  background-attachment:fixed;
}

.games .container {
  background:var(--container-games);
  border-image:var(--border-games);
}

.general {
  background:var(--bg-general);
  background-size:cover;
  background-attachment:fixed;
}

.general .container {
  background:var(--container-general);
  border-image:var(--border-general);
}

.subcategory {
  background:var(--bg-subcategory);
  background-size:cover;
  background-attachment:fixed;
}

.subcategoryrazor {
  background:var(--bg-subcategoryrazor);
  background-size:cover;
  background-attachment:fixed;
}

.subcategory .container {
  background:var(--container-subcategory);
  border-image:var(--border-subcategory);
}

.subcategoryrazor .container {
  background:var(--container-subcategoryrazor);
  border-image:var(--border-subcategoryrazor);
}

.header {
  width:100%;
  height:200px;
  background: var(--header);
  background-size:cover;
  background-repeat:no-repeat;
}

.container {
  height:100%;
  width:55vw;
  margin:auto;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
}

.content {
  display:flex;
  box-sizing:border-box;
  width:100%;
  padding:20px 30px;
}

.content img {
  width:100%;
}

.flex {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  padding:20px 30px;
  gap:15px;
}

.button {
  color: var(--text);
  background-color:var(--button);
  width:25%;
  padding:15px;
  border: 2px solid var(--link);
  border-radius:5px;
  text-align:center;
  transition:.3s;
  cursor: url('https://cdn.cursors-4u.net/previews/world-of-warcraft-wow-hand-armor-0d67e864-32.webp');
}

.button:hover {
  color: var(--text);
  background-color: var(--button-hover);
  border: 2px solid var(--link-hover);
  box-shadow: -4px 4px 8px rgba(0,0,0,0.5);
  transition:.3s;
  cursor: url('https://cdn.cursors-4u.net/previews/world-of-warcraft-wow-hand-armor-0d67e864-32.webp');
}

.button-b {
  color: var(--text);
  background-color:var(--button);
  width:90%;
  margin:auto;
  padding:15px;
  border: 2px solid var(--link);
  border-radius:5px;
  transition:.3s;
  cursor: url('https://cdn.cursors-4u.net/previews/world-of-warcraft-wow-hand-armor-0d67e864-32.webp');
}

.footer {
  padding:20px 30px;
  text-align:center;
}

/*Navigation*/

.nav {
  overflow: hidden;
  background-color: var(--nav);
  font-family: "Metamorphous", serif;
}

.nav a {
  float: left;
  font-size: 16px;
  color: var(--text);
  text-align: center;
  padding: 12px 12px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  background: var(--nav);
  font-size: 16px;
  border: none;
  outline: none;
  color: var(--text);
  padding: 12px 12px;
  font-family: "Metamorphous", serif;
  cursor: url('https://cdn.cursors-4u.net/previews/world-of-warcraft-wow-glowing-hand-armor-d297a8ec-32.webp') 32 32, auto !important;
}

.nav a:hover, .dropdown:hover .dropbtn {
  background-color: var(--nav-hover);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--nav);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content .flex {
  display:flex;
  flex-direction:row;
  padding:0;
}


.dropdown-content a {
  float: none;
  color: var(--text);
  padding: 8px 10px;
  font-size:12px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: var(--nav-hover);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content .catagory {
  color:var(--link);
}

.dropdown-content .catagory:hover {
  color:var(--link-hover);
}

/*Wings*/

li.red {
  list-style-image: url('https://timelostprotodrake.neocities.org/img/wingred32.png');
}
li.black {
  list-style-image: url('https://timelostprotodrake.neocities.org/img/wingblack32.png');
}
li.blue {
  list-style-image: url('https://timelostprotodrake.neocities.org/img/wingblue32.png');
}
li.white {
  list-style-image: url('https://timelostprotodrake.neocities.org/img/wingwhite32.png');
}
li.purple {
  list-style-image: url('https://timelostprotodrake.neocities.org/img/wingpurple32.png');
}
li.gold {
  list-style-image: url('https://timelostprotodrake.neocities.org/img/winggold32.png');
}
li.green {
  list-style-image: url('https://timelostprotodrake.neocities.org/img/winggreen32.png');
}

/*Coins*/

i.cgold {
  display:inline-block;
  width:16px;
  height:16px;
  background-image:url('https://timelostprotodrake.neocities.org/img/coingold.png');
  background-size:contain;
  background-repeat:no-repeat;
}

i.csilver {
  display:inline-block;
  width:16px;
  height:16px;
  background-image:url('https://timelostprotodrake.neocities.org/img/coinsilver.png');
  background-size:contain;
  background-repeat:no-repeat;
}

i.ccopper {
  display:inline-block;
  width:16px;
  height:16px;
  background-image:url('https://timelostprotodrake.neocities.org/img/coincopper.png');
  background-size:contain;
  background-repeat:no-repeat;
}