/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* BODY */

body {
    background-image: url("../img/img.jpg");
    /* caminho da imagem */
    background-size: cover;
    /* faz a imagem cobrir toda a tela */
    background-position: center;
    /* centraliza a imagem */
    background-repeat: no-repeat;
    /* não repete a imagem */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    overflow: hidden;

}

/* FUNDO PARTICULAS */

#particles-js {

    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;

}

/* CONTAINER */

.container {

    width: 360px;
    max-width: 90%;
    padding: 40px;
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);

    text-align: center;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);

}

/* TITULO */

h1 {

    margin-bottom: 25px;
    font-size: 28px;
   

}

/* INPUT BOX */

.input-box {

    position: relative;
    margin: 12px 0;

}

/* INPUT */

.input-box input {

    width: 100%;
    padding: 12px 45px;
    border-radius: 25px;
    border: none;
    outline: none;

}

/* ICONE DO INPUT */

.input-box i {

    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #3a036d;

}

/* OLHO SENHA */

.input-box span {

    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;

}

/* SELECT */

select {

    width: 100%;
    padding: 12px;
    border-radius: 25px;
    border: none;
    outline: none;
    margin-top: 10px;
    cursor: pointer;

}

/* BOTÃO */

button {

    width: 100%;
    padding: 12px;

    border: none;
    border-radius: 25px;

    background: rgb(110, 3, 160);
    color: #fcf9f9;

    font-weight: bold;

    cursor: pointer;

    margin-top: 15px;

    transition: 0.3s;

}

button:hover {

    transform: scale(1.05);

}

/* LINKS */

a {

    color: white;
    text-decoration: none;

}



a:hover {

    text-decoration: underline;

}

/* STATUS */

.status {

    margin: 15px 0;
    font-size: 18px;

}

/* PERFIL */

.perfil {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

}

/* FOTO PERFIL */

.perfil img {

    width: 120px;
    height: 120px;

    border-radius: 50%;

    border: 3px solid white;

    object-fit: cover;

    margin-bottom: 10px;

    transition: 0.3s;

}

.perfil img:hover {

    transform: scale(1.05);

}

/* NOME USUARIO */

.perfil h2 {

    font-size: 22px;
    margin: 10px 0;

}

/* RESPONSIVO TABLET */

@media (max-width:768px) {

    .container {

        width: 90%;
        padding: 35px;

    }

    h1 {

        font-size: 24px;

    }

    .perfil img {

        width: 100px;
        height: 100px;

    }

    .perfil h2 {

        font-size: 20px;

    }

}

/* RESPONSIVO CELULAR */

@media (max-width:480px) {

    .container {

        width: 92%;
        padding: 30px;

    }

    h1 {

        font-size: 22px;

    }

    .input-box input {

        padding: 12px 40px;

    }

    .perfil img {

        width: 90px;
        height: 90px;

    }

    .perfil h2 {

        font-size: 18px;

    }

    button {

        padding: 12px;

    }

}