canvas {
    cursor: default;
    outline: none;
}

body {
    background-color: #222222;
}

p {
    text-align: center;
    color: #eeeeee;
}

a {
    text-align: center;
    color: #bbbbff;
}

.superdev {
    color: rgb(37,37,37);
    text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
    font-size: 50pt;
    display: block;
    position: relative;
    text-decoration: none;
    background-color: rgb(83,87,93);
    box-shadow: 0px 3px 0px 0px rgb(34,34,34),
                0px 7px 10px 0px rgb(17,17,17),
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
                inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
    width: 70px;
    height: 70px;
    border: 0;
    border-radius: 35px;
    text-align: center;
    line-height: 68px;
}

.superdev:active {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
                0px 3px 7px 0px rgb(17,17,17),
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
                inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
    top: 3px;
    color: #fff;
    text-shadow: 0px 0px 3px rgb(250,250,250);
}

.superdev:hover {
    background-color: rgb(100,100,100);
}

[data-component*="dialog"] * {
	box-sizing: border-box;
	outline-color: var(--dlg-outline-c, hsl(218, 79.19%, 35%))
}

:where([data-component*="dialog"]) {
	--dlg-gap: 1em;
	background: var(--dlg-bg, #fff);
	border: var(--dlg-b, 0);
	border-radius: var(--dlg-bdrs, 0.25em);
	box-shadow: var(--dlg-bxsh, 0px 25px 50px -12px rgba(0, 0, 0, 0.25));
	font-family: var(--dlg-ff, ui-sansserif, system-ui, sans-serif);
	min-inline-size: var(--dlg-mis, auto);
	padding: var(--dlg-p, var(--dlg-gap));
	width: var(--dlg-w, fit-content);
	user-select: none
}

:where([data-component="no-dialog"]:not([hidden])) {
	display: block;
	inset-block-start: var(--dlg-gap);
	inset-inline-start: 50%;
	position: fixed;
	transform: translateX(-50%);
}

:where([data-component*="dialog"] legend.empty) {
	display: none;
}

:where([data-component*="dialog"] menu) {
	gap: calc(var(--dlg-gap)/2);
	justify-content: var(--dlg-menu-jc, flex-end);
	margin: 0;
	padding: 0;
}

:where([data-component*="dialog"] menu button) {
	background-color: var(--dlg-button-bgc);
	border: 0;
	border-radius: var(--dlg-bdrs, 0.25em);
	color: var(--dlg-button-c);
	font-size: var(--dlg-button-fz, 0.8em);
	padding: var(--dlg-button-p, 0.65em 1.5em);
	height: 35px;
}

:where([data-component*="dialog"] [data-ref="accept"]) {
	--dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%));
	--dlg-button-c: var(--dlg-accept-c, #fff);
	float: right;
}

:where([data-component*="dialog"] [data-ref="export"]) {
	--dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%));
	--dlg-button-c: var(--dlg-accept-c, #fff);
	background: linear-gradient( to bottom, #bcc6cc, #eee, #bcc6cc);
	border: 1px solid #7A8A99;
}

:where([data-component*="dialog"] [data-ref="export"] span) {
	background: url(icons/export.png) no-repeat;
    float: left;
    width: 16px;
    height: 16px;
}

:where([data-component*="dialog"] [data-ref="import"]) {
	--dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%));
	--dlg-button-c: var(--dlg-accept-c, #fff);
	background: linear-gradient( to bottom, #bcc6cc, #eee, #bcc6cc);
	border: 1px solid #7A8A99;
}

:where([data-component*="dialog"] [data-ref="import"] span) {
	background: url(icons/import.png) no-repeat;
    float: left;
    width: 16px;
    height: 16px;
}

:where([data-component*="dialog"] [data-ref="clear"]) {
	--dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%));
	--dlg-button-c: var(--dlg-accept-c, #fff);
	background: linear-gradient( to bottom, #bcc6cc, #eee, #bcc6cc);
	border: 1px solid #7A8A99;
}

:where([data-component*="dialog"] [data-ref="clear"] span) {
	background: url(icons/clear.png) no-repeat;
    float: left;
    width: 16px;
    height: 16px;
}

:where([data-component*="dialog"] [data-ref="reset"]) {
	--dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%));
	--dlg-button-c: var(--dlg-accept-c, #fff);
    background: linear-gradient( to bottom, #bcc6cc, #eee, #bcc6cc);
	border: 1px solid #7A8A99;
}

:where([data-component*="dialog"] [data-ref="reset"] span) {
	background: url(icons/reset.png) no-repeat;
    float: left;
    width: 16px;
    height: 16px;
}

:where([data-component*="dialog"] [data-ref="cancel"]) {
	--dlg-button-bgc: var(--dlg-cancel-bgc, transparent);
	--dlg-button-c: var(--dlg-cancel-c, inherit);
	float: right;
}

:where([data-component*="dialog"] [data-ref="fieldset"]) {
	border: 0;
	margin: unset;
	padding: unset;
}

:where([data-component*="dialog"] [data-ref="message"]) {
	font-size: var(--dlg-message-fz, 1.25em);
	margin-block-end: var(--dlg-gap);
}

:where([data-component*="dialog"] [data-ref="template"]:not(:empty)) {
	margin-block-end: var(--dlg-gap);
	width: 100%;
}

/* hack for Firefox */
@-moz-document url-prefix() { 
    [data-component="no-dialog"]:not([hidden]) {
        inset-inline-start: 0;
         transform: none;
    }
}

/* added to `body` when browser do not support `<dialog>` */
.dialog-open {
	background-color: rgba(0, 0, 0, .1);
	overflow: hidden;
}