body {
    
    margin: 0;
    line-height: inherit;
    font-family: 'Hanken Grotesk', sans-serif;
    font-family: 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: hsl(193, 38%, 86%);
 background-color:   hsl(218, 23%, 16%) ;


}

main{

    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    
    height: 100vh;
   

}

.card{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 2.5rem;
    max-width: 500px;
    border-radius: 0.5rem;

    color:  hsl(193, 38%, 86%);
    background-color:  hsl(217, 19%, 24%);
  text-align: center;

}


header{

    padding-top: 0.25rem;
    padding-bottom: -0.75rem;
    width: 100%;
}



h1{
    font-size: 18px;
    color: hsl(150, 100%, 66%);
    text-align: center;
    letter-spacing: 3px;
    font-weight: 500;
    }


blockquote{
    width: 100%;
    margin-bottom: 2.5rem;
    margin: 0;

} 

.LQ{

    text-align: left;
    height: 0.75rem;
    font-size: 1.875rem;
   

    line-height: 1.25;

}


.RQ{
    text-align: right;
    height: 0.75rem;
    font-size: 1.875rem;


    line-height: 1.25;
    margin-top: -0.75rem;
    }


 p{
    text-align: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;


} 

.buttonContainer{
    
    overflow: hidden;

    margin-bottom: -4rem;
    margin-left: auto;
  margin-right: auto;
  margin-top: 26px;
  border-radius: 9999px;
  
} 



.buttonContainer:active{

    box-shadow: 0 0 50px hsl(150, 100%, 66%);

    width: 4rem;
  height: 4rem;

}




.buttonContainer:hover{

    box-shadow: 0 0 50px hsl(150, 100%, 66%);
    width: 4rem;
  height: 4rem;

}



button{
    text-transform: none;
    max-width: 100%;
    height: auto;
/* display: block;
vertical-align: middle; */
background-color: hsl(150, 100%, 66%);
border-radius: 9999px;
width: 4rem;
height: 4rem;
border: 0;
} 


button:hover{

    box-shadow: 0 0 50px white;

} 

.divider{

    margin-left: auto;
    margin-right: auto;

}

.mobile{

    display: none;
}



@media only screen and (max-width:475px) {
  
    .desktop{
        display: none;
       
    }
  .mobile{

display: block;

  }

  .card{

    max-width: 300px;
  }
 

}
       


       

       

.attribution {
    
    font-size: 11px;
    
    text-align: center;
margin-top:200px;
}
.attribution a { color: hsl(228, 45%, 44%); }