body {
    background-color: rgb(1 101 179 / 60%);
    width: 100%;
    height: 100%;
    margin: 0; /* Remover margens padrão */
}

#form {
    background-color: white;
    width: 30%;
    margin: auto; /* Centralizar horizontalmente */
    margin-top: 10%; /* Adicionar margem superior para centralizar verticalmente */
    border-radius: 30px 10px;
    -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
    -moz-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
    box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
}

/* Media queries para ajustar o tamanho do formulário conforme necessário */
@media (min-width: 1280px) {
    #form {
        width: 35%!important;
    }
}

@media (max-width: 1279px) {
    #form {
        width: 53%!important;
    }
}

@media (max-width: 1024px) {
    #form {
        width: 53%!important;
    }
}

@media (max-width: 540px) {
    #form {
        width: 75%!important;
    }
}

@media (max-width: 375px) {
    #form {
        width: 85%;
    }
}



img {
    width: 40%;
}

label {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 20px;
    margin-left: 10%;
}

#codigo {
    width: 50%;
    margin-left: 25%;
    border-color: rgba(50, 50, 50, 0.77);
}

.css-selector {
    background: linear-gradient(119deg, #000000, #00b1e6, #f9f9f9);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite;
    width: 30%;
    color: black;
}

@-webkit-keyframes AnimationName {
    0% {
        background-position: 41% 0%
    }
    50% {
        background-position: 60% 100%
    }
    100% {
        background-position: 41% 0%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 41% 0%
    }
    50% {
        background-position: 60% 100%
    }
    100% {
        background-position: 41% 0%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 41% 0%
    }
    50% {
        background-position: 60% 100%
    }
    100% {
        background-position: 41% 0%
    }
}
@media(min-width:1280px){
    #form {
        background-color: white;
        width: 35%!important;
        margin-left: 30%!important;
        margin-top: 10%;
        border-radius: 30px 10px;
        -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
        -moz-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
        box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
    }
    .css-selector {
        background: linear-gradient(119deg, #000000, #00b1e6, #f9f9f9);
        background-size: 600% 600%;
        -webkit-animation: AnimationName 9s ease infinite;
        -moz-animation: AnimationName 9s ease infinite;
        animation: AnimationName 9s ease infinite;
        width: 20%;
        color: black;
    } 
}
@media(max-width:1279px){
    #form {
        background-color: white;
        width: 53%!important;
        margin-left: 25%!important;
        margin-top: 20%;
        border-radius: 30px 10px;
        -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
        -moz-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
        box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
    }
    .css-selector {
        background: linear-gradient(119deg, #000000, #00b1e6, #f9f9f9);
        background-size: 600% 600%;
        -webkit-animation: AnimationName 9s ease infinite;
        -moz-animation: AnimationName 9s ease infinite;
        animation: AnimationName 9s ease infinite;
        width: 35%;
        color: black;
    } 
}

@media(max-width:1024px){
    #form {
        background-color: white;
        width: 53%!important;
        margin-left: 25%!important;
        margin-top: 20%;
        border-radius: 30px 10px;
        -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
        -moz-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
        box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
    }
    .css-selector {
        background: linear-gradient(119deg, #000000, #00b1e6, #f9f9f9);
        background-size: 600% 600%;
        -webkit-animation: AnimationName 9s ease infinite;
        -moz-animation: AnimationName 9s ease infinite;
        animation: AnimationName 9s ease infinite;
        width: 35%;
        color: black;
    } 
}

@media(max-width:540px){
    #form {
        background-color: white;
        width: 75%!important;
        margin-left: 10%!important;
        margin-top: 15%;
        border-radius: 30px 10px;
        -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
        -moz-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
        box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
    }
    .css-selector {
        background: linear-gradient(119deg, #000000, #00b1e6, #f9f9f9);
        background-size: 600% 600%;
        -webkit-animation: AnimationName 9s ease infinite;
        -moz-animation: AnimationName 9s ease infinite;
        animation: AnimationName 9s ease infinite;
        width: 35%;
        color: black;
    }
}



@media (max-width:375px){
    #form {
        background-color: white;
        width: 85%;
        margin-left: 5%;
        margin-top: 20%;
        border-radius: 30px 10px;
        -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
        -moz-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
        box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77)!important;
    }
    .css-selector {
        background: linear-gradient(119deg, #000000, #00b1e6, #f9f9f9);
        background-size: 600% 600%;
        -webkit-animation: AnimationName 9s ease infinite;
        -moz-animation: AnimationName 9s ease infinite;
        animation: AnimationName 9s ease infinite;
        width: 35%;
        color: black;
    }
}