body {
    
    background-color: #CCCCCC;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif

}

input {
    
    display: flex;

    justify-content: center;

    align-items: center;
    
    margin-left: auto;

    margin-right: auto;

    width: 400px;

    padding: 0.4rem;

    border-radius: 5px;

    box-shadow: 0 0 0 0;

    outline: 0;

    border: 0 none;

    margin-top: 1.3rem;

    font-size: 1rem;
    
}

.negrito {
    font-weight: bold;
    font-size: 0.9rem;
}

button {
    padding: 0.7rem;

    background-color: #1E0C21;
    
    color: white;

    margin-top: 0.6rem;

    width: 60%;

    margin-left: auto;

    margin-right: auto;

    cursor: pointer;

    border-radius: 5px;

    outline: 0;

    border: 0 none;

    font-size: 0.9rem;
}

.container {
   
    width: 695px;
    
    border-radius: 0.5rem;

    background-image: linear-gradient(
        to bottom, #1E0C21, #641F70
    );  

    align-items: center;
    
    display: flex;

    flex-direction: column;

    justify-content: center;

    margin: auto;
    margin-top: 150px ;
}

.display-flex {

    display: flex;

    flex-direction: column;

    background-image: linear-gradient(
        to bottom, #641F70, #1E0C21
    );

    width: 90%;
    border-radius: 10px;

    margin-bottom: 2.1rem;
}

.header {
    
    color: #FECD23;

    font-weight:550;
    font-size: 1.5rem;

    padding: 0.9rem;

    text-align: center;

}

.header-subtitle {
    
    color: white;

    font-size: 1rem;
    font-weight: 200;  

    text-align: center;

    margin-bottom: 1.8rem;
}

.subtitle-1 {
   
    padding: 0.6rem;
}

.subtitle-3 {
   
    padding: 0.6rem;
}

.vote {

    color: white;

    text-align: center;
    
    font-size: 1.5rem;

    justify-content: center;

    padding: 0.9rem;
;
}

.final {

    display: flex;

    text-align: center;

    color: white;

    width: 100%;

    justify-content: center;
    align-items: center;
}

.sports, .simulation, .estrategy {

    padding: 0.1rem;

    background-image: linear-gradient(to bottom, #3D5EEF, #72CDFE);

    display: flex;

    flex-direction: column;

    font-size: 1.5rem;

    margin-top: 0.3rem;
}

.enquete-1, .enquete-2, .enquete-3 {
    
    width: 150px;

    border-radius: 5px;

    padding: 0.6rem;

    background-image: linear-gradient(to bottom, #2637DB, #342988);

    margin: auto;
    margin-top: 0.6rem;
    margin-bottom: 1.2rem;
}

@media screen and (max-width: 695px){
        html{
            font-size: 14px;
          }
        
        .final {
            flex-direction: column;
        }
        .sports, .simulation, .estrategy, .enquete-1, .enquete-2, .enquete-3 {
            
            margin: auto;
            margin-bottom: 13.5px;
            margin-top: 10px;
            padding: 10px
        }
        .container {
            width:80%;
        }
        input {
            width: 90%;
            padding: 10px;
        }
        button {
            width: 70%;
            padding: 13px;
            font-size: 15px;
        }

        
}