@import 'https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@500&display=swap';

:root {
    --bg-color: #000;
    --txt-color: #fff;
}

html {
    box-sizing: border-box;
    height: 100vh;
    font-size: 16px;
}

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    height: -webkit-fill-available;
}

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
    text-align: center;
    font-family: 'Kiwi Maru', serif;
    color: var(--txt-color);
    animation:
        huerotate 60s linear calc(var(--rnd-delay, 0) * -60s) infinite,
        bgcolor 60s linear calc(var(--rnd-delay, 0) * -60s) infinite;
}

@keyframes huerotate {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

@keyframes bgcolor {
    0% {
        background-color: #932674;
    }
    20% {
        background-color: #bf1e56;
    }
    40% {
        background-color: #deb604;
    }
    60% {
        background-color: #23ac0e;
    }
    80% {
        background-color: #007fb1;
    }
    100% {
        background-color: #932674;
    }
}

img {
    width: 75%;
    max-width: 400px;
    height: auto;
    border-radius: 50%;
    vertical-align: top;
}

p {
    flex-shrink: 0;
    width: 90%;
    max-width: 450px;
    min-height: 3.5rem;
    margin: 2rem 0;
    border: 2px solid var(--txt-color);
    border-radius: 5px;
    padding: 1rem 0.5rem;
    line-height: 1;
    font-size: 1.5rem;
}

p .dud {
    opacity: 0.55;
}

button {
    visibility: hidden;
    flex-shrink: 0;
    background-color: var(--txt-color);
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M496%2048V192c0%2017.69-14.31%2032-32%2032H320c-17.69%200-32-14.31-32-32s14.31-32%2032-32h63.39c-29.97-39.7-77.25-63.78-127.6-63.78C167.7%2096.22%2096%20167.9%2096%20256s71.69%20159.8%20159.8%20159.8c34.88%200%2068.03-11.03%2095.88-31.94c14.22-10.53%2034.22-7.75%2044.81%206.375c10.59%2014.16%207.75%2034.22-6.375%2044.81c-39.03%2029.28-85.36%2044.86-134.2%2044.86C132.5%20479.9%2032%20379.4%2032%20256s100.5-223.9%20223.9-223.9c69.15%200%20134%2032.47%20176.1%2086.12V48c0-17.69%2014.31-32%2032-32S496%2030.31%20496%2048z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    border: none;
    cursor: pointer;
    outline: none;
    appearance: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s linear, transform 0.3s ease-out;
}

button.show {
    visibility: visible;
    opacity: 1;
}

@media (hover: hover) {
    button:hover {
        transform: rotate(40deg);
    }
}

small {
    flex-shrink: 0;
    margin-top: 1rem;
    font-size: 1.2rem;
}