@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.advice-container {
    width: 100%;
    height: 108rem;
    background-color: #202733;
    display: flex;
    justify-content: center;
    align-items: center;
}

.advice-container .advice-card {
    width: 54rem;
    border-radius: 1rem;
    background-color: #313a48;
    padding: 4.8rem;
    padding-bottom: 7.2rem;
    position: relative;
    font-family: "Manrope", sans-serif;
    text-align: center;
}

.advice-container .advice-card .advice-number,
.advice-container .advice-card .advice-number .advice-id {
    font-size: 1.3rem;
    color: #53ffaa;
}

.advice-container .advice-card .advice-text {
    margin-top: 2.4rem;
    font-size: 2.8rem;
    text-align: center;
    color: #cee3e9;
}

.advice-container .advice-card .pattern-divider {
    width: 44.4rem;
    margin-top: 4rem;
}

.advice-container .advice-card .box-dice {
    position: absolute;
    right: 23.8rem;
    bottom: -3.2rem;
    width: 6.4rem;
    height: 6.4rem;
    background-color: #53ffaa;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.advice-container .advice-card .box-dice:hover {
    transition: ease-in-out 0.5s;
    cursor: pointer;
    box-shadow: 0rem 0rem 3rem #53ffaa;
}

.advice-container .advice-card .box-dice .icon-dice {
    color: #202733;
}