@import url(https://db.onlinewebfonts.com/c/32e66b5b650461435d04fb49cdd092f8?family=TimeBurner+Bold);

html,body {
    min-height: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    font-family: "TimeBurner Bold";
    font-size: 20px;
    color: white;
    padding: 100px 4em;
    background-color: rgb(32,32,32);
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: fixed;
    background-image: linear-gradient(45deg, rgba(0,0,0,0.5914740896358543) 0%, rgba(0,0,0,0.6054796918767507) 25%, rgba(198,198,198,0.5046393557422969) 74%, rgba(255,255,255,0) 100%);
}

.spacer {
    flex-grow: 1;
}

.aug-shadow {
      filter: drop-shadow(0 0 12px skyblue)  drop-shadow(0 0 1px blue) brightness(1.5);
}

.aug-header {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    flex-direction: row;
  --aug-br-extend2: calc(100vw - 15em);
  --aug-border-all: 3px;
  --aug-border-bg: linear-gradient(grey, white, grey);
  --aug-inlay-all: 0px;
  --aug-inlay-bg: linear-gradient(rgba(66, 66, 66, 0.75), rgba(110, 110, 110, 0.75), rgba(66, 66, 66, 0.75));
  background: linear-gradient(#ffc480, #fffbe0, #bbffff);
    padding: 0px;
    z-index: 1000;
}


.aug-footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    flex-direction: row-reverse;
    /*align-items: end;*/
    height: 40px;
  --aug-tl-extend2: calc(100vw - 15em);
  --aug-border-all: 3px;
  --aug-border-bg: linear-gradient(grey, white, grey);
  --aug-inlay-all: 0px;
  --aug-inlay-bg: linear-gradient(rgba(66, 66, 66, 0.75), rgba(110, 110, 110, 0.75), rgba(66, 66, 66, 0.75));
  background: linear-gradient(#ffc480, #fffbe0, #bbffff);
    padding: 4px 16px;
    z-index: 1000;
}

.aug-footer .online-players {
    font-weight: bolder;
    line-height: 40px;
    font-size: 24px;
    color: rgba(32, 32, 32, 0.9);
    text-shadow: 0px 0px 2px white;

}
.aug-button {
  --aug-t1: 8px;
  --aug-border-all: 1px;
  --aug-border-bg: linear-gradient(grey, white, grey);
  --aug-inlay-all:0px;
    z-index:10;
  --aug-inlay-bg: linear-gradient(rgba(66, 66, 66, 0.75), rgba(110, 110, 110, 0.75), rgba(66, 66, 66, 0.75));;
    padding: 8px;
    padding-top: 26px;
    color: rgba(228, 228, 228, 1);
    text-decoration: none;
    text-shadow: 0px 0px 2px black;
}

.branding {
    padding: 8px;
    display: flex;
    flex-direction: row;
}

.branding .title {
    margin-left: 8px;
    font-size: 26px;
    line-height: 26px;
    margin-top: 8px;
    color: rgba(32, 32, 32, 0.9);
    text-shadow: 0px 0px 2px white;
    letter-spacing: 8px;
}

.branding .title:hover {
    text-shadow: 0px 0px 6px white;
}

.branding .title .astral {
    letter-spacing: 18px;
}

.logo {
    width: 64px;
    height: 64px;
    background: url(/static/img/logo_mask.png);
    background-size: contain;
    margin: 0px;
    padding: 0px;
}
.logo img {
    width: 64px;
    height: 64px;
    margin: 0px;
    padding: 0px;
    mix-blend-mode: plus-lighter;
}


.header-avatar-button {
    padding: 8px 8px;
}

.header-avatar-button img {
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.75);
    border-radius: 50%;
    width: 48px;
    height: 48px;
}

.aug-content {
    --aug-b-extend1: calc(100% - 300px);
    --aug-b2: 8px;
    --aug-b1: 8px;
    --aug-l-extend1: 50%;
    --aug-l2: 8px;
    --aug-l1: 8px;
    --aug-r-extend1: 50%;
    --aug-r2: 8px;
    --aug-r1: 8px;
    max-width: 1200px;
    margin: auto;
    padding: 2em;
    padding-top: 12px;
}

.content-title {
    font-size: 32px;
    display: block;
    text-align: center;
}

div.messages {
    margin: 1em auto;
    max-width: 1200px;
    padding: 1em;
    --aug-tr-extend1: 75%;
    --aug-tr1: 26px;
    --aug-tr2: 1em;
--aug-inlay-bg: linear-gradient(
  145deg,
  rgba(0, 0, 0, 0.6),
  rgba(50, 50, 50, 0.6),
  rgba(0, 0, 0, 0.6)
);
    padding-left: 24px;
}

div.messages.error {
    background: rgba(255, 50, 50, 0.6);
}

div.messages.success {
    background: rgba(50, 255, 150, 0.6);
}

div.messages.warning {
    background: rgba(255, 200, 50, 0.6);
}

div.alert-heading {
    margin-top: -8px;
    margin-bottom: 8px;
    display: block;

}
div.messages.error .alert-heading {
  color: #FFECEC;
  text-shadow:
    0 0 4px rgba(255, 0, 0, 0.5),
    0 0 8px rgba(255, 50, 50, 0.6),
    0 0 12px rgba(255, 100, 100, 0.3);
}

div.messages.success .alert-heading {
  color: #E6FFE6;
  text-shadow:
    0 0 4px rgba(0, 255, 100, 0.4),
    0 0 8px rgba(50, 255, 150, 0.6),
    0 0 12px rgba(100, 255, 200, 0.3);
}

div.messages.warning .alert-heading {
  color: #FFF8E6;
  text-shadow:
    0 0 4px rgba(255, 200, 0, 0.5),
    0 0 8px rgba(255, 180, 0, 0.6),
    0 0 12px rgba(255, 160, 0, 0.4);
}