@font-face {
  font-family: "TF2";
  src: url("/style/fonts/TF2.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "tf2build";
  src: url("/style/fonts/tf2build.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "tf2-classicons";
  src: url("/style/fonts/tf2-classicons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Readex Pro";
  src: url("/style/fonts/ReadexPro-Regular.ttf") format("truetype");
}

body {
  --red: #bd3b3bff;
  --blu: #5b7a8cff;
  --blu-orange: #ef9849ff;
  --red-orange: #f08149ff;
  --coffee: #34302dff;
  --chocolate: #462d26;
  --milky: #c1a18aff;
  --tan: #dabdabff;
  --eggshell: #f5e7deff;
  --bluer: #395c78ff;
  --redder: #9d312fff;
  --gray: #768a88ff;
  --sienna: #913a1eff;
  --space-cadet: #111d4aff;
  --phthalo-green: #1e321dff;
  --xiketic: #1a0d15ff;
  --antique-bronze: #5c521eff;
  --medium-turquoise: #2adbd5ff;
  --june-bud: #b8e337ff;
  --pale-purple-pantone: #eadeeeff;
  --cream: #f5ffc8ff;
  --venetian-red: #c90707ff;
  background-color: var(--coffee);
  font-family: "Readex Pro";
  padding: 100px;
  padding-top: 20px;
  padding-bottom: 20px;
}

header {
  display: flex;
  color: var(--space-cadet);
  border: 3px dashed;
  z-index: 1;
  padding: 10px 40px 10px 50px;
  background-color: var(--red);
}

header a {
  color: black;
}

nav,
nav ul {
  display: flex;
  list-style-type: none;
  align-items: center;
  justify-content: center;
}

nav ul li:not(nth-last-of-type) {
  margin-left: 10px;
  margin-right: 10px;
}

h1:not(header h1) {
  font-family: "tf2build";
  font-size: 50px;
  background-color: var(--chocolate);
  color: var(--eggshell);
  padding: 10px;
}

h2,
h3,
h4 {
  font-family: "tf2build";
}

h2 {
  background-color: var(--blu);
  color: white;
  padding: 10px;
}

h3.class {
  font-size: 25px;
  text-align: center;
  text-decoration: underline;
}

h5 {
  font-size: 16px;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div > section {
  background: var(--tan);
  padding: 20px;
}

article h2,
article h3,
article h4 {
  font-family: "TF2";
  background-color: var(--tan);
  color: black;
  font-weight: 700;
  padding: 10px;
  text-align: center;
}

.weapon li,
.hat li,
.misc li {
  line-height: 2em;
  padding-left: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  list-style-type: none;
  list-style: none;
  display: table-row;
}
.weapon li:before,
.hat li:before,
.misc li:before {
  font-family: "FontAwesome";
  content: "🩸";
  color: black;
  margin-right: 15px;
  display: table-cell;
}

.weapon li:nth-child(2n):before,
.hat li:nth-child(3n):before {
  content: "💧";
}

.weapon li:nth-child(3n):before,
.hat li:nth-child(2n):before,
.misc li:before {
  content: "🔫";
}

.weapon li:nth-child(4n):before,
.misc li:nth-child(2n):before {
  content: "💔";
}

span.weapon,
span.kills,
span.ubers,
span.strange,
span.killstreaker,
span.sheen,
span.cosmetic,
span.unusual,
span.paint,
span.style,
span.halloween {
  font-weight: 900;
  text-transform: uppercase;
}

span.weapon,
span.unusual {
  border: 2px dotted;
  padding: 1px;
}

span.kills,
span.halloween {
  text-decoration: line-through;
}

span.ubers {
  text-decoration: double underline;
}

span.sheen {
  text-transform: capitalize;
}

span.strange,
span.style {
  text-decoration: underline;
}

span.paint {
  text-shadow: 1px 1px green;
}

.primary {
  background: var(--red);
  color: white;
  border: outset gold;
}

.primary,
.secondary,
.melee,
.hat,
.misc {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
}

.primary img,
.secondary img,
.melee img,
.hat img,
.misc img {
  width: 200px;
  margin: 10px;
}

.secondary {
  background: var(--blu);
  border: inset var(--sienna);
  transform: rotate(1deg);
}

.secondary:nth-child(2n) {
  background: var(--redder);
  color: white;
  transform: rotate(-0.5deg);
}

.melee {
  background: var(--chocolate);
  border: groove var(--bluer);
  color: var(--eggshell);
}

.hat {
  background: var(--bluer);
  color: white;
  border: groove var(--coffee);
}

.hat:nth-of-type(2n) {
  background: var(--blu-orange);
  color: black;
}

.misc {
  background: var(--red-orange);
  border: inset var(--redder);
}

#skiplink {
  display: none;
}

#skiplink:focus {
  display: block;
}

#general {
  display: flex;
  justify-content: space-between;
}

@media only screen and (max-width: 600px) {
  #general {
    flex-direction: column;
  }
  .primary,
  .secondary,
  .melee,
  .hat,
  .misc {
    width: auto;
  }
}

#stats,
#moments,
#classes {
  margin: 10px;
}

#stats {
  background-color: var(--blu-orange);
  padding: 10px;
}

#classes {
  background-color: var(--red-orange);
  padding: 10px;
}

#moments {
  background-color: var(--eggshell);
  padding: 10px;
}

#moments table {
  background-color: var(--coffee);
  color: var(--eggshell);
}

#moments table tr {
  width: 90px;
}

#moments table tr td {
  border: 1px dotted var(--red-orange);
}