/*Color palette
#010101 -- black
#261931 -- va11halla purple
#140B1D -- dark va11halla purple
#6B6D77 -- button grey
#D4C3C8 -- brown ish?
#A01254 -- va11halla red
#e35698 -- good text
*/

@font-face {
  font-family: "CyberpunkWaifus";
  src: url('../fonts/CyberpunkWaifus.woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "RussianGothic";
  src: local("Arial");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0420-42FF;
}

body,
#debug {
    image-rendering: pixelated;
    font-family: "CyberpunkWaifus","RussianGothic", "MS UI Gothic", "NEC_APC3", Tahoma;
    background-color: #09000B;
    text-shadow: var(--body-text-shadow);
    font-smooth: never;
    -webkit-font-smoothing: none;
}

h2 {
  color: #e35698;
  font-family: "CyberpunkWaifus";
  margin: 0;
  text-shadow: var(--pink-text-shadow);
}

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 88vh;
}

.right-screen {
  position: fixed;
  bottom: 15;
  right: 15;
  text-align: center;
}

body {
  overflow-x: hidden;
  margin: 0;
}

#container,
#backside-container {
    width: 900px;
    margin: 0 auto;
}

#bg {
  z-index: -999;
  background-size: cover;
  image-rendering: pixelated;
  background-color: #09000B;
  width: fit-content;
  height: 100%;
  position: absolute;
  filter: brightness(30%);
}

a {
  color: #e35698;
  text-decoration: none;
}

a:active {
  color: #A01254;
}

a:hover {
  color: #A01254;
}

.currentbtn {
  color: #A01264;
}

.currentbtn::before {
  content: " [ ";
}

.currentbtn::after {
  content: " ] ";
}

#maintd {
  width: 675px;
  vertical-align: baseline;
  
}
#menutd {
  width: 225px;
  vertical-align: baseline;
}

.box {
  background-color: #261931f8;
  border: 0.5px solid #6B6D77;
  box-shadow: 5px 10px #6B6D77;
  color: white;
  padding: 10px 15px;
  margin: 5px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.centerbox {
  text-align: center;
}

textarea {
  background-color: #09000B;
  color: white;
  border: 0.5px solid #6B6D77;
  color: white;
  font-family: MS Gothic, monospace;
  resize: none;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(160, 18, 84, 0.479);
}

::-webkit-scrollbar-thumb {
  background-color: rgb(31, 31, 31);
  outline: 1px solid rgb(227, 86, 152);
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgb(31, 31, 31);
  outline: 1px solid rgb(227, 86, 152);
}

#contentMain {
  width: 80vh;
  height: 60vh;
  border: 0.5px solid #6B6D77;
  box-shadow: 5px 10px #6B6D77;
  background-color: #261931f8;
}

#contentPlayer {
  width: 25vh;
  height: 11vh;
  border: 0.5px solid #6B6D77;
  box-shadow: 5px 10px #6B6D77;
  background-color: #261931f8;
}

#seperate {
  width: 100%;
  height: 1px;
  background-color: #6B6D77;
  text-decoration: underline solid #6B6D77 !important;
  padding: 0%;
}

/*some of this css was taken from dimden.dev, full credit to them for the source used*/