/* From: https://fontlibrary.org/en/font/xolonium */
@font-face {
  font-family: 'XoloniumBold';
  src: url('XoloniumBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'XoloniumRegular';
  src: url('XoloniumRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/* From: https://fontlibrary.org/en/font/new-academy */
@font-face {
  font-family: 'NewAcademy';
  src: url('NewAcademy.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}



/* Atomic CSS */

.flex { display: flex; }
.flex1 { flex: 1; }
.flexColumn { flex-direction: column; }
.alignCenter { align-items: center; }
.alignEnd { align-items: flex-end; }
.justifyCenter { justify-content: center; }
.justifyBetween { justify-content: space-between; }

.relative { position: relative; }
.fullWindow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.invisible { visibility: hidden; }
.academy { font-family: 'NewAcademy', sans-serif; }

.nonSelectable {
  user-select: none;
  -moz-user-select: none;
}

.red {
  color: red;
}


/* padding */
.p2 { padding: 2em; }
.pt2 { padding-top: 2em; }
.pr2 { padding-right: 2em; }
.pb2 { padding-bottom: 2em; }
.pl2 { padding-left: 2em; }


/* margin */
.m1 { margin: 0.5em; }
.mt1 { margin-top: 0.5em; }
.mr1 { margin-right: 0.5em; }
.mb1 { margin-bottom: 0.5em; }
.ml1 { margin-left: 0.5em; }

.m2 { margin: 1em; }
.mt2 { margin-top: 1em; }
.mr2 { margin-right: 1em; }
.mb2 { margin-bottom: 1em; }
.ml2 { margin-left: 1em; }


/* colors */
.gray { color: gray; }
.bgOpaque { background-color: #00000099; }



/* Main */

body, button {
  margin: 0;
  font-family: 'XoloniumRegular', sans-serif;
  /* text-shadow: 2px 2px 4px grey; */
}

.game-area {
  cursor: url(crosshair.svg) 28 30, url(crosshair.png) 64 64, crosshair;
}

.fps {
  position: absolute;
  top: 0;
}



/* Menu */

.menu {
  background-color: white;
  border: 1px solid black;
  min-width: 20vw;
}

.menu * + section {
  margin-top: 2em;
}

.menu-button {
  margin: 0.5em;
}

.menu-button > * {
  outline: none;
  width: 100%;
  text-align: center;
  background-color: transparent;
  border: none;
}

.menu-button .label {
  width: 20vw;
  padding: 1em;
}

.menu-button .map-preview {
}


.map-selection {
  display: flex;
  flex-wrap: wrap;
  max-width: 80vw;
  max-height: 80vh;
  overflow-y: auto;
}


/* Text animation */
.highlight-animation {
  animation-name: highlight;
  animation-duration: 0.2s;
  animation-direction: alternate;
  animation-iteration-count: 6;
}

@keyframes highlight {
  from { text-shadow: 0px 0px 0px grey; }
  to { text-shadow: 3px 3px 6px grey; }
}



/* Background animation */

.background-path {
  stroke-dasharray: 1, 50;
  animation: dash 100s linear;
  animation-iteration-count: infinite;
  stroke: gray;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}


/* Map Editor */

.map-editor-toolbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow: hidden;

  background-color: #ddd;

  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.map-editor-toolbar > * + * {
  margin-left: 1rem;
}