html, body {margin: 0; height: 100%; overflow: hidden}

body {
    background-color: #f2f2f2;
    /* BLACK EQUIVALENT IS #0d0d0d */
}

@font-face {
    font-family: 'Human Cause Regular';
    src: url("/system/fonts/regular.ttf")  format("truetype");
}

@font-face {
    font-family: 'Human Cause Italic';
    src: url("/system/fonts/italic.ttf")  format("truetype");
}

@font-face {
    font-family: 'Code Regular';
    src: url("/system/fonts/code.ttf")  format("truetype");
}

.container{
    display: flex;
    text-align: left;
    margin-left: 20%;
    margin-right: 20%;
    flex-direction: column;
    gap: 3vh;
    justify-content: flex-end;
    align-items: flex-end;
    height: 95vh;
}

/* JAMES NOTE: Combining the h1 styling with the form styling, so cross-platform compatibility is easier */
h1, input{
    text-align: left;
    width: 100%;
    font-family: 'Human Cause Regular';
    font-weight: 100;
    font-size: 3vw;
    margin: 0%;
}

@keyframes blur-in-out {
    /* Values originally 0 and 5px*/
    0%, 100% {
    filter: blur(8px);
    }
    50% {
    filter: blur(20px);
    }
}

h1 {
    color: transparent;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    animation: blur-in-out 1.5s infinite;

    /* NEW: Add transition for color and text-shadow */
    transition: color 0.8s ease, text-shadow 0.8s ease;
}

.welcometexthider{
    visibility: hidden;
}

#welcometext.visible {
    color: transparent;
    transition: opacity 4s ease;
}  

.visible {
    animation: none;
    text-shadow: none;
    color: black;
}

.complex-heading {
    animation: none; /* cancel blur-in-out animation on the whole h1 */
    color: black;
    text-shadow: none;
    opacity: 1;
  }
  
.complex-heading span {
  color: transparent;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  animation: blur-in-out 1.5s infinite;
  transition: color 0.8s ease, text-shadow 0.8s ease;
}

.complex-heading span.unblurred {
  animation: none;
  text-shadow: none;
  color: black;
}

@keyframes system-blur {
    /* Values originally 0 and 5px*/
    0%, 100% {
    filter: blur(10px);
    }
    20%{
    filter: blur(500px);
    }
    50% {
    filter: blur(50px);
    }
}

#system {
    position: absolute;
    top: 20%;
    left: 48%;
    transform: translateX(-50%);
    width: 2vw;
    margin: 0 auto;
    font-size: 20vw;
    color: transparent;
    text-shadow: 0 0 3vw rgba(0,0,0,0.5);
    animation: blur-in-out 1.5s infinite;
    transition: color 0.8s ease, text-shadow 0.8s ease;
}

/* Below is code for the AI loading screen.

-----------------------------------------------------------------------
-----------------------------------------------------------------------
-----------------------------------------------------------------------
-----------------------------------------------------------------------

*/

/* AI LOADING SCREEN */
.loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent; /* or any background color you want */
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 1;
    transition: opacity 1s ease;
}

/* SPINNER */
.wrapper {
    position: relative;
}

.loader {
    width: 20vw;
    aspect-ratio: 1;
    display: grid;
    border-radius: 50%;
    background:
      linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
      linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75%) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    opacity: 0; /* Hidden initially */
}

.loader.visible {
    animation: l23 0.8s infinite steps(50), fadeIn 3s forwards;
}

@keyframes l23 {
    100% { transform: rotate(1turn); }
    0%, 100% { filter: blur(4vw); }
    20% { filter: blur(5vw); }
    50% { filter: blur(7vw); }
}

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

.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    background: inherit;
    opacity: 1;
    transform: rotate(30deg);
}
.loader::after {
    opacity: 0.83;
    transform: rotate(60deg);
}

/* PROGRESS BAR */
.progress {
    width: 20vw;
    height: 3px;
    background:
     linear-gradient(#000 0 0) 0/0% no-repeat
     #ddd;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.progress.appear {
    opacity: 1;
}

.progress.animate {
    animation: loadingbar 10s forwards linear;
}

@keyframes loadingbar {
    40% { background-size: 20%; }
    100% { background-size: 100%; }
}

.loading-screen.fade-out {
    opacity: 0;
}

/* Below is code for the form.

-----------------------------------------------------------------------
-----------------------------------------------------------------------
-----------------------------------------------------------------------
-----------------------------------------------------------------------

*/

form, #id-card, #myform, .formcontrol, input{
    background-color: transparent !important;
}

input{
    border-style: none; 
    color: black;
    text-align: right;
}

textarea:focus, input:focus{
    outline: none;
}