/* Reset CSS */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --container: 65%;
    --primaria: #20b2aa;
    --primaria-hover: #104745;
    --branco:#fff;
    --body-bg:#ecdede;
    --linecolor:#89a1a0;
    --nunito:'Nunito';
    --racingone:'Racing Sans One';
}

.container{
    display: flex;
    justify-content: center;
    margin:  4.8rem auto ;
    width: var(--container);
    background-color: var(--branco);
}

body{
    overflow-y: hidden;
    background-color: var(--body-bg);
}

body .container{

    flex-direction: column;
   
}

form{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family:var(--nunito)
   
}

.inner-container{
        display: flex;
        flex-direction: column;
        text-align: left;
}

.button-container{
    width: var(--container);
    margin: 0 auto;
    align-items: center;
    display: flex;

    
  
}

button i:hover{
    color: var(--primaria-hover);
}

.radius{
    border-radius: 10px 10px 160px 10px ;
    padding: 30px;
}


.organizer-button{
    display: block;
    width: 100%;
    
}

button{
    background: none;
    border: 0px;
    font-size: 80px;
    color: var(--primaria);
    cursor: pointer;
    align-items: flex-end;
    text-align: right;


}

.line{
    height: 1px;
    flex:1;
    background-color: var() ;
}

label{
    font-size: 18px;
}

.years,.months,.days{

        font-size: 60px;
        font-family: var(--racingone)
        
        

       
        
}

h2 i:hover{ color: var(--primaria-hover);
            cursor: pointer;

}

.result .container{
           Display: flex;
            justify-content: center;
            margin:  20px auto ;
            width: var(--container);
            background-color: var(--branco);
                     
}


input{

    padding: 15px;
    border: solid 1px #c0c0c0;
    border-radius: 4px;
    font-size: 20px;
    width: 80px;
    font-family:var(--nunito);
    font-weight: bold;
}

h2 i {color: var(--primaria);}


.hide{

    visibility: hidden;
}

.show{

    visibility:visible
}

.form-organizer{
    display: flex;
    gap:20px;
    margin: 0 auto;
    width: 65%;
    
}

input[type="number"] {
    width: 120px;
    height: 50px;
}

input[type="number"]:focus{
background-color: var(--primaria);
color: var(--branco);

}

/* Responsive */
@media (max-width: 1024px){

    .form-organizer{
    flex-direction: column;

    
}



form{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: var(--nunito);
   
}

.form-organizer{
    width: 100%;
}

.inner-container{
    align-items: center;
    width: 100%;
}


input[type="number"] {
    width: clamp(200px, 50vw, 70%);
}



.button-container{
    width: var(--container);
    margin: 0 auto;
    align-items: center;
    display: flex;
    flex-direction: column;

    
  
}

.years,.months,.days{

        font-size: clamp(1.2rem, 4vw, 2.8125rem);
        font-family: var(--racingone);
        

       
        
}

button{
    font-size: clamp(30px, 10vw, 80px);



}


}