cssexterno.css

/*************/
/*Limpar formatações padrão*/
* {
	margin: 0;
    padding: 0;
}

/* Main toda a parte do site */

body {
    background-image: url(./numeros..jpg);
    object-fit: cover;
    background-size: cover;
}

main {
    display: flex;
    flex-direction:column;
    align-items: center;
    box-shadow: 0px 5px 8px -2px rgb(114, 107, 107);
    border: 1px solid  #887373;
    border-radius: 4px;
    background-color: #fff;
    margin: 10px;
    margin-top: 50px;
    font-family: "rajdhani";
    background-color: rgba(204, 173, 230, 0.685);
}
/* Butão verificar */
button {
    display: grid;
    background-color: #eee;
    border: 1px solid #ddd;
    color: #333;
    font-size: 1em;
    padding: 7px 15px;
    margin: auto;
    cursor: hand;
    cursor: pointer;
}

h1 {
    margin-top: 20px;
}

#area-assunto{
    margin-bottom: 20px;
}

#numero {
    width: 60px;
    height: 20px;
}

/* comando para tirar o contador do input number */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

#final {
    margin-top: 10px;
    display: flex;
    margin-bottom: 20px;

}

#resultado {
    margin-left: 10px;
}

footer {
    background-color: rgba(204, 173, 230, 0.445);
    display: flex;
    width:200px ;
    margin-left: 600px;
    margin-top: 20px;
    font-size: 15px;
}

a{
    text-decoration: none;
    color: black;
    margin-left: 5px;
}


@media screen and (max-width:780px) {
    body {
        background-repeat: no-repeat;
        background-size: cover;
        box-sizing: border-box;
        height: 1000px;
        overflow: hidden;
    }

    main {
        display: flex;
        flex-direction: column;
        width: 300px;
        align-items: center;
        margin-left: 40px;
        justify-content: center;
    }
    footer {

        background-color: rgb(58, 48, 66);
        margin: auto;
        width: 210px;
    }   
    a {
        text-decoration: none;
        color: black;
    }
}