:root{
    /* primary */
    --lightcyan: hsl(193, 38%, 86%);
    --neongreen: hsl(150, 100%, 66%);
    /* neutral */
    --greyishblue: hsl(217, 19%, 38%);
    --darkgreyishblue: hsl(217, 19%, 24%);
    --darkblue: hsl(218, 23%, 16%);
}
body{
    font-family: 'Manrope', sans-serif;
    background-color: var(--darkblue);
    margin: 0;
    box-sizing: border-box;
}
div.card-ctn{
    /* centers the card horizantally and vertically */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
}
div.card{
    background-color: var(--darkgreyishblue);
    width: 35vw;
    height: 50%;
    text-align: center;
    padding: 2em 2em;
    border-radius: 10px;
}
.head-ctn{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2em;
}
.head{
    color: var(--neongreen);
    text-align: center;
    letter-spacing: 5px;
    font-size: 12px;
    padding: .5em 2.2em;
}
div.advice-number{
    color: var(--neongreen);
    text-align: center;
    padding: .5em 2.2em;
    margin: .7rem;
    letter-spacing: 5px;
    font-size: 12px;
}
div.content{
    color: var(--lightcyan);
    font-size: 28px;
}
div.desktop-divider{
    margin-top: 2em;
}
div.mobile-divider{
    display: none;
    margin-top: 2em;
}

div.dice-ctn{
    /* better button styling */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 3.5em;
    cursor: pointer;
}
button.dice-border{
    height: 55px;
    width: 55px;
    border-radius: 50%;
    background-color: var(--neongreen);
    border: none;
}
.dice-border .dice{
    display: inline-block;
}
.dice-border .dice-text{
    display: none;
}
.dice-border:hover{
    opacity: 0.8;
}

/* design for phone screens */

@media screen and (max-width: 550px) {
    div.card{
        width: 80vw;
    }
    
    div.desktop-divider{
        display: none
    }
    div.mobile-divider{
        display: inline-block;
    }
    
}