:root {
  --core-dark        : #222433;
  /*#2d3046;*/
  --core-medium      : #2c2f48;
  --core-light       : #363a57;
  /*#484c6e;*/
  --core-color       : #e271e3;
  --core-color-shadow: #932aad;
  --text-color       : #AFAFAF;
  --text-color-muted : #7a7a7a;
}

@font-face {
  font-family: Minecraft;
  src        : url("../font/Minecraft-Regular.otf");
}

@font-face {
  font-family: Roboto;
  src        : url("../font/Roboto-Regular.ttf");
}

@font-face {
  font-family: RobotoMono;
  src        : url("../font/RobotoMono-Regular.ttf");
}

.font-minecraft {
  font-family: Minecraft;
}

* {
  box-sizing : border-box;
  color      : var(--text-color);
  font-family: Roboto;
  /*, Arial, sans-serif, monospace;*/
  margin     : 0;
  padding    : 0;
  overflow-x : hidden;
}

a {
  color        : var(--core-color);
  cursor       : pointer;
  margin-top   : 2px;
  margin-bottom: 2px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.text-alignment {
  width    : 50%;
  min-width: fit-content;
  display  : inline-block;
}

.text-alignment * {
  text-align: left;
}

.menu {
  list-style-type : none;
  margin          : 0;
  padding         : 0;
  overflow        : hidden;
  background-color: var(--core-light);
  text-align      : center;
}

.menu li {
  display: inline-block;
}

.menu li a {
  display        : block;
  font-size      : 25px;
  color          : var(--core-color);
  text-align     : center;
  padding        : 14px 16px;
  text-decoration: none;

  text-shadow: 0 1px 0 var(--core-color-shadow),
    0 2px 0 var(--core-color-shadow),
    0 3px 0 var(--core-color-shadow),
    0 4px 1px rgba(0, 0, 0, .1),
    0 0 2px rgba(0, 0, 0, .1),
    0 1px 2px rgba(0, 0, 0, .3),
    0 2px 3px rgba(0, 0, 0, .2),
    0 3px 10px rgba(0, 0, 0, .25),
    0 10px 10px rgba(0, 0, 0, .2),
    0 20px 20px rgba(0, 0, 0, .15);
}

.logo {
  width    : 100%;
  max-width: 700px;
}

.logo-small {
  height: 56px;
}

.content {
  /* width: 100%; */
  display      : flex;
  margin-top   : 25px;
  margin-bottom: 25px;
  margin-left  : 5px;
  margin-right : 5px;
}

.dark-background {
  background-color: var(--core-dark);
}

.content div[class^="col-"] {
  float: left;
}

.col-1 {
  width: 8%;
}

.col-2 {
  width: 17%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33%;
}

.col-5 {
  width: 42%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58%;
}

.col-8 {
  width: 67%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83%;
}

.col-11 {
  width: 92%;
}

.col-12 {
  width: 100%;
}

h1,
h2,
h2 small {
  color: var(--core-color);
}

h2 small {
  font-size: 12px;
}

small {
  color: var(--text-color-muted);
}

.header {
  background-color: var(--core-dark);
  padding         : 15px;
  text-align      : center;
}

.header * {
  background-color: var(--core-dark);
}

.footer {
  background-color: var(--core-dark);
  text-align      : center;
  padding         : 10px;
  margin-top      : 7px;
  /* bottom       : 0px;
  position        : absolute;
  width           : 100%; */
  position        : fixed;
  width           : 100%;
  bottom          : 0px;
}

.scroll-list-small {
  max-height: 250px;
  overflow-y: auto;
}

.scroll-list-large {
  max-height: 500px;
  overflow-y: auto;
}

.card {
  background-color: var(--core-dark);
  padding         : 20px;
  margin-left     : 5px;
  margin-right    : 5px;
  margin-top      : 5px;
  margin-bottom   : 5px;
  border-radius   : 8px;
}

.card-small {
  display         : inline-block;
  width           : inherit;
  background-color: var(--core-dark);
  padding-top     : 10px;
  padding-bottom  : 10px;
  margin-top      : 5px;
  margin-bottom   : 5px;
  border-radius   : 8px;
}

.dummy-card {
  padding      : 20px;
  margin-left  : 5px;
  margin-right : 5px;
  margin-bottom: 10px;
}

.card-light {
  background-color: var(--core-light);
}

.card-center {
  text-align: center;
}

.card img {
  max-width : 100%;
  max-height: 400px;
}

.btn {
  background-color: var(--core-light);
  padding         : 15px;
  margin          : 15px;
  border          : 0;
  font-size       : 22px;
  font-weight     : bold;
  cursor          : pointer;
  text-shadow     : 0px 0px 1px rgba(0, 0, 0, 1);
  width           : auto;
  min-width       : fit-content;
  border-radius   : 8px;
}

.btn-fullwidth {
  width: 100%;
}

.btn-small {
  font-size: 15px;
  width    : auto;
}

.btn-primary {
  background-color   : var(--core-light);
  color              : #FFF;
  /* text-shadow     : 0px 0px 5px #000000; */
}

.btn-secondary {
  background-color: var(--core-dark);
  color           : #FFF;
}

.btn-danger {
  background-color: #de3a3a;
  color           : #FFF;
}

.btn-success {
  background-color: #48de3a;
}

.btn-bg-invisible {
  background-color: #0000;
  margin-top      : -5px;
  padding         : 4px;
  padding-bottom  : 0px;
  /* border          : 2px solid var(--core-light); */
  margin-right    : 5px;
  float           : right;
  margin-top      : 5px;
  margin-bottom   : 5px;
}

.bg-color-danger {
  background-color: #de3a3a;
  color           : #FFF;
  padding         : 10px;
  margin          : -20px -20px 20px -20px;
}

.hide {
  display: none;
}

.force-hide {
  display: none !important;
}

code {
  font-family: monospace;
  color      : #fc424a;
  padding    : 5px;
}

form,
.form {
  text-align: center;
}

.input-error {
  color: rgb(179, 15, 69);
}

.btn-input {
  font-size     : 10px;
  height        : 34px;
  font-size     : 20px;
  padding-top   : 0px;
  padding-bottom: 0px;
}

.btn-input-left {
  margin-right: -10px;
}

.btn-input-right {
  margin-left: -10px;
}

form input,
form textarea,
.form input,
.form textarea,
input[type=text],
input[type=number] {
  background-color: var(--core-light);
  padding         : 5px;
  margin-bottom   : 5px;
  border          : 0;
  font-size       : 20px;
  text-align      : center;
  border-radius   : 8px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin            : 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

form h2,
.form h2 {
  /* border-top: 1px solid; */
  margin-bottom: -20px;
  margin-top   : 10px;
}

.bg-light {
  background-color: var(--core-light);
  margin-left     : -20px;
  margin-right    : -20px;
  margin-top      : 15px;
  border-radius   : 8px;
}

.selection-main {
  background-color: var(--core-light);
  margin-left     : -20px;
  margin-right    : -20px;
  padding         : 20px;
  margin-top      : 15px;
  cursor          : pointer;
  user-select     : none;
  border-radius   : 8px;
}

.selection-title {
  color      : var(--core-color);
  font-size  : 1.5em;
  font-weight: bold;
}

.selection-caret {
  float    : left;
  font-size: 30px;
}

.selection-caret-alt {
  float      : left;
  margin-left: -8px;
  font-size  : 30px;
}

.selection-plus {
  float    : right;
  font-size: 30px;
}

.selection-list-main {
  background-color: var(--core-dark);
  margin-top      : 14px;
  margin-left     : -20px;
  margin-right    : -20px;
  padding         : 15px;
  box-shadow      : inset 0px 11px 8px -8px #171922, inset 0px -11px 8px -8px #171922;
}

.selection-list-item {
  list-style-type   : none;
  cursor            : pointer;
  background-color  : #2e334d;
  margin-top        : 5px;
  margin-bottom     : 5px;
  padding-top       : 10px;
  padding-bottom    : 10px;
  border-radius     : 8px;
  /* float          : left; */
}

.selection-list-item-right {
  margin-right: 5px;
  float       : right;
}

.selectable-unselected {
  padding-top     : 5px;
  padding-bottom  : 5px;
  margin-top      : 5px;
  margin-bottom   : 5px;
  cursor          : pointer;
  background-color: var(--core-medium);
  color           : #8c3636;
  font-weight     : bold;
  border-radius   : 5px;
  user-select     : none;
}

.selectable-selected {
  padding-top     : 5px;
  padding-bottom  : 5px;
  margin-top      : 5px;
  margin-bottom   : 5px;
  cursor          : pointer;
  background-color: var(--core-medium);
  color           : #3c6f36;
  font-weight     : bold;
  border-radius   : 5px;
  user-select     : none;
}

.unselectable {
  padding-top     : 5px;
  padding-bottom  : 5px;
  margin-top      : 5px;
  margin-bottom   : 5px;
  background-color: var(--core-medium);
  color           : var(--text-color-muted);
  font-weight     : bold;
  border-radius   : 5px;
  user-select     : none;
}

.fa-red {
  color: rgb(146, 23, 23);
}

.fa-green {
  color: rgb(50, 145, 26);
}

@media only screen and (max-width:850px) {

  /* For mobile phones: */

  .content {
    /* width: 100%; */
    display: unset;
  }

  .col-1 {
    width: 100%;
  }

  .col-2 {
    width: 100%;
  }

  .col-3 {
    width: 100%;
  }

  .col-4 {
    width: 100%;
  }

  .col-5 {
    width: 100%;
  }

  .col-6 {
    width: 100%;
  }

  .col-7 {
    width: 100%;
  }

  .col-8 {
    width: 100%;
  }

  .col-9 {
    width: 100%;
  }

  .col-10 {
    width: 100%;
  }

  .col-11 {
    width: 100%;
  }

  .col-12 {
    width: 100%;
  }
}

@media only screen and (max-width:1450px) and (min-width:850px) {
  .col-1 {
    width: 50%;
  }

  .col-2 {
    width: 50%;
  }

  .col-3 {
    width: 50%;
  }

  .col-4 {
    width: 50%;
  }

  .col-5 {
    width: 50%;
  }

  .col-6 {
    width: 50%;
  }

  .col-7 {
    width: 58%;
  }

  .col-8 {
    width: 67%;
  }

  .col-9 {
    width: 75%;
  }

  .col-10 {
    width: 83%;
  }

  .col-11 {
    width: 92%;
  }

  .col-12 {
    width: 100%;
  }
}

/*
Background gradient scroll
*/

body {
  background-color     : #090a0f;
  /* background-image  : url("/images/background.webp");
  background-size      : cover;
  background-repeat    : no-repeat; */
  /* background        : linear-gradient(-45deg, #FFC71F, #F92A82, #23D5AB, #2FA9F9);
  background-size      : 400% 400%;
  animation            : gradient 120s ease infinite; */
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}