* {
    box-sizing: border-box;
    font-family: inherit;
    color: inherit;
}

html {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
}

img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

body {
    background-color: hsl(218, 23%, 16%);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1em;
}

.advice-container,
.generate-button {
    box-shadow:
        0.7px 0.8px 1.2px -14px rgba(0, 0, 0, 0.011),
        1.7px 1.9px 2.9px -14px rgba(0, 0, 0, 0.016),
        3.3px 3.5px 5.5px -14px rgba(0, 0, 0, 0.02),
        5.8px 6.3px 9.8px -14px rgba(0, 0, 0, 0.024),
        10.9px 11.7px 18.4px -14px rgba(0, 0, 0, 0.029),
        26px 28px 44px -14px rgba(0, 0, 0, 0.04);
}

.advice-container {
    background-color: hsl(217, 19%, 24%);
    color: hsl(193, 38%, 86%);
    text-align: center;
    padding: 2em 1.5em 3.5em;
    border-radius: 12px;
    position: relative;
    max-width: 550px;
}

.advice-id {
    color: hsl(150, 100%, 66%);
    text-transform: uppercase;
    letter-spacing: 0.55ch;
    font-size: 0.65rem;
}

.advice-text {
    font-size: 1.5rem;
    margin: 1.05em 0 1.5em;
}

.advice-text::before {
    content: "\201C";
}

.advice-text::after {
    content: "\201D";
}

.generate-button {
    border: none;
    border-radius: 50%;
    padding: 1.5em;
    display: flex;
    margin: 0 auto;
    background-color: hsl(150, 100%, 66%);
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    transition-duration: 100ms;
}

.generate-button:active,
.generate-button:hover {
    filter: drop-shadow(0 0 0.75rem hsl(150, 100%, 66%));
}

.generate-button:active {
    transform: translate(-50%, 50%) scale(0.95);
}


@media (min-width: 500px) {
    html {
        font-size: 115%;
    }

    .advice-container {
        padding: 2em 2.5em 3.5em;
    }
}



/* 
 * Utility class to hide content visually while keeping it screen reader-accessible.
 * Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html 
 */

.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}