:root{
    --primary-color:hsl(193, 38%, 86%);
    --primary-color1: hsl(150, 100%, 66%);
    --blue-600: hsl(217, 19%, 38%);
    --blue-900:hsl(217, 19%, 24%);
    --blue-950:hsl(218, 23%, 16%);
}

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: var(--blue-950);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Manrope", sans-serif;
}

.card{
    background-color: var(--blue-600);
    padding: 20px 10px;
    border-radius: 5px;
    text-align: center;
    position: relative;
    max-width: 30rem;
    width: 90%;
    box-shadow: 1px 1px 1px var(--blue-600);
}
.advice-id{
    color: var(--primary-color1);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    font-size: 0.65rem
}
.advice{
    color: var(--primary-color);
    max-width: 70%;
    font-size: 1.3rem;
    margin: 10px auto;
    font-weight: 700;
}
.p-mobile{
    display: none;
}
.divider{
    margin: 20px auto;
    display: block;
    width: 90%;
    max-width: 300px;
}

button{
    border-radius: 50%;
    padding: 8px;
    background-color: var(--primary-color1);
    border: none;
    cursor: pointer;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
button >img{
    width: 60%;
}