@import url("https://fonts.googleapis.com/css2?family=IM+Fell+Great+Primer:ital@0;1&family=Jacquard+12&family=Jacquard+24&family=Schoolbell&display=swap");
:root {
  /* Dark Spectrum */
  --color-black: #000000;
  --color-dark-gray-1: #1c1c1c;
  --color-dark-gray-2: #333333;
  --color-medium-gray: #4d4d4d;
  --color-light-gray: #e0e0e0;
  /* Light Spectrum */
  --color-white: #ffffff;
  --color-white-gray-1: #e6e6e6; /* A light gray, similar in contrast to dark-gray-1 */
  --color-white-gray-2: #cccccc; /* A slightly darker gray, matching the contrast of dark-gray-2 */
  --color-medium-light-gray: #b3b3b3; /* Matches the contrast of medium-gray */
  --color-lightest-gray: #5a5a5a; /* Slightly off-white, providing a subtle contrast with white-gray-1 */
  --transparent-5: 0.5;
  --transparent-75: 0.75;
  --color-accent-gold: #ffb700;
  --color-accent-gold-raw: 255, 183, 0;
  --color-accent-gold-50: rgba(255, 183, 0, 0.5);
  --color-accent-teal-raw: 0, 191, 191;
  --color-accent-teal: rgb(var(--color-accent-teal));
  --color-placeholder: #868e96;
  --size-1: 1px;
  --size-2: 2px;
  --size-3: 4px;
  --size-4: 8px;
  --size-5: 16px;
  --size-6: 32px;
  --size-7: 64px;
  --size-8: 128px;
  --size-9: 256px;
  --size-10: 512px;
  --schoolbell-font: "Schoolbell", cursive;
  --jacquard12-font: "Jacquard 12", system-ui;
  --jacquard24-font: "Jacquard 24", system-ui;
  --imFellGreatPrimer-font: "IM Fell Great Primer", serif;
}

html, body {
  width: 100%;
  min-width: 100%;
  font-family: var(--imFellGreatPrimer-font), "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--main-background-color);
}

main,
.sidebar {
  position: relative;
}

html {
  height: 100%;
}

/* Autofill Styles */
input:is(:-webkit-autofill, :autofill) {
  background-color: rgba(70, 90, 126, 0.4) !important;
}

body {
  height: 100%;
  background-image: url(../image/gif/SunCore.gif);
  color: #fff;
  z-index: 0;
}

.page {
  min-height: 100vh;
  z-index: 1;
}

a {
  text-decoration: none; /* Remove default underline */
  position: relative; /* Needed for the pseudo-element */
  color: var(--a-color); /* Default link color */
}

article {
  margin: var(--size-6);
}

footer {
  border-top: 1px solid var(--main-background-accent-1-color);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

footer > p {
  margin: 1rem;
}

a::after {
  content: "";
  position: absolute;
  width: 100%; /* Full width underline */
  height: 2px; /* Thickness of the underline */
  background-color: #ffb700; /* Accent color */
  left: 0;
  bottom: 0;
  opacity: 0; /* Start fully transparent */
  transition: opacity 0.5s ease-in-out; /* Fade effect */
}

a:hover::after {
  opacity: 1; /* Fade in on hover */
}

a > p, a > i {
  transition: color 0.5s ease-in-out;
}

a:hover > p, a:hover > i {
  color: #ffb700;
}

h1, h2, h3, h4, h5, h6, i, p, label, li {
  color: var(--text-color);
}

.icon-container, .icon-container > a {
  font-family: Roboto Mono, monospace;
  display: flex;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--size-4);
}

.icon-container > p, .icon-container > a > p {
  margin-bottom: var(--size-5);
  margin-top: var(--size-5);
}

nav {
  padding-top: unset !important;
  padding-bottom: unset !important;
}

body {
  margin: 0;
}

.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--main-background-color);
  color: var(--main-transparent-color);
  mix-blend-mode: var(--user-mix-blend-mode);
}

.bg-text {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  filter: blur(9px);
}

.bg-text > * {
  font-size: 5em;
  margin-top: 81px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  user-select: none;
  color: var(--main-transparent-color);
  text-align: justify;
}

footer {
  position: relative;
}

main,
footer {
  z-index: 2;
}

.space {
  margin-bottom: var(--size-5);
}

.sidebar {
  z-index: 3;
}

::-moz-selection {
  color: var(--main-background-color);
  background: var(--color-accent-gold-50);
}

::selection {
  color: var(--main-background-color);
  background: var(--color-accent-gold-50);
}

:root {
  --bs-border-radius: 0;
}

/* Light mode */
@media (prefers-color-scheme: light) {
  :root {
    --background-color: 255, 255, 255;
    --main-background-alert-warning-color: 255, 243, 205;
    --main-background-color: #fff;
    --main-transparent-color: #000;
    --user-mix-blend-mode: screen;
    --main-background-accent-1-color: var(--color-white-gray-1);
    --main-background-accent-1-color: var(--color-white-gray-2);
    --a-color: var(--color-medium-light-gray);
    --text-color: var(--color-lightest-gray);
  }
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: 33, 37, 41;
    --main-background-alert-warning-color: 51, 39, 1;
    --main-background-color: #000;
    --main-transparent-color: #fff;
    --user-mix-blend-mode: multiply;
    --main-background-accent-1-color: var(--color-dark-gray-1);
    --main-background-accent-1-color: var(--color-dark-gray-2);
    --a-color: var(--color-medium-gray);
    --text-color: var(--color-light-gray);
    /* - Botstrap - */
    /*
    --bs-border-color: var(--main-transparent-color);
    --bs-tertiary-bg: #040506;
    --bs-body-color: #d5d9dd;
    --bs-body-bg: #000;
    --bs-border-color: var(--color-dark-gray-1);
    */
  }
}
.btn-primary {
  --bs-btn-color: #fff; /* Keep white text for contrast */
  --bs-btn-bg: #00bfbf; /* Your desired background color */
  --bs-btn-border-color: #008f8f; /* A darker cyan for borders */
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #009696; /* Slightly darker cyan on hover */
  --bs-btn-hover-border-color: #007777; /* Darker border on hover */
  --bs-btn-focus-shadow-rgb: 0, 191, 191; /* Cyan focus outline */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #008080; /* Even darker cyan when active */
  --bs-btn-active-border-color: #006666; /* Darker border when active */
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
  --bs-btn-disabled-color: #b0f0f0; /* Light cyan for disabled text */
  --bs-btn-disabled-bg: #008f8f; /* Muted cyan for disabled state */
  --bs-btn-disabled-border-color: #007777;
}

.form-control:focus {
  border-color: var(--color-accent-teal);
  box-shadow: 0 0 0 0.25rem rgba(0, 191, 191, 0.2509803922);
}

.btn-secondary {
  --bs-btn-color: var(--text-color);
  --bs-btn-bg: var(--main-background-color);
  transition: ease-in-out 0.5s;
}

.btn-secondary:hover {
  color: var(--color-accent-gold);
  background-color: var(--bs-btn-bg);
  border-color: var(--color-accent-gold);
  transition: ease-in-out 0.5s;
}

.btn-secondary.active, .btn-secondary.show,
.btn-secondary:first-child:active {
  color: var(--bs-btn-active-color);
  background-color: var(--color-accent-gold);
  border-color: var(--bs-btn-active-border-color);
}

@media screen and (max-width: 400px) {
  article {
    margin: 0;
    margin-top: var(--size-6);
  }
}
#portal {
  max-width: 300px;
  margin: auto;
  font-family: var(--schoolbell-font);
}

#portal > form > div > span {
  width: 100px;
}

/*Log*/
.log {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  margin: var(--size-6);
  margin-bottom: var(--size-7);
}

.log > ul {
  width: 100%;
  height: 100%;
  list-style-type: none;
  margin: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--size-5);
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
}

.log > ul > li {
  /*height: 150px;*/
  width: 250px;
  background-color: var(--bs-card-bg);
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}

/*Bootstrap*/
.alert-warning {
  --bs-alert-margin-bottom: 0;
  background-color: rgba(var(--main-background-alert-warning-color), var(--transparent-5));
}

.form-control {
  background-color: rgba(var(--background-color), var(--transparent-75));
}

/*loader*/
.loader {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--size-2);
}

.loader > i {
  font-size: 5em;
}

.placeholder-img{
  background-color: var(--color-placeholder);
  height: 500px;
}

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