@import 'base.css';


/*
..media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

..media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
}
*/

h1{
  display: block;
  width: 100%;
  text-align: center;
  font-weight: normal;
  font-family: 'Staatliches', cursive;
  font-size: 48pt;
  color:#fff;
}

h2{
  display: block;
  text-align: center;
  width: 100%;
  color: #fff;
}

a{
  text-decoration: none;
  color: var(--orange1);
}

a:hover{
  color: var(--orange2);
}


.link-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
  font-weight: bold;
}

.link-list-item, .btn{
  display: block;
  font-weight: bold;
  margin: 0 auto 16px;
  cursor: pointer;
  padding: 24px 16px;
  box-sizing: border-box;
  width: 300px;
  border-radius: 12px;
  font-size: 16pt;
  text-align: center;
  color: #fff;
  background: var(--purple2);
  border: 3px solid var(--purple2);
 /* box-shadow:
          0 0 0.2rem #fff,
          0 0 2rem var(--purple1),
          0 0 0.8rem var(--purple1),
          inset 0 0 1.3rem var(--purple1);*/
}


.link-list-item:hover, .btn:hover{
  border-color: #fff;
}

.btn-disabled, .btn-disabled:hover{
  border-color: var(--grey2);
  color: var(--grey2);
  cursor: not-allowed;
  animation: none;
}

.content{
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  color: var(--grey1);
  margin: 0 auto;
  padding: 12px;
}

.right{
  text-align: right;
}

.squish div{
  box-sizing: border-box;
}

.center{
  text-align: center;
}

.bold{
 font-weight: bold;
}

.mx-auto{
  margin: 0 auto;
}

input{
  display: block;
  color: var(--grey1);
  width: 300px;
  margin: 24px auto;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 12px;
  font-size: 16pt;
  text-align: center;
  background: #fff;
  border: 3px solid var(--purple1);
  outline: none;
}

@media only screen and (max-width: 1000px) {
  #top-logo{
    text-align: center;
  }
}

@media only screen and (max-width: 1000px) {
  #top-logo-sm{
    text-align: center;
  }
}

table{
  box-sizing: border-box;
  padding: 0 12px;
  margin: 0 auto;
}

.mt{
  margin-top: 60px;
}

.bold{
  font-weight: bold;
}

.flash{
  animation: flash 1s infinite;
}

@keyframes flash {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

.spacer{
  padding: 0 12px;
}

.content {
  padding: 64px 18px 360px;
}

.washout-img {
  filter: grayscale(1);
  border: 4px solid #000;
}

.selected-img {
  filter: none;
  border: 4px solid #0f0;
}

.token-image {
  max-width: 180px;
  max-height: 180px;
  background: url(/img/cloud.png) center center;
  background-size: 200px;
  z-index: 1;
}

.token-cell {
  max-width: 200px;
  box-sizing: border-box;
  padding: 2px;
}

.token-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}