/* BLACKJACK Style Sheet */
/* mobile first */
/* Reset */
body {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle, rgb(18, 133, 3) 75%, rgba(13,4,2,1) 97%);
    background-repeat: no-repeat;
    height: 100vh;
    color: #E5BC00;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}  
html {
    font-size: 62.5%; /* así se agrega un reset de REMs a nuestra WEB, lo que hace es pasarnos los 16px a 10px = 62.5% */
    /* Le ponemos un estilo general para que no nos afecte el tamñano de las cajas y se ajuste automáticamente */
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
/* Container Style */
.container {
    border: 0.6rem solid #B65800;
    width: 30rem;
    height: 54rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(0deg, rgba(13,4,2,1) 0%, rgba(182,9,0,1) 50%, rgba(13,4,2,1) 99%);
    box-shadow: 0 0.4rem 2rem black, 0.4rem 0 2rem black;
}

h1 {
    font-size: clamp(3.6rem, 15vw, 5.5rem);
    margin: 1rem 0;
    color: #ffd300;
    text-shadow: 0 .3rem .5rem orange, .2rem 0 .5rem red;
}

p {
    font-size: 1.8rem;
    margin: .8rem 0;
    text-shadow: 0 .3rem .5rem orange, .2rem 0 .5rem red;
    font-style: italic;
    font-variant: small-caps;
}

/* Cards Style */
.text-container {
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    width: 15rem;
}
.text-container p {
    flex-basis: calc(50% - 1rem);
}

.blue {
    color: #34c6cd;
    text-shadow: -0.4rem -.2rem .8rem #ff7400;
}

.orange {
    color: #ff7400;
    text-shadow: -0.4rem -.2rem .8rem #e6399b;
}

/* Buttons */
/* Button Container */
.btn-container {
    display: grid;
    grid-template-rows: repeat(4, 5rem);
    width: 27rem;
    justify-content: center;
    align-items: center;
    margin: .5rem 0;
    box-sizing: border-box;
    
}
/* Buttons General Style */
[class$="btn"] {
    width: 15rem;
    height: 4rem;
    font-size: 1.5rem;
    padding: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    text-transform: uppercase;
    color: #E5BC00;
    text-shadow: 0 .3rem .5rem orange, .2rem 0 .5rem red;
}
/* Start Button */
.start-btn {
    background: linear-gradient(315deg, rgba(13,4,2,1) 0%, rgba(4,129,158,1) 50%, rgba(13,4,2,1) 99%);
}
/* New Card Button */
.ncard-btn {
    background: linear-gradient(45deg, rgba(13,4,2,1) 0%, rgba(34,110,65,1) 50%, rgba(13,4,2,1) 99%);
}
/* Reset Button */
.reset-btn {
    background: linear-gradient(45deg, rgba(13,4,2,1) 0%, rgba(184,0,149,1) 50%, rgba(13,4,2,1) 99%);
}
/* Stand Button */
.stand-btn {
    background: linear-gradient(315deg, rgba(13,4,2,1) 0%, rgba(4,129,158,1) 50%, rgba(13,4,2,1) 97%);
    grid-row: 3 / 4;
}