body {
    font-family: Arial, sans-serif;
    background-color: #101025;
    color: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

h1 {
    color: #f00;
    text-align: center;
    text-shadow: 0 0 25px dodgerblue;
}

.subtitle {
    color: dodgerblue;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 5, 5, 0.85);
}

.login {
    position: relative;
    z-index: 2; /* Ajusta el valor según sea necesario */
}

form {
    background-color: #101010;
    border-radius: 8px;
    border-width: 3px;
    box-shadow: 0 0 15px red;
    padding: 20px;
    height: 300px;
    width: 300px;
    text-align: center;
    margin-top: 20px;
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.login input {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
}

.form::before {
    content: "";
    position: absolute;
    height: 500px;
    width: 500px;
    background-image: conic-gradient(dodgerblue 20deg, transparent 120deg);
    animation: rotar 3s linear infinite;
    z-index: 1; /* Ajusta el valor según sea necesario */
}

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

.form::after {
    content: "";
    position: absolute;
    height: 335px;
    width: 335px;
    background-color: #101010;
    border-radius: 8px;
    box-shadow: inset 0px 0px 10% #0000008c;
    z-index: 1; /* Ajusta el valor según sea necesario */
}

.btn {
    background-color: red;
    color: #fff;
    padding: 10px;
    border-radius: 10%;
    box-shadow: 0px 0px 10px red;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn:hover {
    background-color: #d00;
 
}

.btn::before {
    content: "";
    position: absolute;
    height: 500px;
    width: 500px;
    background-image: conic-gradient(Chartreuse 20deg, transparent 120deg);
    animation: rotar-btn 2s linear infinite;
    z-index: 1; /* Ajusta el valor según sea necesario */
}


@keyframes rotar-btn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.btn::after {
    content: "";
    position: absolute;
    height: 335px;
    width: 335px;
    background-color: #101010;
    border-radius: 8px;
    box-shadow: inset 0px 0px 10% #0000008c;
    z-index: 1; /* Ajusta el valor según sea necesario */
}
a {
    color: grey;
}

h1.subtitle {
    text-shadow: 0 0 10px red;
}