*
{
    box-sizing : border-box;
}

html, body
{
    height : 100vh;
    width  : 100vw;
    margin : 0;
}

body
{
    padding    : 20px;
    background : #020d61;
    background : linear-gradient(6deg, rgba(2, 13, 97, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 245, 153, 1) 100%);
}

button.sound-hint
{
    position       : fixed;
    left           : 50%;
    bottom         : 6vh;
    transform      : translateX(-50%);
    display        : flex;
    align-items    : center;
    gap            : 8px;
    padding        : 12px 24px;
    border         : 2px solid rgba(2, 13, 97, 1);
    border-radius  : 999px;
    background     : rgba(255, 245, 153, 1);
    color          : rgba(2, 13, 97, 1);
    font           : 600 1rem/1 system-ui, sans-serif;
    cursor         : pointer;
    box-shadow     : 0 4px 12px rgba(0, 0, 0, .25);
}

button.sound-hint[hidden]
{
    display : none;
}

button.sound-hint:hover
{
    background : #fff;
}

div.slogan
{
    background-image  : url('/assets/images/slogan.svg');
    background-size   : contain;
    background-repeat : no-repeat;
    width             : 60%;
    aspect-ratio      : 2.841;
    position          : absolute;
    left              : 50%;
    top               : 50%;
    transform         : translate(-50%, -50%);
}