/* ==================================================
   FONTS
   ================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

@font-face {
  font-family: "BenguiatLocal";
  src: url("ITC-Benguiat-Condensed-Bold.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}


/* ==================================================
   BASE LAYOUT
   ================================================== */

body {
  margin: 0;
  background: #000 url('background.png') center top repeat;

  display: flex;
  justify-content: center;

  font-family: "Inria Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: 1px;
  color: #b91618;
}

.site-wrapper {
  width: 981px;
  position: relative;
  box-shadow: 0 0 100px #B50105;
}

.header-img {
  display: block;
  width: 981px;
  height: 459px;
}

.logo {
  position: absolute;
  top: 390px;
  left: 50%;
  transform: translateX(-50%);
  width: 429px;
  height: 252px;
  z-index: 5;
  pointer-events: none;
}

.content {
  background: #000;
  padding: 20px 100px;
  min-height: 300px;
}

.footer {
  background: #000;
  height: 150px;
  padding-top: 60px;
  text-align: center;

  font-family: "Inria Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: 1px;
  color: #b91618;
}


/* ==================================================
   NAVIGATION
   ================================================== */

.nav {
  position: relative;
  width: 981px;
  height: 138px;
  background: #200808;
  overflow: hidden;
}

.nav-bg {
  position: absolute;
  inset: 0;
  background: url('background.png') top left repeat;
  background-size: auto;
  animation: none;
}

.nav-column {
  position: absolute;
  top: 0;
  width: 312px;
  height: 138px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  z-index: 2;
}

.nav-column.left  { left: 0; }
.nav-column.right { right: 0; }

.nav-column a {
  font-family: "BenguiatLocal", serif;
  font-size: 30px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.3;

  position: relative;
  z-index: 3;

  color: transparent;
  background: linear-gradient(to bottom, #e60006, #570201);
  -webkit-background-clip: text;
  background-clip: text;

  filter: drop-shadow(0 0 0 black);
}

.nav-column a:hover {
  animation: pulseGlow 1.6s ease-in-out infinite;
  letter-spacing: 3px;

  color: transparent;
  background: linear-gradient(to bottom, #e60006, #570201);
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes pulseGlow {
  0% {
    filter:
      drop-shadow(0 0 2px black)
      drop-shadow(0 0 2px black)
      drop-shadow(0 0 4px black);
  }

  50% {
    filter:
      drop-shadow(0 0 6px black)
      drop-shadow(0 0 6px black)
      drop-shadow(0 0 12px black);
  }

  100% {
    filter:
      drop-shadow(0 0 3px black)
      drop-shadow(0 0 3px black)
      drop-shadow(0 0 6px black);
  }
}


/* ==================================================
   TYPOGRAPHY
   ================================================== */

a {
  font-family: "BenguiatLocal", serif;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.3;

  position: relative;
  z-index: 3;

  color: transparent;
  background: linear-gradient(to bottom, #e60006, #570201);
  -webkit-background-clip: text;
  background-clip: text;
}

a:hover {
  color: #b91618;
  text-decoration: none;
}

strong,
b {
  font-family: "Inria Serif", serif;
  font-size: 20px;
  text-decoration: none;
  line-height: 1.3;

  position: relative;
  z-index: 3;

  color: transparent;
  background: linear-gradient(to bottom, #e60006, #570201);
  -webkit-background-clip: text;
  background-clip: text;
}

i,
em {
  font-family: "Inria Serif", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  text-decoration: none;
  line-height: 1.3;

  position: relative;
  z-index: 3;

  color: transparent;
  background: linear-gradient(to bottom, #e60006, #570201);
  -webkit-background-clip: text;
  background-clip: text;
}

h1 {
  font-family: "BenguiatLocal", serif;
  font-size: 50px;
  text-transform: uppercase;
  text-align: center;
  position: relative;

  color: #101010;
  -webkit-text-stroke: 3px transparent;

  background: linear-gradient(to bottom, #e60006, #570201);
  -webkit-background-clip: text;
  background-clip: text;
}

h2,
h3 {
  font-family: "BenguiatLocal", serif;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;

  position: relative;
  z-index: 3;

  color: transparent;
  background: linear-gradient(to bottom, #e60006, #570201);
  -webkit-background-clip: text;
  background-clip: text;
}

h2 { font-size: 30px; }
h3 { font-size: 20px; }


/* ==================================================
   SAMPLE LINK
   ================================================== */

.samplelink {
  width: 500px;
  margin: 0 auto;
  padding: 10px 20px;

  font-family: "Inria Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 1px;
  color: #b91618;

  text-align: center;

  background-color: #000;
  border: 1px solid #000;
  border-radius: 0;
  outline: none;

  transition: 0.3s ease;
  box-sizing: border-box;

  box-shadow:
    #FFF 0px 0px 2px,
    #e60006 0px 0px 8px,
    #570201 0px 0px 10px,
    #570201 0px 0px 15px,
    #570201 0px 0px 15px;
}

.copy-button {
  width: 100px;
  margin: 10px auto 0 auto !important;
  padding: 10px !important;

  font-family: "Inria Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  font-size: 14px;
  letter-spacing: 1px;
  color: #b91618;

  text-align: center;

  background-color: #000000;
  border: 1px solid #000000;

  transition: background 0.2s;

  box-shadow:
    #FFF 0px 0px 2px,
    #e60006 0px 0px 8px,
    #570201 0px 0px 10px,
    #570201 0px 0px 15px,
    #570201 0px 0px 15px;
}

.copy-button:hover {
  letter-spacing: 2px;
  background-color: rgba(0, 0, 0, 1);

  box-shadow:
    #FFF 0px 0px 3px,
    #FFF 0px 0px 5px,
    #e60006 0px 0px 10px,
    #570201 0px 0px 15px,
    #570201 0px 0px 15px;
}


/* ==================================================
   CODES
   ================================================== */

.codesort {
  width: 600px;
  margin: 0 auto;
}

.show_sort_list,
.codesort a {
  
}

.show_sort_list:hover,
.codesort a:hover {
  color: #2c2c2c;
}

#codes ul {
  display: flex;
  justify-content: center;
  gap: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}

#codes li {
  display: inline;
}

#codes p {
  text-align: center;
}

#codes p img {
  margin: 0 auto;
}

.show_sort_list {
  margin-left: 100px;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 20px;
  list-style: none;
}

.show_sort_list li {
  margin: 5px 0;
}

.show_sort_list a {
  text-decoration: none;
}

.show_sort_list a:hover {
  color: #2c2c2c;
  text-decoration: underline;
}

#codes img {
  margin: 5px !important;
  padding: 0;
  background: #f2f2ef;
  border: 0px solid #000000;

  box-shadow:
    #e60006 0px 0px 2px,
    #e60006 0px 0px 8px,
    #570201 0px 0px 10px;
}


/* ==================================================
   FORMS
   ================================================== */

.custom_input {
  display: flex;
  align-items: center;
  margin-bottom: 5px !important;
}

.custom_input label {
  width: 120px;
  margin-right: 10px;
  text-align: right;

  font-family: "Inria Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: 1px;
  color: #b91618;
}

form[class^="show_"] span[class$="_label"] {
  display: block;
  margin-bottom: 5px;

  font-family: "Inria Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: 1px;
  color: #b91618;
}

.custom_input .input,
form[class^="show_"] input[type="text"],
form[class^="show_"] input[type="email"],
form[class^="show_"] input[type="password"],
form[class^="show_"] input[type="url"],
form[class^="show_"] select,
form[class^="show_"] textarea {
  width: 300px;
  margin-bottom: 5px;
  margin-top: 10px !important;
  padding: 10px 20px;

  font-family: "Inria Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: 1px;
  color: #b91618;

  background-color: #000;
  border: 1px solid #000;
  border-radius: 0;
  outline: none;

  transition: 0.3s ease;
  box-sizing: border-box;

  box-shadow:
    #FFF 0px 0px 2px,
    #e60006 0px 0px 8px,
    #570201 0px 0px 10px,
    #570201 0px 0px 15px,
    #570201 0px 0px 15px;
}

.custom_input .input:focus,
form[class^="show_"] input:focus,
form[class^="show_"] select:focus,
form[class^="show_"] textarea:focus {
  background-color: rgba(0, 0, 0, 1);

  box-shadow:
    #FFF 0px 0px 3px,
    #FFF 0px 0px 5px,
    #e60006 0px 0px 10px,
    #570201 0px 0px 15px,
    #570201 0px 0px 15px;
}

.show_join_password_field,
.show_update_password_field,
.show_join_password_field2,
.show_update_password_field2 {
  display: block;
  width: 300px;
  clear: both;
}

.custom_input input[type="submit"],
form[class^="show_"] input[type="submit"],
form[class^="show_"] input[type="reset"] {
  width: auto;
  margin-top: 10px;
  margin-right: 20px;
  padding: 10px 20px;

  color: #aabbcf;
  background-color: #000;
  border: 1px solid #000;
  border-radius: 0;

  cursor: pointer;
  transition: background 0.3s;

  box-shadow:
    #FFF 0px 0px 2px,
    #e60006 0px 0px 8px,
    #570201 0px 0px 10px,
    #570201 0px 0px 15px,
    #570201 0px 0px 15px;
}

.custom_input input[type="submit"]:hover,
form[class^="show_"] input[type="submit"]:hover,
form[class^="show_"] input[type="reset"]:hover {
  background-color: rgba(0, 0, 0, 1);

  box-shadow:
    #FFF 0px 0px 3px,
    #FFF 0px 0px 5px,
    #e60006 0px 0px 10px,
    #570201 0px 0px 15px,
    #570201 0px 0px 15px;
}

form[class^="show_"] p {
  margin-bottom: 15px;
}


/* ==================================================
   WEBRING
   ================================================== */

#fanlistings {
  margin: 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1em;
  text-shadow: none !important;
}