html, body {
    --bg-color: #f9cd26;
    background-color: var(--bg-color);
    height: 100vh;
    text-align: center;
}

img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}


p a {
    position: relative;
    text-decoration-skip: auto;
    text-decoration-skip-ink: auto;

    color: #666;

    --underline-height: 2px;
    --underline-offset: 4px;
    --underline-origin: 50%;
    padding-bottom: var(--underline-height);
    background: linear-gradient(0deg, #630e2d, #630e2d var(--underline-height), var(--bg-color) var(--underline-height), var(--bg-color));

    transition: 0.4s background, 0.6s color;
    background-repeat: no-repeat;
    background-size: 0 100%;
    background-attachment: local;
    background-position: var(--underline-origin) 50%;

    text-underline-offset: var(--underline-offset);
}

p a:hover {
    background-size: 100% 100%;
    background-position: center;
    text-decoration: none;
    color: #000;
}