@import "header.css";
@import "nav.css";
@import "main.css";
@import "footer.css";

@import "other/table.css";
@import "other/msgbox.css";
@import "other/theme-chooser.css";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
}

body {
    background: radial-gradient(circle at top, var(--page-bg-top), var(--page-bg-bottom) 60%);
    color: var(--text-main);
}

canvas {
    border-radius: 20px;
    border-color: var(--white);
    background-color: var(--white);
}

.icon {
  vertical-align: middle;
  width: 1em;
  height: 1em;
  display: inline-block;
  color: var(--white);
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.crown {
  -webkit-mask-image: url(../images/crown.png);
          mask-image: url(../images/crown.png);
}

.rules {
    -webkit-mask-image: url(../images/rules.png);
            mask-image: url(../images/rules.png);
}

.rank {
    -webkit-mask-image: url(../images/rank.png);
            mask-image: url(../images/rank.png);
}

.shop {
    -webkit-mask-image: url(../images/shop.png);
            mask-image: url(../images/shop.png);
}

.arrow-head {
    -webkit-mask-image: url(../images/arrowhead.png);
            mask-image: url(../images/arrowhead.png);
}

.link-color {
    color: var(--link);
}

.hidden {
    display: none;
}