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

@import "other/table.css";
@import "other/msgbox.css";

/*:root {
  --bg-dark: #0b1020;
  --bg-panel: rgba(15, 25, 60, 0.75);
  --accent: #4ea1ff;
  --accent-soft: rgba(78,161,255,0.25);
  --text-main: #e6ecff;
  --text-soft: #aab4e0;
  --radus: 14px;
}*/

:root {
    --bg-dark: #120608;
    --bg-panel: rgba(45, 10, 15, 0.75);
    --accent: #ff4e4e;
    --accent-soft: rgba(255, 78, 78, 0.25);
    --text-main: #ffeaea;
    --text-soft: #d9a0a0;
    --radius: 14px;
}

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

body {
    background: radial-gradient(circle at top, #501b1b, #140505 60%);
    color: var(--text-main);
}

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

.icon {
  vertical-align: middle;
  width: 1em;
  height: 1em;
  display: inline-block;
  color: 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);
}