/* Default tags */
* {
  box-sizing: border-box;
  scroll-behavior: smooth;
  transition: all 187ms Cubic-Bezier(0, 0, 0, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.63) transparent;
}

*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #2c2c2c;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(143, 143, 143, 0.63);
  border-radius: 20px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(240, 240, 240, 0.63);
  border-radius: 20px;
  scale: 10%;
}

div {
  display: flexbox;
}

body {
  margin: 0;
  display: flex;
  font-weight: 400;
  line-height: 1.25em;
  font-family: arial, helvetica, sans-serif;
  color: #dcdcdc;
  background-color: rgb(64, 64, 64);
  font-size: 0.75em;
}

a {
  text-decoration: none;
}

b {
  font-size: 1.033em;
}

strong {
  color: #7375cc;
}

code {
  background-color: rgba(0, 0, 0, 0.233);
  padding: 0.11em 0.33em;
  line-break: loose;
  border-radius: 4px;
}

textarea {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8em;
  resize: none;
  width: 90%;
  min-height: 2em;
}

textarea,
select,
input[type] {
  color: #d9d8dc;
  padding: 0.5em 0.5em;
  margin-bottom: 1em;
  background-color: #393a38;
  border: 2pt solid #a1fa83;
  border-radius: 8pt;
  box-shadow: none;
  box-sizing: border-box;
}

img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 4pt;
}

/* Body classes */
.content {
  float: left;
  padding: 5em 15em 0em 15em;
  z-index: 0;
  background-color: rgb(64, 64, 64);
  width: 99vw;
  min-height: 100vh;
}

.section {
  font-size: 1.1rem;
  line-height: 1.33em;
  margin-bottom: 2em;
}

.section::before {
  content: " ";
  margin-top: -200px;
  height: 200px;
}

.section a {
  color: rgb(51, 122, 183);
  font-size: 1.025em;
}

.link {
  color: rgb(51, 122, 183) !important;
  font-size: 1.025em;
}

.link:hover {
  color: hsl(208, 80%, 70%) !important;
  text-decoration-line: underline !important;
}

.section a:hover {
  color: hsl(208, 80%, 70%);
  text-decoration-line: underline;
}

.section h2 a {
  color: hsl(0, 0%, 95%);
  font-size: inherit;
}

.section h3 a {
  color: hsl(0, 0%, 85%);
  font-size: inherit;
}

.section h2::before {
  display: flex;
  content: "";
  margin-top: -3em;
  height: 3em;
}

.section h3::before {
  display: flex;
  content: "";
  margin-top: -4em;
  height: 4em;
}

.section ul,
.section ol {
  color: #ffffff;
  line-height: 2em;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.welcomeContent {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: ffffff;
  font-size: 2.2em;
  line-height: 2em;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  transition-duration: 0s;
  transition: -webkit-backdrop-filter 0.5s linear;
  transition: backdrop-filter 0.5s linear;
  transition: backdrop-filter 0.5s linear, -webkit-backdrop-filter 0.5s linear;
  -webkit-backdrop-filter: saturate(100%) blur(8px);
          backdrop-filter: saturate(100%) blur(8px);
}

.welcomeContent h1 {
  color: #ffffff;
  font-size: 1.8em;
  word-wrap: break-word;
  text-align: center;
  margin-top: auto;
  display: flex;
  letter-spacing: 0.05em;
  text-shadow: 0.05em 0.075em 0.05em rgba(0, 0, 0, 0.7);
}

.welcomeContent .welcomeButton {
  color: #ffffff;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1.2em;
  padding: 1em 1.5em;
  font-size: 1.8rem;
  background-color: #235163;
  border-radius: 12pt;
  text-shadow: none;
  box-shadow: 0.1em 0.1em 0.6em rgba(0, 0, 0, 0.6);
  z-index: 1;
  text-align: center;
  margin-bottom: auto;
}

.welcomeContent .welcomeButtonWJ {
  color: #ffffff;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1.2em;
  padding: 0.2em 1em;
  font-size: 1.5rem;
  background-color: #1f1b24;
  border-radius: 6pt;
  text-shadow: none;
  box-shadow: 0.1em 0.1em 0.6em rgba(0, 0, 0, 0.6);
  margin-top: 0.75em;
  margin-bottom: auto;
  text-align: center;
  z-index: 0;
}

.welcomeContent .welcomeButtonWJ strong {
  color: rgba(242, 242, 242, 0.6);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 0.9em;
}

.welcomeContent .welcomeButtonWJ:hover strong {
  color: rgba(242, 242, 242, 0.9);
}

.welcomeContent .welcomeButtonWJ:hover {
  color: rgba(255, 255, 255, 0.8);
  background-color: #443a51;
  box-shadow: 0em 0em 0.6em rgba(50, 114, 139, 0.37);
}

.welcomeContent .welcomeButton strong {
  color: rgb(242, 242, 242);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 1.3em;
}

.welcomeContent .welcomeButton:hover {
  color: white;
  background-color: rgb(50, 114, 139);
  box-shadow: 0em 0em 0.6em rgba(50, 114, 139, 0.37);
}

.blur {
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
  -webkit-backdrop-filter: saturate(100%) blur(0.5px);
          backdrop-filter: saturate(100%) blur(0.5px);
}

.blur h2 {
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
  text-shadow: 0.05em 0.075em 0.1em rgba(0, 0, 0, 0.7);
}

/* Titlebar */
.titlecontainer {
  background-color: rgb(26, 26, 26);
  display: flex;
  position: fixed;
  width: 100%;
  z-index: 3;
  height: 5em;
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.5);
}

.titlecontainer a {
  color: rgb(170, 170, 170);
  margin-top: auto;
  margin-bottom: auto;
  font-size: 2em;
}

.titlecontainer a:hover {
  color: rgb(255, 255, 255);
}

.titlecontainer .guideLinks {
  display: flex;
  margin-left: auto;
}

.titlecontainer .guideLinks a {
  color: #ffffff;
  font-size: 1.2em;
  margin-top: 0.75em;
}

.titlecontainer img {
  padding: 0.8em 1em 0.8em 0em;
  max-width: 100%;
  max-height: 100%;
}

/* Navbars */
#sidenavLeft {
  display: flex;
  flex-direction: column;
  width: 13em;
  height: 100%;
  position: fixed;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 333ms Cubic-Bezier(0, 0, 0, 1);
  margin-top: 4em;
  overflow-x: hidden;
  white-space: nowrap;
  z-index: 2;
  background-color: rgb(44, 44, 44);
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.4);
}

#sidenavLeft .guideLinks a,
#sidenavLeft a {
  display: flex;
  font-size: 1.33em;
  color: hsl(0, 0%, 50%);
  text-decoration: none;
  padding: 0.55em 0em 0.55em 0em;
}

#sidenavLeft div {
  margin-left: 1.25em;
  margin-right: 1.25em;
}

#sidenavLeft ul {
  list-style: none;
  margin-left: -3em;
}

.guideLinks a {
  color: rgb(129, 129, 129);
  text-decoration: none;
  padding: 0em 1em 0em 0em;
}

.section h2 a:hover,
.section h3 a:hover,
.guideLinks a:hover,
#sidenavLeft a:hover,
#sidenavRight a:hover {
  color: rgb(255, 255, 255);
  text-decoration-line: initial;
  text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.2);
}

#sidenavLeft .active {
  color: rgba(255, 255, 255, 0.786);
}

#sidenavLeft .guideLinks {
  display: none;
  margin-bottom: 2em;
}

#sidenavRight {
  height: 100%;
  width: 13em;
  position: fixed;
  z-index: 2;
  right: 0;
  -webkit-backdrop-filter: saturate(10%) blur(32px);
          backdrop-filter: saturate(10%) blur(32px);
  background-color: rgb(44, 44, 44);
  padding-top: 5em;
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.4);
}

#sidenavRight a {
  text-decoration: none;
  color: hsl(0, 0%, 50%);
}

#sidenavRight ul {
  list-style: none;
  font-size: 1.05em;
  padding: 0em 0em 0em 1.5em;
  line-height: 1.75em;
  text-decoration: none;
  color: #818181;
}

#sideButton {
  display: block;
  height: 5em;
  width: 5em;
  margin-left: -5em;
  margin-right: 5em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  float: left;
  transition: all 333ms Cubic-Bezier(0, 0, 0, 1);
}

#sideButton i {
  padding: 0.2em 0.25em;
  font-size: 3.5em;
}

.pressed {
  scale: 90%;
  color: hsl(0, 0%, 70%);
}

.extended-background {
  margin-left: 0.75em !important;
  margin-right: 0.75em !important;
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-image: linear-gradient(rgba(255, 240, 200, 0.025), rgba(255, 240, 200, 0.04), rgba(255, 240, 200, 0.03), rgba(255, 240, 200, 0.01), rgba(255, 240, 200, 0));
  border-radius: 16px;
}

.extended-background.active {
  background-image: linear-gradient(rgba(255, 240, 200, 0.04), rgba(255, 240, 200, 0.08), rgba(255, 240, 200, 0.055), rgba(255, 240, 200, 0.02), rgba(255, 240, 200, 0.005));
}

#extended-separator {
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  text-shadow: rgba(0, 0, 0, 0.8) 0px 1px 5px;
}

#extended-separator.active {
  color: rgba(255, 255, 255, 0.95);
}

/* Quotes */
blockquote {
  background-color: rgb(52, 52, 52);
  font-size: 1.05em;
  border-left: 0.5em solid #5b5381;
  padding: 0.5em 0.75em;
  line-height: 1.4em;
  border-radius: 4pt;
  box-shadow: 0 0.3em 0.7em hsla(0, 0%, 0%, 0.15);
}

blockquote a {
  color: rgb(51, 122, 183);
  text-decoration: none;
  font-size: 1.09em;
}

blockquote a:hover {
  text-decoration: underline;
}

/* Headers */
h1 {
  color: #8587eb;
  font-size: 2.5em;
  word-wrap: break-word;
}

h2 {
  color: #ffffff;
  font-size: 1.8em;
  word-wrap: break-word;
}

.install {
  color: #8587eb;
  font-size: 1.5em;
}

.performance::after {
  display: inline-flex;
  position: absolute;
  transform: translateY(-0.4em);
  content: "Performance Hit";
  text-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.5);
  box-shadow: 0 0.15em 6pt hsla(0, 0%, 0%, 0.3);
  color: #d16759;
  background-image: linear-gradient(to top, hsl(7, 57%, 12.5%), hsl(7, 57%, 18%));
  border: 2pt solid hsl(7, 57%, 25%);
  border-radius: 12pt;
  font-size: 0.7em;
  padding: 0.25em 0.5em 0.25em 0.5em;
  margin-left: 1em;
}

blockquote .performance::after {
  position: inherit !important;
  margin: 0.2em 0.4em 0.2em 0.4em;
  transform: translateY(-0.3em);
}

#footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: auto;
  margin-bottom: 4em !important;
}

#footer ul {
  margin-block-start: 0em !important;
  margin-block-end: 0em !important;
  margin-inline-start: 0px !important;
  margin-inline-end: 0px !important;
  padding-inline-start: 0px !important;
}

#footer a,
.dono {
  padding-left: 6% !important;
  font-size: 1.8em !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer;
  transform: translateY(0.125em);
}

#footer i {
  color: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-0.125em);
  margin-right: 2%;
}

#footer li:hover a,
.dono:hover {
  color: rgb(255, 255, 255) !important;
  text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.5em !important;
}

.donoMenu {
  position: fixed;
  background-color: #202020;
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 1em;
  bottom: 8em;
  left: 0em;
  font-size: 0.8em;
}

.donoMenu a:hover {
  scale: 100%;
}

.discord {
  background-color: rgba(88, 101, 242, 0.5);
}

.discord:hover {
  background-color: rgb(88, 101, 242);
}

.kofi {
  background-color: rgba(255, 94, 91, 0.5);
}

.kofi:hover {
  background-color: rgb(255, 94, 91);
}

.github {
  background-color: rgba(36, 41, 47, 0.5);
}

.github:hover {
  background-color: rgb(36, 41, 47);
}

.navigationArrow img {
  width: 7.5em;
  height: 7.5em;
  margin: 0.5em 1em 1em 1em;
}

.navigationArrow .arrowText {
  text-decoration: none;
  font-size: 2.5em;
  display: flex;
  padding-top: 1.4em !important;
  color: #ffffff;
}

.navigationArrow:hover img {
  scale: 90%;
  transform: scaleY(90%);
}

/* Modifier classes */
.left {
  float: left;
}

.right {
  float: right;
}

.mirror {
  rotate: 180deg;
}

@keyframes slide-down {
  from {
    max-height: 0;
    margin-top: -0.12px;
  }
  to {
    max-height: 5000px;
  }
}
@keyframes slide-up {
  from {
    max-height: 1000px;
  }
  to {
    max-height: 0;
    margin-top: -0.12px;
  }
}
@media only screen and (max-width: 900px) {
  .navigationArrow .arrowText {
    display: none;
  }
  .content {
    width: 100%;
    margin-left: 0;
    padding: 5em 1em 0 1em;
  }
  #sidenavLeft {
    width: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: rgb(44, 44, 44) !important;
  }
  #sideButton {
    margin-left: 0;
    margin-right: 1em;
  }
  .titlecontainer .guideLinks {
    margin-top: -100px;
    margin-right: -1000px;
  }
  .titlecontainer img {
    display: none;
  }
  .titlecontainer a {
    margin-left: -0.5em;
  }
  #sidenavLeft .guideLinks {
    display: block;
  }
  #sidenavRight {
    width: 0%;
  }
  h1,
  h2 {
    line-height: 1.2em;
  }
  code {
    line-break: anywhere;
  }
  .performance::after {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 1em;
    padding: 0.05em 0.5em 0.05em 0.5em;
    font-size: 0.5em;
    width: -moz-fit-content;
    width: fit-content;
    text-align: center;
    margin-left: 0;
  }
}
@media only screen and (max-width: 700px) {
  .titlecontainer a {
    font-size: 180%;
  }
}
@media only screen and (min-width: 901px) {
  #sideButton {
    margin-left: -100px;
  }
}
.transparent {
  background-color: rgba(255, 255, 255, 0) !important;
  box-shadow: none !important;
}

#logoex {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  height: 12em;
}/*# sourceMappingURL=style.css.map */