*{
    box-sizing: border-box;
    margin:0
}
body{
/* https://uigradients.com */
background: #FFA17F;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #00223E, #FFA17F);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #00223E, #FFA17F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
margin: 0;
padding: 1px;


}

main{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    font-family: "Story Script", sans-serif; 
     /* font-family: "Henny Penny", system-ui; */
   

}

.empty-card{
 width:150px;
 height:calc(150px *7/5);
 border: 1px solid black;
 border-radius: 5px;
 margin: 2px 0px;
}

h2{
    text-align: center;
    color: aliceblue;
    margin: 0px;
    /* font-size: 1rem;
   */
}


img{
    /* 5to7 */
 width:150px;
 height:calc(150px * 7/5);
 margin: 2px 0px;
 
}


#new-deck{
    align-self: center;
}
#draw-cards{
align-self: stretch;
 
}
#cards{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
/* align-self: center; */

}

button{
    padding: 8px 20px;
    background-color: #FFA17F;
    font-weight: 400;
    font-size: 1.25rem;
    border-radius: 8px;
    /* border: none; */
    cursor: pointer;
    font-family: "Story Script", system-ui;

}
button:hover{
    background-color: #e96130;
}
#count{
    margin: 0px;
    text-align: right;
    color: aliceblue;
   margin-right: 30px;
   font-size: 1rem;
   text-shadow: 0px 2px 2px #00223E;
}
.score{
    margin: 0px;
    text-align: center;
    color: aliceblue;
    font-size: 1rem;
    font-family: cursive;
    margin-bottom: 2px;

}
button:disabled{
    cursor: not-allowed;

}