/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */
html, body {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  color: var(--main-text-color);
  transition: all 0.2s;
}

.light_theme {
  --background-color: #000000;
  --background-component-color: #f1f1f1;
  --unclickable-color: #4c4c4c;
  --main-color: #fd654e;
  --main-color-hover: #d45541;
  --main-color-active: #9c3d2f;
  --main-color-active-text-color: #ffffff;
  --main-text-color: #2f2f2f;
  --main-title-color: #2f2f2f;
  --main-title-contrast-color: #2f2f2f;
  --text-channel-color: #2f2f2f;
}

.dark_theme {
  --background-color: #262626;
  --background-component-color: #121212;
  --unclickable-color: #4c4c4c;
  --main-color: #fd654e;
  --main-color-hover: #d45541;
  --main-color-active: #9c3d2f;
  --main-color-active-text-color: #ffffff;
  --main-text-color: #cccccc;
  --main-title-color: #f1f1f1;
  --main-title-contrast-color: #f1f1f1;
  --text-channel-color: #8effff;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins"), url('Poppins-Medium.ttf') format("truetype");
}
@font-face {
  font-family: "font_xp";
  src: local("font_xp"), url('font_xp.otf') format("opentype");
}
body {
  background-color: var(--background-color);
  font-family: "Poppins";
}

.discord_channel {
  color: var(--text-channel-color);
  background-color: rgba(0, 255, 255, 0.3);
  border-radius: 3px;
  cursor: pointer;
}

.discord_channel:hover {
  background-color: rgba(0, 255, 247, 0.54);
}

.button {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 15px;
  color: white;
  width: -moz-fit-content;
  width: fit-content;
  padding: 15px 30px;
  border-radius: 20px;
  -webkit-user-select: none;
          user-select: none;
  background: linear-gradient(150deg, rgb(255, 164, 46) 0%, var(--main-color) 100%);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.23);
  transition: all 0.5s;
}

.button:hover {
  cursor: pointer;
  background: linear-gradient(150deg, rgb(255, 148, 26) 0%, var(--main-color-hover) 100%);
  transform: scale(1.04);
  transition: 0.2s all;
}

.button:active {
  cursor: pointer;
  color: white;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.23);
  transform: scale(0.95);
  transition: all 0.05s;
}

.disabled_button {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 15px;
  color: white;
  width: -moz-fit-content;
  width: fit-content;
  padding: 15px 30px;
  border-radius: 20px;
  -webkit-user-select: none;
          user-select: none;
  background-color: grey;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.09);
  transition: background-color 0.15s ease-in-out;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--background-component-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--main-color-hover);
}

::-webkit-scrollbar-thumb:active {
  background: var(--main-color-active);
}

.section::before {
  position: absolute;
  content: "";
  display: block;
  width: min(1250px, 90%);
  height: 60vh;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background: linear-gradient(150deg, rgba(253, 213, 91, 0.9) 0%, rgba(247, 168, 85, 0.9) 100%);
  transform: skewY(-1deg);
  border-radius: 60px 20px 60px 20px;
  box-shadow: 4px 9px 20px -3px rgba(0, 0, 0, 0.69);
  z-index: -1;
}

section {
  width: min(1200px, 80%);
  padding-top: 50px;
  margin-right: auto;
  margin-left: auto;
}

.first_section {
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

section * {
  color: #2f2f2f;
}

/*DEFAULT CSS FOR MARKDOWN OVERRIDING MARGIN, COLOR AND PADDING*/
markdown h1 {
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
}

markdown h2 {
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
}

markdown h3 {
  margin-block-start: 1em;
  margin-block-end: 1em;
}

markdown h4 {
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
}

markdown h5 {
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

markdown h6 {
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
}

markdown p {
  margin-block-start: 1em;
  margin-block-end: 1em;
}

markdown ul {
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

markdown blockquote {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 20px;
  padding-inline-start: 10px;
  border-left: solid var(--main-color);
  border-radius: 4px;
}

markdown ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 40px;
}

markdown blockquote blockquote {
  margin: 0;
  padding: 0;
  border: none;
}

markdown a {
  color: var(--main-color);
}

markdown blockquote p {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.large_component {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--background-component-color);
  border-radius: 20px;
  width: min(1335px, 90%);
  margin-left: auto;
  margin-right: auto;
  padding: 30px 15px 30px 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
}

.large_component p {
  text-align: center;
  font-size: 20px;
}

.title {
  text-align: center;
  z-index: 0;
  color: var(--main-title-contrast-color);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  background-repeat: no-repeat;
  background-size: 100%;
}

.link {
  color: var(--main-color);
}

@media screen and (max-width: 1340px) {
  .title {
    font-size: 20px;
  }
  .large_component p {
    font-size: 13px;
  }
  .large_component {
    margin-left: auto;
    margin-right: auto;
  }
}

/*# sourceMappingURL=styles.css.map*/