.button
{
background-color: #3399ff;
border: none;
border-radius: 12px;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-weight: bold;
letter-spacing: 1px;
line-height: 3;
margin-top: 12px;
min-width: 180px;
outline-color: transparent;
outline-offset: 4px;
outline-style: solid;
outline-width: 4px;
overflow: hidden;
padding: 0 32px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
transition: background-color 300ms, outline-color 300ms;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
}

.button:active
{
background-color: #0066cc;
}

.button:focus
{
outline-color: #3399ff;
}

.button:focus:active
{
outline-color: #0066cc;
}

.button:focus:hover
{
outline-color: #0066cc;
}

.button:hover
{
background-color: #0066cc;
}

.logo
{
display: inline-block;
}

.logo__link
{
--shanyraq-state: running;
border-style: none;
display: block;
font-size: 0;
height: 50px;
width: 176px;
}

.message
{
display: table-cell;
text-align: center;
vertical-align: middle;
}

[data-theme="dark"]
{
color-scheme: dark;
}

[data-theme="dark"] body
{
background-color: #121212;
color: #cccccc;
}

[data-theme="dark"] svg
{
fill: #999999;
}

*
{
margin: 0;
outline: none;
padding: 0;
}

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

body
{
background-color: #cccccc;
color: #333333;
display: table;
font-size: 1rem;
height: 100%;
line-height: 1.6;
overflow: hidden;
-webkit-text-size-adjust: none;
text-size-adjust: none;
width: 100%;
}

body * + *
{
margin-top: 12px;
}

html
{
box-sizing: border-box;
color-scheme: light dark;
font-family: system-ui, sans-serif, Arial;
height: 100%;
min-height: 100%;
overflow: hidden;
}

p
{
-webkit-user-select: none;
user-select: none;
}

svg
{
fill: #666666;
}


@media (prefers-color-scheme: dark)
{
[data-theme="system"]
{
color-scheme: dark;
}

[data-theme="system"] body
{
background-color: #121212;
color: #cccccc;
}

[data-theme="system"] svg
{
fill: #999999;
}
}