@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@500;600;700&display=swap');


/* Main background */

body {

    background: linear-gradient(
        135deg,
        #450a0a,
        #991b1b
    );

    font-family: "Inter", sans-serif;

    margin: 0;

    min-height: 100vh;

    transition: background 0.5s;

    overflow: hidden;

}


/* Cybersecurity background */

.cyber-background {

    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;

}


/* Digital grid */

.grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );

}


/* Cybersecurity symbols */

.cyber-symbol {

    position: absolute;

    color: rgba(255, 255, 255, 0.12);

    font-family: "Orbitron", sans-serif;

    font-size: 70px;

    user-select: none;

}


/* Symbol positions */

.lock {

    top: 12%;

    left: 12%;

    transform: rotate(-15deg);

}


.computer {

    top: 18%;

    right: 10%;

    transform: rotate(12deg);

}


.shield {

    bottom: 15%;

    left: 10%;

    transform: rotate(10deg);

}


.code {

    bottom: 18%;

    right: 12%;

    font-size: 55px;

    transform: rotate(-12deg);

}


.key {

    top: 65%;

    left: 22%;

    font-size: 50px;

    transform: rotate(-20deg);

}


.network {

    top: 40%;

    right: 18%;

    font-size: 90px;

}


/* Main pages */

.page {

    position: relative;

    z-index: 2;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

}


.hidden {

    display: none;

}


/* Main card */

.box {

    background-color: rgba(255, 255, 255, 0.96);

    width: 450px;

    padding: 40px;

    border-radius: 18px;

    text-align: center;

    box-shadow:

        0 20px 50px rgba(0, 0, 0, 0.45),

        0 0 40px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(10px);

}


/* Titles */

h1 {

    font-family: "Orbitron", sans-serif;

    color: #1e1b4b;

    font-size: 30px;

    margin-bottom: 20px;

}


h2 {

    font-family: "Orbitron", sans-serif;

}


/* Paragraphs */

p {

    color: #555;

    font-size: 17px;

    line-height: 1.6;

}


/* Buttons */

button {

    background-color: #4f46e5;

    color: white;

    border: none;

    padding: 13px 35px;

    font-family: "Inter", sans-serif;

    font-weight: 600;

    font-size: 17px;

    border-radius: 9px;

    cursor: pointer;

    margin-top: 15px;

    transition: 0.2s;

}


button:hover {

    background-color: #4338ca;

    transform: translateY(-2px);

}


/* Voice buttons */

.voiceButton {

    display: block;

    margin: 15px auto 0 auto;

    background-color: #0f766e;

}


.voiceButton:hover {

    background-color: #115e59;

}


/* Password input */

.passwordContainer {

    position: relative;

    width: 100%;

}


input {

    box-sizing: border-box;

    width: 100%;

    padding: 13px 50px 13px 13px;

    font-family: "Inter", sans-serif;

    font-size: 16px;

    border: 2px solid #ccc;

    border-radius: 9px;

    margin-top: 15px;

    outline: none;

}


input:focus {

    border-color: #4f46e5;

}


/* Eye button */

#eyeButton,
#finalEyeButton {

    position: absolute;

    right: 8px;

    top: 13px;

    margin: 0;

    padding: 8px;

    background: transparent;

    color: #555;

    font-size: 18px;

}


#eyeButton:hover,
#finalEyeButton:hover {

    background: transparent;

    color: #111;

    transform: none;

}


/* Final password */

.finalPasswordContainer {

    margin-bottom: 20px;

}


#finalPassword {

    background-color: #f5f5f5;

    cursor: default;

}


/* Score */

#score {

    color: #4f46e5;

    margin-top: 25px;

}


/* Requirements */

#result {

    text-align: left;

    margin-top: 20px;

    line-height: 1.8;

    font-weight: 500;

}


/* Celebration */

.confetti {

    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 1;

}


.confetti span {

    position: absolute;

    top: -80px;

    font-size: 35px;

    animation: fall 3s linear infinite;

}


/* Confetti positions */

.confetti span:nth-child(1) {

    left: 5%;

    animation-delay: 0s;

}


.confetti span:nth-child(2) {

    left: 15%;

    animation-delay: 0.5s;

}


.confetti span:nth-child(3) {

    left: 25%;

    animation-delay: 1s;

}


.confetti span:nth-child(4) {

    left: 35%;

    animation-delay: 1.5s;

}


.confetti span:nth-child(5) {

    left: 45%;

    animation-delay: 0.2s;

}


.confetti span:nth-child(6) {

    left: 55%;

    animation-delay: 0.8s;

}


.confetti span:nth-child(7) {

    left: 65%;

    animation-delay: 1.2s;

}


.confetti span:nth-child(8) {

    left: 75%;

    animation-delay: 0.4s;

}


.confetti span:nth-child(9) {

    left: 85%;

    animation-delay: 1.7s;

}


.confetti span:nth-child(10) {

    left: 95%;

    animation-delay: 0.7s;

}


.confetti span:nth-child(11) {

    left: 50%;

    animation-delay: 2s;

}


.confetti span:nth-child(12) {

    left: 30%;

    animation-delay: 2.3s;

}


/* Confetti animation */

@keyframes fall {

    0% {

        transform:
            translateY(0)
            rotate(0deg);

        opacity: 1;

    }

    100% {

        transform:
            translateY(110vh)
            rotate(360deg);

        opacity: 0;

    }

}