@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
* {
    color: hsl(43, 90%, 96%) !important;
}
body {
    background-color: hsl(43, 90%, 4%) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.form-signin {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    margin: 0 auto;
    background-color: rgb(8, 8, 8);
}

.form-signin input {
    margin-bottom: 1rem;
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: hsl(0, 0%, 13%);
    color: hsl(43, 90%, 96%);
    border: none !important;
    border-bottom: 2.8px solid hsl(30, 3%, 13%) !important;
    border-radius: 0px !important;
    font-size: 1.2rem !important;
}

.form-signin input:focus {
    background-color: hsl(0, 0%, 13%);
    color: rgb(240, 224, 6) !important;
    text-decoration: none;
    border-bottom-color: rgb(240, 224, 6) !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: 0 1px 6px 0 rgba(90, 81, 3, 0.5);
}

.form-signin input::placeholder {
    color: hsl(0, 0%, 33%) !important;
    text-shadow: 1px 2px 3px hsl(0, 0%, 13%);
}

.form-signin input:focus::placeholder {
    color: hsl(0, 0%, 59%) !important;
    outline: none !important;
}
.logo-img{
    max-width: 130px;
}
.form-signin button {
    background-color: rgb(240, 224, 6) !important;
    border: none !important;
    font-weight: bold;
    border-radius: 0.5rem !important;
    color: hsl(43, 90%, 4%) !important;
}

.form-signin button:hover {
    transition: 0.3s;
    background-color: hsl(46, 100%, 39%) !important;
    color: hsl(43, 90%, 4%) !important;
}

.form-signin h1{
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    text-shadow:  0 0 15px #ffff00, 0 0 15px #ff0000;
    animation: glow 5.5s linear infinite;
    font-weight: bold;
    font-size: 2.3rem;
}
.form-signin span{
    color: #ffff00 !important;
}
.form-signin label{
    color: #777777 !important;
}
.form-signin h1::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: hsl(43, 90%, 96%);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.gradient-border {
    --border-width: 1px;
    position: relative;
    color: white;
    border-radius: 10px;

    &::after {
        position: absolute;
        content: "";
        top: calc(-1 * var(--border-width));
        left: calc(-1 * var(--border-width));
        z-index: -1;
        width: calc(100% + var(--border-width) * 2);
        height: calc(100% + var(--border-width) * 2);
        background: linear-gradient(
            60deg,
            hsl(224, 85%, 66%),
            hsl(269, 85%, 66%),
            hsl(314, 85%, 66%),
            hsl(359, 85%, 66%),
            hsl(44, 85%, 66%),
            hsl(89, 85%, 66%),
            hsl(134, 85%, 66%),
            hsl(179, 85%, 66%)
        );
        background-size: 300% 300%;
        background-position: 0 50%;
        border-radius: 10px;
        animation: moveGradient 4s alternate infinite;
    }
}

@keyframes moveGradient {
    50% {
        background-position: 100% 50%;
    }
}

@keyframes glow {
   
    100% {
        filter: hue-rotate(360deg);
    }
}

.swal2-popup{
    background-color: hsl(43, 90%, 4%) !important;
    color: hsl(43, 90%, 96%) !important;
}
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    height: 100vh !important;
}