/* CSS Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    /* Primary Colors */
    --light-cyan: hsl(193, 38%, 86%);
    --neon-green: hsl(150, 100%, 66%);
    
    /* Neutral Colors */
    --dark-blue: hsl(218, 23%, 16%); 
    --dark-grayish-blue: hsl(217, 19%, 24%); 
    --grayish-blue: hsl(217, 19%, 38%); 

    --round-radius: 10px;
    --button-size: 66px;
}


/* HTML Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
    background-color: var(--dark-blue);
    box-sizing: border-box;
    color: var(--light-cyan);

    font-family: "Manrope", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16px;

    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

button {
    border: 0;
    cursor: pointer;
    outline: none;
}

blockquote {
    font-size: 1.75em;
    font-weight: 800;
}
    blockquote::before {
        content: '\201C'; /* &ldquo */
    }

    blockquote::after {
        content: '\201D'; /* &rdquo */
    }

h6 {
    margin: 0;
}


/** 
 * Prevent highlight of images
 * For mobile device, clicking/tapping on image twice on mobile will highlight. 
 */
img {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

main {
    /* Center-align the content */
    display: flex;
    place-items: center;
    place-content: center;

    width: 100%;
    height: 92%;
}






/* Components
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Default attribution. */
.attribution { 
    font-size: 11px; 
    text-align: center;
    line-height: 1.5;
    height: 8%;
 }
    .attribution a { 
        color: var(--neon-green)
    }

    
.container {
    margin: 0 auto;

    /* Define max & min width */
    max-width: 1440px;
    min-width: 375px;
}


/* Standard card */
.card {
    background-color: var(--dark-grayish-blue);
    border-radius: var(--round-radius);
    box-sizing: border-box;

    padding: 3em;
    position: relative;

    margin: 1em 3em 3em;
    max-width: 540px; 
    min-height: 330px;
    
    width: 100%;
    text-align: center;
}


.card-header {
    color: var(--neon-green);
    font-size: 0.9em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}
    

.card-quote {
    display: grid; /* Force it to be in center. */
    min-height: 200px;
}
    .card-quote > blockquote {
        line-height: 1.4em;
        margin: 1em auto 1.3em;
    }


/* Divider at the bottom of the card before the floating button. */
.card-divider {
    margin-bottom: 1.5em;
}
    .card-divider.desktop {
        display: block;
    }

    .card-divider.mobile {
        display: none;
    }


/* Card button (for generating advice) */
.card-button {
    background-color: var(--neon-green);
    border-radius: 50%; /* Round the button */

    /* To make the button float in between the border of the card .*/
    /* 33px == button-size / 2 */
    position: absolute;
    left: calc(50% - 33px);
    bottom: -33px;

    width: var(--button-size);
    height: var(--button-size);
}
    .card-button > svg {
        vertical-align: middle;
    }

    /* On hover, glow the button */
    .card-button:hover {
        box-shadow: 0 0 40px 1px var(--neon-green);
    }




    

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 570px) {
    
    .card-divider.desktop {
        display: none;
    }

    .card-divider.mobile {
        display: block;
    }
}


.animate-spin-dice {
    animation: spin-dice 1000ms ease infinite;
}


@keyframes spin-dice {
    50% {
      transform: translateX(-10px);  
    }

    100% {
        transform: rotateZ(90deg);
    }
}