/*

Isn't it fun to go fully vanilla?
No frameworks, no SSR.. just..
you. and. your creativity

*/


@font-face {
  font-family: "Domaine Display Narrow";
  src: url("/Website/Resources/Fonts/Domaine Display Narrow.woff2");
}

@font-face {
  font-family: "Quicksand";
  src: url("/Website/Resources/Fonts/Quicksand.woff2");
}

@font-face {
  font-family: "Baloo 2";
  src: url("/Website/Resources/Fonts/Baloo 2.woff2")
}

@font-face {
  font-family: "Noto Sans Mono";
  src: url("/Website/Resources/Fonts/Noto Sans Mono.woff2");
}

:root {
  --White: #FFFFFF;
  --Black: #000000;
  --Black_Transparent: hsla(0, 0%, 0%, 0.5);
  
  --Gray_4: hsla(0, 0%, 4%, 1);
  --Gray_10: hsla(0, 0%, 10%, 1);
  --Gray_15: hsla(0, 0%, 15%, 1);
  --Gray_20: hsla(0, 0%, 20%, 1);
  --Gray_30: hsla(0, 0%, 30%, 1);
  --Gray_60: hsla(0, 0%, 60%, 1);
  --Gray_85: hsla(0, 0%, 85%, 1);
  
  --Purple: #8000FF;
  --Purple_Transparent: #8000FF40;
  
  --Golden: #FFBF00;
  --Golden_Transparent: #FFBF0040;
  
  --Enterprise_1: #E45DFF;
  --Enterprise_2: #8E84FF;
  --Enterprise_3: #82FFC8;
  
  --Red: #FF0000;
  --Red_20: hsla(0, 100%, 20%, 1);
  --Red_30: hsla(0, 100%, 30%, 1);
  --Red_06: hsla(0, 100%, 50%, 0.6);
  --Red_03: hsla(0, 100%, 50%, 0.3);
  --Red_02: hsla(0, 100%, 50%, 0.2);
  --Red_01: hsla(0, 100%, 50%, 0.1);
  
  --Orange_06: hsla(35, 100%, 50%, 0.6);
  --Orange_03: hsla(35, 100%, 50%, 0.3);
  --Orange_01: hsla(35, 100%, 50%, 0.1);
  
  --Blue: #0000FF;
  /* Blue_08 | It's dimmer */
  --Blue_08: hsla(210, 100%, 50%, 0.8);
  --Blue_03: hsla(210, 100%, 50%, 0.3);
  --Blue_01: hsla(210, 100%, 50%, 0.1);
  
  --Green: #00FF00;
  --Green_20: hsla(120, 100%, 20%, 1);
  --Green_30: hsla(120, 100%, 30%, 1);
  
  --Green_06: hsla(120, 100%, 50%, 0.6);
  --Green_03: hsla(120, 100%, 50%, 0.3);
  --Green_02: hsla(120, 100%, 50%, 0.2);
  --Green_01: hsla(120, 100%, 50%, 0.1);
  --Green_Transparent: #00FF0040;
}

* {
  /* Style Debugging
  outline: 1px solid var(--Green_Transparent) !important;
  /**/
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  /* Before: thin */
  scrollbar-width: none;
  scrollbar-color: var(--Purple) var(--Purple);
}

::selection {
  color: var(--Black);
  background-color: var(--Gray_85);
}


/* |--------------------| Navigation Animation (between pages) |--------------------| */


@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 0.5s;
}


/* |--------------------| Native Classes |--------------------| */


html {
  scroll-behavior: smooth;
  /* Disable Pull to Refresh */
  overscroll-behavior-y: contain;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--Black);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Baloo 2";
  font-weight: normal;
  line-height: 1.2;
  color: var(--Gray_85);
  text-align: center;
  
  &.Beautiful {
    font-family: "Domaine Display Narrow";
    font-size: 50px;
    color: transparent;
    background: linear-gradient(135deg, var(--Gray_85), var(--Gray_85), var(--Gray_60), var(--Gray_60));
    background-clip: text;
  }
}

p {
  font-family: "Baloo 2";
  line-height: 1.4;
  font-size: 15px;
  color: var(--Gray_60);
  word-spacing: 1px;
  
  &.Small {
    font-size: 12px;
  }
}

a {
  display: inline-block;
  color: inherit;
  word-spacing: 1px;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.5px;
  -webkit-tap-highlight-color: transparent;
}

span {
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span {
  
  &.Premium {
    color: transparent;
    background: linear-gradient(135deg, var(--Gray_30), var(--Golden), var(--Gray_30));
    background-clip: text;
  }
  
  &.Enterprise {
    color: transparent;
    background: linear-gradient(90deg, var(--Enterprise_1), var(--Enterprise_2), var(--Enterprise_3));
    background-clip: text;
  }
  
  &.Chroma {
    /* background-clip | Must be applied after for each, otherwise it won't work */
    color: transparent;
    
    &.Red {
      background: linear-gradient(135deg, var(--Gray_30), var(--Red), var(--Gray_30));
      background-clip: text;
    }
    
    &.Green {
      background: linear-gradient(135deg, var(--Gray_30), var(--Green), var(--Gray_30));
      background-clip: text;
    }
  }
}

input,
select {
  font-family: "Baloo 2";
  font-size: 15px;
  width: 80%;
  height: 30px;
  padding: 0px 10px;
  color: var(--Gray_85);
  background-color: var(--Black);
  outline: 1px solid var(--Gray_15);
  border: none;
  border-radius: 5px;
  transition: 0.15s linear;
  
  &::placeholder {
    color: var(--Gray_30);
  }
  
  &:focus {
    outline: 2px solid var(--Purple);
  }
  
  &:disabled {
    color: var(--Gray_60);
    background-color: var(--Gray_4);
    outline: 1px solid var(--Gray_10);
    
    &::placeholder {
      color: var(--Gray_15);
    }
  }
}

input[type="file"] {
  color: var(--Purple);
  padding-top: 3px;
  outline-width: 2px;
  outline-style: dashed;
  
  &::file-selector-button {
    display: none;
  }
}

video {
  &.SmoothMargin {
    mask-composite: intersect;
    mask-image:
      linear-gradient(to right, transparent, var(--Black) 20%, var(--Black) 80%, transparent),
      linear-gradient(to bottom, transparent, var(--Black) 20%, var(--Black) 80%, transparent);
  }
}

button {
  font-family: "Baloo 2";
  font-size: 15px;
  width: 80%;
  height: 30px;
  border: none;
  border-radius: 5px;
  outline: 1px solid transparent;
  transition: 0.15s linear;
  
  &.Disabled {
    pointer-events: none;
    color: var(--Gray_15) !important;
    background-color: var(--Gray_4) !important;
    outline-color: var(--Gray_10) !important;
  }
  
  &.Transparent {
    gap: 10px;
    justify-content: flex-start;
    color: var(--Gray_60);
    background: none !important;
    outline-color: var(--Gray_15);
    
    [data-lucide] {
      color: currentColor !important;
    }
    
    &:active {
      filter: brightness(0.5);
    }
    
    &.Red {
      color: var(--Red_30);
    }
    
    &.Green {
      color: var(--Green_30);
    }
  }
  
  &.White {
    color: var(--Black);
    background-color: var(--Gray_85);
    outline-color: var(--Gray_85);
    
    &:active {
      filter: brightness(0.5);
    }
  }
  
  &.Gray {
    color: var(--Gray_85);
    background-color: var(--Gray_10);
    outline-color: var(--Gray_15);
    
    &:active {
      filter: brightness(0.5);
    }
  }
  
  &.Red {
    color: var(--Gray_85);
    background-color: var(--Red_20);
    outline-color: var(--Red_30);
    
    &:active {
      filter: brightness(0.5);
    }
  }
  
  &.Green {
    color: var(--Gray_85);
    background-color: var(--Green_20);
    outline-color: var(--Green_30);
    
    &:active {
      filter: brightness(0.5);
    }
  }
  
  &.Premium {
    background: linear-gradient(90deg, var(--Golden_Transparent), var(--Golden), var(--Golden_Transparent));
    
    &:active {
      filter: brightness(0.5);
    }
  }
  
  &.Enterprise {
    color: var(--Black);
    background: linear-gradient(90deg, var(--Enterprise_1), var(--Enterprise_2), var(--Enterprise_3));
    
    &:active {
      filter: brightness(0.5);
    }
  }
  
  &.Icon {
    gap: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    
    [data-lucide] {
      width: 15px;
      color: currentColor;
    }
  }
}

table {
  font-family: "Baloo 2";
  font-size: 15px;
  color: var(--Gray_85);
  background-color: var(--Gray_4);
  outline: 1px solid var(--Gray_15);
  border-spacing: 0px 10px;
  border-radius: 5px;
  padding: 0px 10px;
  table-layout: fixed;
  
  thead {
    padding-bottom: 5px;
    
    th {
      font-weight: normal;
      padding: 0px 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--Gray_15);
      
      span.Icon {
        gap: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        
        [data-lucide] {
          width: 15px;
          color: currentColor;
        }
      }
    }
  }
  
  tbody {
    
    td {
      overflow-x: auto;
      white-space: nowrap;
      font-weight: normal;
      min-width: 60px;
      max-width: 200px;
      height: 40px;
      padding: 0px 10px;
      color: var(--Gray_60);
      background-color: var(--Black);
      outline: transparent solid 1px;
      transition: 0.15s linear;
      
      &:focus {
        border-radius: 5px;
        outline-color: var(--Purple);
      }
      
      div.Position_Center {
        gap: 10px;
        
        button {
          outline: none;
          
          [data-lucide] {
            width: 18px;
          }
        }
      }
    }
  }
  
  tfoot {
    td {
      padding-top: 10px;
      border-top: 1px solid var(--Gray_15);
    }
  }
}

[data-lucide] {
  /* Always a square with "aspect-ratio: 1/1" and "height: auto" */
  aspect-ratio: 1/1;
  /* Lucide' default is 2 | 1.5 looks better*/
  stroke-width: 1.5;
  flex-shrink: 0;
  height: auto;
  color: var(--Gray_60);
}


/* |--------------------| Navigation Classes (Notifications, Header, Menu, Footer) |--------------------| */


/* ---------- Notifications */

@keyframes ShowNotification {
  0% {
    opacity: 0;
    
  }
  
  100% {
    opacity: 1;
  }
}

@keyframes HideNotification {
  0% {
    opacity: 1;
  }
  
  100% {
    opacity: 0;
  }
}

#Notifications {
  z-index: 40;
  pointer-events: none;
  gap: 10px;
  position: fixed;
  overflow-y: auto;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  /* 130 + 2 from padding (top + bottom)*/
  height: 132px;
  /* Notification' outline is cropped by (parent) Notifications' overflow-y */
  padding: 1px;
}

.Notification {
  --TitleColor: var(--Gray_85);
  --Color: var(--Gray_85);
  --OutlineColor: var(--Gray_15);
  
  z-index: 4;
  pointer-events: auto;
  display: absolute;
  overflow: hidden;
  width: 100%;
  height: auto;
  max-width: 400px;
  min-height: 60px;
  max-height: 90px;
  padding: 10px;
  animation: ShowNotification 0.5s cubic-bezier(0, 0, 0, 1) forwards;
  
  background:
    /* Middle */
    linear-gradient(var(--Color) 1px) top 0px left 50% / 40% 1px,
    linear-gradient(var(--Color) 1px) bottom 0px left 50% / 40% 1px,
    
    /* Top Left */
    linear-gradient(to right, var(--Color) 1px, transparent 0) top left / 1px 20%,
    linear-gradient(to bottom, var(--Color) 1px, transparent 0) top left / 10% 1px,
    
    /* Top Right */
    linear-gradient(to left, var(--Color) 1px, transparent 0) top right / 1px 20%,
    linear-gradient(to bottom, var(--Color) 1px, transparent 0) top right / 10% 1px,
    
    /* Bottom Left */
    linear-gradient(to right, var(--Color) 1px, transparent 0) bottom left / 1px 20%,
    linear-gradient(to top, var(--Color) 1px, transparent 0) bottom left / 10% 1px,
    
    /* Bottom Right */
    linear-gradient(to left, var(--Color) 1px, transparent 0) bottom right / 1px 20%,
    linear-gradient(to top, var(--Color) 1px, transparent 0) bottom right / 10% 1px;
  
  background-color: var(--Black_Transparent);
  background-repeat: no-repeat;
  outline: 1px solid var(--OutlineColor);
  backdrop-filter: blur(8px);
  
  &>h4 {
    color: var(--TitleColor);
  }
  
  &>.Close {
    position: absolute;
    top: 10px;
    right: 10px;
    
    [data-lucide] {
      stroke-width: 1;
      width: 20px;
      color: var(--Color);
    }
  }
  
  &.Success {
    --TitleColor: var(--Green_06);
    --Color: var(--Green_06);
    --OutlineColor: var(--Green_02);
  }
  
  &.Error {
    --TitleColor: var(--Red_06);
    --Color: var(--Red_06);
    --OutlineColor: var(--Red_02);
  }
}

/* ---------- Header */

#Header {
  z-index: 2;
  position: fixed;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: 50px;
  border-radius: 5px;
  background-color: var(--Black_Transparent);
  backdrop-filter: blur(8px);
}

#Header_Logo {
  position: fixed;
  top: 15px;
  left: 20px;
  height: 20px;
  filter: brightness(85%);
}

#Header_Title {
  position: fixed;
  top: 10px;
  left: 40px;
  font-size: 25px;
  color: var(--Gray_85);
}

/* ---------- Menu */

#Menu {
  z-index: 4;
  position: fixed;
  top: 70px;
  right: 10px;
  padding: 10px;
  width: 250px;
  opacity: 0;
  border-radius: 5px;
  background-color: var(--Black_Transparent);
  outline: 1px solid var(--Gray_10);
  backdrop-filter: blur(8px);
  transition: 0.15s linear;
  pointer-events: none;
  
  &.active {
    opacity: 1;
    pointer-events: auto;
  }
  
  &>.MenuButtons {
    button {
      width: 100%;
      height: 40px;
      padding-left: 5px;
      outline: none;
      
      &.Icon {
        gap: 10px;
        justify-content: flex-start;
      }
    }
  }
  
  & #Menu_Developer_Avatar {
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 25%;
  }
}

.Menu_Space {
  margin: 10px 0px;
}

#Menu_Toggle {
  position: fixed;
  top: 10px;
  right: 15px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  /*outline: 1px solid var(--Gray_15);*/
  
  &.active {
    .Menu_Toggle_Line_1 {
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
    }
    
    .Menu_Toggle_Line_2 {
      bottom: 50%;
      transform: translate(-50%, 50%) rotate(-45deg);
    }
  }
}

.Menu_Toggle_Line_1,
.Menu_Toggle_Line_2 {
  position: absolute;
  left: 50%;
  width: 15px;
  height: 1.5px;
  background: var(--Gray_85);
  transition: 0.15s linear;
  transform: translateX(-50%);
}

.Menu_Toggle_Line_1 {
  top: 35%;
}

.Menu_Toggle_Line_2 {
  bottom: 35%;
}

/* ---------- Content */

.Content {
  flex: 1;
  min-height: 100vh;
}

/* ---------- Footer */

#Footer {
  width: 100%;
  margin-top: 100px;
  
  button {
    width: 100%;
    height: 40px;
    outline: none;
    
    &.Icon {
      gap: 10px;
      justify-content: flex-start;
    }
  }
}


/* |--------------------| Custom Classes |--------------------| */


.Text_Center {
  text-align: center;
}

.Text_Left {
  text-align: left;
}

@keyframes Spin {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

.Spin {
  animation: Spin 1s linear infinite;
}

#Blur {
  z-index: 20;
  pointer-events: none;
  position: fixed;
  opacity: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);
  background-color: var(--Black_Transparent);
  transition: 0.15s linear;
  
  &.active {
    pointer-events: auto;
    opacity: 1;
  }
}

#Sections {
  z-index: 2;
  display: flex;
  position: fixed;
  overflow-x: auto;
  /*scrollbar-width: none;*/
  top: 62px;
  left: 10px;
  width: calc(100% - 20px);
  height: 40px;
  border-radius: 5px;
  background-color: var(--Black_Transparent);
  backdrop-filter: blur(8px);
  
  &>.Line {
    position: absolute;
    bottom: 0px;
    width: 0px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--Purple), var(--Purple), transparent);
    transition: 0.1s linear;
  }
  
  button {
    display: flex;
    align-items: center;
    width: auto;
    height: 100%;
    margin: 0px 14px;
    color: var(--Gray_60);
    background: transparent;
    outline: none;
    white-space: nowrap;
    
    [data-lucide] {
      width: 15px;
      height: 15px;
      margin-right: 5px;
      color: currentColor;
      flex-shrink: 0;
    }
    
    &:active {
      color: var(--Gray_85);
    }
  }
}

.IconText {
  font-family: "Baloo 2";
  font-size: 15px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0px 5px;
  color: var(--Gray_60);
  
  [data-lucide] {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    color: var(--Gray_60);
    flex-shrink: 0;
  }
  
  &.Gray_30 {
    color: var(--Gray_30);
    
    [data-lucide] {
      color: var(--Gray_30);
    }
  }
}

.Box {
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 80%;
  padding: 10px;
  border-radius: 5px;
  background-color: var(--Black);
  outline: 1px solid var(--Gray_15);
  
  &.Gray_4 {
    background-color: var(--Gray_4);
  }
}

.Line {
  --Line_Color: var(--Gray_85);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--Line_Color), transparent);
  
  &.Gray_15 {
    background: none;
    background-color: var(--Gray_15);
  }
  
  &.Purple {
    --Line_Color: var(--Purple);
  }
  
  &.Premium {
    background: linear-gradient(90deg, transparent, var(--Golden), transparent);
  }
}

.Note {
  font-family: "Baloo 2";
  line-height: 1.2;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  outline: 1px solid;
  
  [data-lucide] {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    flex-shrink: 0;
  }
  
  &.Info {
    color: var(--Blue_08);
    background-color: var(--Blue_01);
    outline-color: var(--Blue_03);
    
    [data-lucide] {
      color: var(--Blue_08);
    }
  }
  
  &.Success {
    color: var(--Green_06);
    background-color: var(--Green_01);
    outline-color: var(--Green_03);
    
    [data-lucide] {
      color: var(--Green_06);
    }
  }
  
  &.Warn {
    color: var(--Orange_06);
    background-color: var(--Orange_01);
    outline-color: var(--Orange_03);
    
    [data-lucide] {
      color: var(--Orange_06);
    }
  }
  
  &.Error {
    color: var(--Red_06);
    background-color: var(--Red_01);
    outline-color: var(--Red_03);
    
    [data-lucide] {
      color: var(--Red_06);
    }
  }
}

/* Adds "..." if the text is too long */
.Ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.Position_Horizontal {
  display: flex;
  flex-direction: row;
}

.Position_Center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.Position_Center_Top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  
  /* For flex + overflow auto | Because children will shrink */
  &>* {
    flex-shrink: 0;
  }
}

.Position_Center_Multiple {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.Position_Left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.Position_Left_Top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.Position_Left_Multiple {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.Position_Right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.Position_Right_Top {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}

.Position_Right_Multiple {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
}


/* |--------------------| Developer Dashboard |--------------------| */


.SettingBox {
  width: 100%;
  border-radius: 5px;
  outline: 1px solid var(--Gray_15);
  
  & h3 {
    text-align: left;
  }
  
  & input,
  select {
    width: 100%;
  }
  
  &>.Top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background-color: var(--Gray_4);
    
    img {
      border-radius: 25%;
      outline: 1px solid var(--Gray_15);
      background-color: var(--Black);
    }
  }
  
  &>.SettingBox_Line {
    width: 100%;
    height: 1px;
    background-color: var(--Gray_15);
  }
  
  &>.Bottom {
    /* Position_Left_Multiple */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    
    gap: 10px;
    padding: 10px 20px;
    background-color: var(--Black);
    
    p {
      color: var(--Gray_30);
    }
    
    & button {
      width: auto;
      height: 30px;
      padding: 0px 10px;
    }
  }
  
  &.Red {
    outline-color: var(--Red_20);
    
    &>.SettingBox_Line {
      background-color: var(--Red_20);
    }
    
    &>.Bottom {
      background-color: var(--Red_01);
    }
  }
}

.TeamsBox {
  width: 700px;
  max-width: 100%;
  padding: 20px;
  border-radius: 5px;
  background-color: var(--Gray_4);
  outline: 1px solid var(--Gray_15);
  
  &>.List {
    gap: 20px;
    
    &>.Team {
      width: 300px;
      max-width: 100%;
      padding: 10px;
      border-radius: 5px;
      background-color: var(--Black);
      outline: 1px solid var(--Gray_15);
      
      h3 {
        margin-right: auto;
      }
      
      img {
        width: 50px;
        height: 50px;
        border-radius: 25%;
        outline: 1px solid var(--Gray_15);
        background-color: var(--Black);
      }
      
      button {
        width: 100%;
        height: 30px;
      }
    }
  }
}


/* |--------------------| Colors |--------------------| */


.White {
  color: var(--White);
}

.White_Background {
  background-color: var(--White);
}

.Gray_30 {
  color: var(--Gray_30);
}

.Gray_60 {
  color: var(--Gray_60);
}

.Gray_85 {
  color: var(--Gray_85);
}

.Purple {
  color: var(--Purple);
}

.Red {
  color: var(--Red);
}

.Green {
  color: var(--Green);
}

.Green_06 {
  color: var(--Green_06);
}


/* |--------------------| Galactic Background |--------------------| */


@keyframes Stars {
  0% {
    opacity: 0%
  }
  
  10% {
    opacity: 100%
  }
  
  50% {
    opacity: 50%;
    top: -100px
  }
  
  90% {
    opacity: 100%
  }
  
  100% {
    opacity: 0%;
    background-size: 200px 300px;
    left: -100px
  }
}


@keyframes Nebula {
  from {
    opacity: 50%
  }
  
  to {
    opacity: 100%
  }
}


.Stars {
  z-index: -2;
  inset: 0px;
  position: fixed;
  animation: Stars 20s infinite alternate linear;
  background-size: 300px 200px;
  background-image:
    radial-gradient(2px 2px at 20px 30px, var(--Purple), transparent),
    radial-gradient(2px 2px at 40px 70px, var(--Purple), transparent),
    radial-gradient(1px 1px at 90px 40px, var(--Purple), transparent),
    radial-gradient(2px 2px at 130px 80px, var(--Purple), transparent),
    radial-gradient(1px 1px at 160px 120px, var(--Purple), transparent),
    radial-gradient(2px 2px at 200px 60px, var(--Purple), transparent),
    radial-gradient(1px 1px at 250px 150px, var(--Purple), transparent),
    radial-gradient(2px 2px at 300px 40px, var(--Purple), transparent);
}

.Nebula {
  z-index: -2;
  inset: 0;
  position: fixed;
  animation: Nebula 10s infinite alternate linear;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, var(--Purple_Transparent), transparent 50%),
    radial-gradient(ellipse 60% 60% at 80% 30%, var(--Purple_Transparent), transparent 50%),
    radial-gradient(ellipse 90% 70% at 50% 90%, var(--Purple_Transparent), transparent 50%);
}