:root{
    

    --Light-red: hsla(0, 100%, 67%);
    --Orangey-yellow: hsl(39, 100%, 56%);
    --Green-teal: hsl(166, 100%, 37%);
    --Cobalt-blue: hsl(234, 85%, 45%);
  
    --Light-slate-blue-background: hsl(252, 100%, 67%);
    --Light-royal-blue-background: hsl(241, 81%, 54%);
    --Violet-blue-circle: hsla(256, 72%, 46%, 1);
    --Persian-blue-circle: hsla(241, 72%, 46%, 0);
  
    --White: hsl(0, 0%, 100%);
    --Pale-blue: hsl(221, 100%, 96%);
    --Light-lavender: hsl(241, 100%, 89%);
    --Dark-gray-blue: hsl(224, 30%, 27%);

}



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


body{
   min-height: 100vh;
   display: flex; 
   align-items: center;
   justify-content: center;
   background-color: var(--Pale-blue) ;

}

/* cartão*/

.card{
    box-shadow: rgba(0, 0, 0, .24) opx 3px 8px;
    border-radius: 2rem;
    width: 650px;
    background-color: var(--White);

}
.card-container{
    display: flex;
    justify-content: space-between;
}

.result{
    width: 50%;
    padding: 1.5rem 2rem;
    border-radius: 2rem;
    background: linear-gradient(to bottom, var(--Light-slate-blue-background), var(--Light-royal-blue-background));
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.result .titulo{
    color: var(--Light-lavender);
    margin-bottom: 1rem;
}

.result .circulo{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--Violet-blue-circle), var(--Persian-blue-circle)) ;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.circulo h1{
    color: var(--White);
    font-size: 4rem;

}

.circulo p{
    color: var(--Light-lavender);

}

.result b{
    color: var(--White);
    font-size: 1.5rem;
    margin-top: 1rem;
}

.result .info{
    color: var(--Light-lavender);
    width: 200px;
}

.resumo{
    width: 50%;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;

}

.resumo .titulo{
    color: black;
    font-weight: 800;
}

.linhas{
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.linha{
    display: flex;
    border-radius: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 1rem .5rem;
}

.linha:nth-child(1){
    /* o .2 no final serve para diminuir a intencidade da cor na linha */
    background-color: hsl(0, 100%, 67%, .2) ;
}

.linha:nth-child(1) .distintivo b{
   
 color: var(--Light-red) ;
}

.linha:nth-child(2){
  
    background-color: hsl(39, 100%, 56%, .2) ;
}

.linha:nth-child(2) .distintivo b{
   
 color: var(--Orangey-yellow) ;
}

.linha:nth-child(3){
   
    background-color: hsl(166, 100%, 37%, .2) ;
}

.linha:nth-child(3) .distintivo b{
   
 color: var(--Green-teal) ;
}

.linha:nth-child(4){
    
    background-color: hsl(234, 85%, 45%, .2) ;
}

.linha:nth-child(4) .distintivo b{
   
 color: var(--Cobalt-blue) ;
}

.distintivo{
    display: flex;
    align-items: center;
    gap: .5rem;
}

.linha p{
    color: gray;
}

.linha p b{
    color: var(--Dark-gray-blue);
}

.btn{
    /* O margin-top fez o botão recuar para baixo*/
    margin-top: auto;
    padding: 1rem ;
    border: none;
    border-radius: 12rem;
    background: var(--Dark-gray-blue);
    cursor: pointer;
    font-size: 1rem;
    color: white;

}
.btn:hover{
    background: linear-gradient(to bottom, var(--Light-slate-blue-background), var(--Light-royal-blue-background)) ;
}

@media screen and (max-width:650px){
    body{
        align-items: flex-start;
        background-color: white;
    }

    .card{
       box-shadow: none; 
    }

    .card-container{
        flex-direction: column;
    }

    .result{
        border-radius: 0 0 1rem 1rem;
        width: 100%;
    }

    .result .info{
        width: 250px;
    }

    .resumo{
       width: 100% ; 
    }
}