* {
  box-sizing:border-box;
}
body {
  margin:0;
  padding:0;
  width:100vw;
  height:100vh;
  text-align:center;
  background-color: black;
  font-family: sans-serif;
  color:ghostwhite;
}
}
h1, h2, h3 {
  margin-bottom: 2em;
}
h3 {
  text-align:left;
  font-size:1em;
  font-weight:400;
  padding: 0.5em;
  border-radius: 0.5em;
}
p, span {
  font-size:1em;
  text-align:justify;
}
a {
  font-size: 1em;
  color:limegreen;
}
a:visited {
  color:hotpink;
}
button {
  border:1px solid black;
  font-size:1em;
  cursor:pointer;
  background-color: teal;
  color: ghostwhite;
  padding: 0.3em;
  border-radius: 0.6em;
  transition: scale 0.3s;
  margin: 1.5em;
}
button:hover {
  scale: 1.15;
}
button:active {
  transform: translateY(5px);
}
hr {
  margin: 2em auto;
  width: 85%;
  opacity: 0.7;
}

.oneLiner {
  flex: 0 0 auto;
  width: 100%;
}
.flexer, .card {
  display:flex;
  gap: 0.5em;
  align-items: center;
  width:100%;
  justify-content: center;
  flex-wrap:wrap;
}
.card, .playedCard {
  position: relative;
  width: 150px;
  height: 200px;
  border-radius: 0.5em;
  border: 2px solid teal;
  align-items:end;
  cursor:pointer;
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
}
.card p, .playedCard p {
  padding: 0;
  margin: 0;
  position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  text-align: center;
  font-variant:small-caps;
  font-size: 14px;
  border-bottom: 2px solid teal;
  height: 50px;
  width: 100%;
  background: black;
}
.playedCard {
  pointer-events:none;
  position: absolute;
  top: 0;
  left:50%;
  transform:translateX(-50%);
}

#container {
  width:70%;
  margin:0 auto;
  padding: 0.5em;
}
#intro {
  flex-direction:column;
}
#intro img {
  width: 100%;
  max-width: 300px;
}
#gameArea {
  display:none;
}
#tableCards {
  min-height: 250px;
  position:relative;
}
#futurosDisplay {
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height:80%;
  background-color: rgba(0,0,0,0.8);
  z-index: 100;
  padding: 1em;
  border-radius: 0.6em;
  background: rgba(35,0,35, 0.9);
  overflow:auto;
  opacity:0;
}
#futurosDisplay * {
  margin: 0.5em auto;
  text-align: center;
}

@media only screen and (max-width: 1300px) {
  #container {
    width: 85%;
  }
  #futurosDisplay {
    width: 100%;
    height:100%;
  }
}

@media only screen and (max-width: 600px) {
  .card, .playedCard {
    width: 100px;
    height: 160px;
  }
  .card p, .playedCard p {
    font-size:13px;
  }
  .flexer {
    gap: 0.2em;
  }
  #tableCards {
    min-height:170px;
  }
  #container {
    width: 100%;
  }
  #drawButt {
    position: fixed;
    top: 0;
    right:0;
  }
}