@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');

/* Main */

body {

    background: #0f0f10;
    color: #fff;

    transition: 0.3s ease-out;
    overflow-x: hidden;

    margin: 0;

}

:root {

  --margin: 20vw;
  --primary: #b317ef;
  --font-size: 30px;
  --title-size: 45px;
  --minimal-size: 20px;
  --box-shadow: 5px 5px 50px 10px rgba(40, 39, 86, 0.15);
  --button-font-size: 20px;
  --smaller-text: 20px;
  --smallest-text: 15px;


}

* {

    font-family: "Poppins", sans-serif;

    box-sizing: border-box;

}

/* Fonts */

h1 {

    border-left: 4px solid var(--primary);
    padding-left: 10px;
    font-size: var(--title-size);

}
h2 {

    padding-left: 10px;
    font-size: var(--title-size);

}

p {

    font-size: var(--smallest-text);
}

a {

  color: #b317ef;
  text-decoration-color: #b317ef;
  font-weight: 900;

}

/* Wrapper for the main content. */
.main {
}

/* Text style 1 */
.text_style_1 {

    font-size: var(--minimal-size);

}

/* Navbar. */
.navbar {

    padding-top: 80px;
    padding-right: var(--margin);
    padding-left: var(--margin);

}

/* Main contaniner. */
.main_content {

    margin-top: 160px;
    padding-right: var(--margin);
    padding-left: var(--margin);

    -webkit-animation: fadeInLeft 1s;

    /* Avoid flickering */

    opacity: 0.99;

}

/* Button style 1 */
.button_style_1 {

    position: absolute;

    padding-left: 40px;
    padding-right: 40px;
    padding-top: 15px;
    padding-bottom: 15px;

    border: 2px solid var(--primary);
    border-radius: 5px;

    text-decoration: none;

    cursor: pointer;

    transition: .45s;

    font-size: var(--button-font-size);

}
.button_style_1:hover {

    box-shadow: 0 0 5px var(--primary);

    transform: translateX(5px);

}

.button_style_1:hover {

    box-shadow: 0 0 5px var(--primary);

    transform: translateX(5px);

}

.button_style_2 {

    position: absolute;

    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;

    border: 2px solid var(--primary);
    border-radius: 5px;

    text-decoration: none;

    cursor: pointer;

    transition: .45s;

    font-size: var(--button-font-size);

}
.button_style_2:hover {

    box-shadow: 0 0 5px var(--primary);

    transform: translateX(5px);

}

/* Text style 1 */
.title_style_1 {

    transition: .2s ease-out;

}

/* Text style 2 */
.text_style_2 {

    margin-top: 10px;
    margin-left: 220px;

    text-decoration: none;
    cursor: pointer;

    position: absolute;

    transition: .45s;

    font-size: 25px;

}
.text_style_2:hover {

    margin-left: 225px;

    text-shadow: 0px 0px 3px #fff;

}

.hover_effect {

    transition: .25s;

}
.hover_effect:hover {

    text-shadow: 0px 0px 3px #fff;

}

/* Particles */
#particles_js {

    -webkit-animation: fadeInLeft 1s;

    position: absolute;
    width: 100%;
    height: 100%;

    top: 0px;

}

/* Downloads. */
.downloads {

    padding-top: 20px;

}

/* FadeIn animation. */
@keyframes fadeInLeft {
   0% {

      opacity: 0;
      transform: translateX(-20px);

   }
   100% {

      opacity: 0.99;
      transform: translateX(0);

   }
}
@keyframes fadeIn {

   0% {

      opacity: 0;

   }
   100% {

      opacity: 0.99;

   }
}

/* FAQ / Dropdown. */
.faq {

    color: black;
    display: grid;
    align-content: center;

}
.faq_container {

    display: grid;
    row-gap: .75rem;
    border-radius: .5rem;
    color: #fff;

}
.faq_title {

    font-size: 20px;
    font-weight: 400;
    margin-top: -4px;

    transition: .2s;

}
.faq_header {

    display: flex;
    column-gap: .5rem;
    padding: 1.25rem 1.25rem 1.25rem 1rem;

    cursor: pointer;

}
.faq_description {

    padding: 0 1.25rem 1.25rem 3rem;
    font-size: 18px;

}
.faq_icon {

    font-size: 1.5rem;
    height: max-content;

    transition: .3s;

}
.faq_item {

    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
    background-color: var(--container-color);

    border-radius: .25rem;
    position: relative;

    transition: all .25s ease;

}
.faq_item::after {

    content: '';
    background-color: var(--first-color);

    width: 5px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    border-radius: .25rem 0 0 .25rem;
}
.faq_item:nth-child(1) {

    background-color: #1e1e20;

}
.faq_item:nth-child(1)::after {

    background-color: #b317ef;

}
.faq_item:nth-child(2) {

    background-color: #1e1e20;

}
.faq_item:nth-child(2)::after {

    background-color: #b317ef;

}
.faq_item:nth-child(3) {

    background-color: #1e1e20;

}
.faq_item:nth-child(3)::after {

    background-color: #b317ef;

}
.faq_item:nth-child(4) {

    background-color: #1e1e20;

}
.faq_item:nth-child(4)::after {

    background-color: #b317ef;

}
.faq_content {

    overflow: hidden;
    height: 0;

    transition: all .25s ease;

}
.faq-open .faq_icon {

    transform: rotate(45deg);

}
.faq-open .faq_title {

    font-weight: 600;

}

.spacer {

    padding-top: 350px;

}

.moveable {

    margin-top: 80px;

}

.card {

    text-align: left;

    border-radius: 5px;
    border: 1px solid rgba(0,0,0,.125);
    background-color: #1e1e20;

    padding: 30px;

    flex: 1 1 auto;

    margin: 5px;

    transition: .25s;

    max-width: 30%;

    font-weight: bold;

    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);

}
.card:hover {

    transform: translateY(-5px);

}

.card_container {

    display: flex;

    flex-wrap: wrap;

    box-sizing: border-box;

}

.fadeIn {

    -webkit-animation: fadeIn 1s;

}

.wrapper {

    background-color: #0d0f0f;

    align-items: center;

    z-index: -100;

    width: 100%;

    position: absolute;

    -webkit-box-shadow: inset  0px 0px 10px #000000;

}
.orbiting-lines {

  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  height: 1000px;
  margin: 0 auto;
  width: 100%;

  overflow: hidden;

}
.orbiting-lines:before, .orbiting-lines:after {

  display: block;
  content: " ";

  width: 2560px;
  height: 3560px;

  position: absolute;

  margin-top: -1280px;
  margin-left: -1280px;

  transform-origin: center;

  background-position: center;
  background-repeat: no-repeat;

  z-index: 50;

  top: 50%;
  left: 50%;

}
.orbiting-lines:before {

  background-image: url("https://raw.githubusercontent.com/NightTabGit/Images/main/circle_inner.png");

  background-size: 100% auto;

  -webkit-animation: rotate 30s infinite linear;
  -moz-animation: rotate 30s infinite linear;
  -o-animation: rotate 30s infinite linear;
  animation: rotate 20s infinite linear;

}
.orbiting-lines:after {

  background-image: url("https://raw.githubusercontent.com/NightTabGit/Images/main/circle_outer.png");

  background-size: 100% auto;

  -webkit-animation: rotate 80s infinite linear;
  -moz-animation: rotate 80s infinite linear;
  -o-animation: rotate 80s infinite linear;
  animation: rotate 60s infinite linear;

}
@keyframes rotate {

  0% {

    transform: rotate(0);

  }

  100% {

    transform: rotate(360deg);

  }

}

.back_button {

    text-shadow: 0px 0px 3px #fff;

    transition: .25s;

}
.back_button:hover {

    text-shadow: 0px 0px 10px #fff;

    cursor: pointer;

    transform: translateX(5px);

}


@media only screen and (max-width: 600px) {

    :root {

        --font-size: 20px;
        --title-size: 20px;
        --smaller-text: 12px;
        --smallest-text: 12px;

        --margin: 10vw;

    }

    .main_content {

        margin-top: 50px;

    }

    .faq_description {

        font-size: 12px;
        padding: 0 1.25rem 1.25rem 1.5rem;

    }
    .faq_title {

        font-size: 15px;

    }

    .spacer {

        padding-top: 120px;

    }

    .text_style_2 {

        margin-left: 0px;
        margin-top: 90px;

    }

    .orbiting-lines {

        height: 600px;

    }

    .moveable {

        padding-top: 50px;

    }

}

@media only screen and (max-width: 1350px) {

    .card {

        max-width: 100%;

    }
    .card:hover {

    transform: translateX(5px);
    margin-bottom: 5px;

    }

}