@charset "utf-8";

html, body {
  height:100%;
  display:flex;
  flex-direction:column;
}
body {
  background-color:black;
  width:100%;
  font-family:Bubblegum Sans;
  color:white;
  text-shadow:-2px -2px 2px black, -2px 2px 2px black, 2px -2px 2px black, 2px 2px 2px black;
  margin:0;
  padding:0;
}
#the-page-columns {
  display:grid;
  grid-template-columns:auto 66.67% auto;
  height:100%;
}
#the-content-column {
  background-color:#111111;
  border-left:5px solid white;border-right:5px solid white;
  align-self:center;
  width:fit-content;
  height:100%;
}
/* HEADER */

#header { 
  margin:20px; 
  text-align:center;
}
#dojo-header {
  display:block;
  margin-left:auto;margin-right:auto;
  width:auto;
}
/* Home button image */
#home-logo { width:calc(140px + 1vw); }
#home-logo:hover { cursor:pointer; }
/* BucketList% logo image */
#blp-logo { width:calc(110px + 1vw); }
/* GAME SELECTION */
#game-selection {
  display:grid;
  grid-gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(200px, 15%));
  justify-content:center;
  padding:0;
}
.category-header {
  font-size:72px;
  text-align:center;
  align-self:center;
  margin:0;
  grid-column-end:span 6;
}
.category-header-text {
  border:2px 0px solid white;
}
.game-cover {
  width:100%;
  border:4px solid transparent;
}
.game-cover:hover {
  cursor:pointer;
  border:4px solid white;
}
/* MODAL */
#the-modal {
  display:none;
  position:fixed;
  z-index:0;
  padding-top:50px;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgba(0,0,0,0.15);
}
#modal-content {
  position:relative;
  background-color:rgba(20, 20, 20, 0.95);
  color:white;
  text-shadow:-1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black, 1px 1px 1px black;
  margin:auto;
  padding:15px;
  border:2px solid white;
  border-radius:10px;
  width:90%;
  height:80vh;
  display:flex;
  overflow-y:auto;
}
/* Cover Column */
#modal-cover-column {
  width:25%;
  position:relative;
}
#modal-game-cover {
  border:2px solid white;
  border-radius:5px;
  width:100%;
  min-width:100px;
}
.modal-game-link {
  border:2px solid black;
  background-color:rgb(77, 156, 83);
  color:white;
  height:auto;
  width:100%;
  min-width:100px;
  text-align:center;
  position:relative;
  margin-bottom:5px;
}
.link-icon /* logo representing link */ {
  width:20px;
  position:relative;
  right:10px;
  vertical-align:middle;
}
.link-text /* text of link */ { line-height:26px; }
.link-text a { color:white; }
/* Info Column */
#modal-info-column {
  width:75%;
  margin-left:10px;
  margin-right:10px;
}
.modal-table {
  border-collapse:collapse;
  border:solid 2px black;
  width:100%;
  background-color:rgb(77, 156, 83);
}
table.modal-table tbody tr th, table.modal-table tbody tr td { padding:10px; }
#game-title-row { 
  font-size:calc(18px + 1vw);
  text-align:left;
}
#game-title { margin:0; }
#completion-status-cell {
  text-align:right;
  font-size:calc(14px + 0.7vw);
}
/* Goal related */
#modal-game-goals {
  color:black;
  background-color:wheat;
  text-shadow:0 0 black;
}
.checkbox {
  width:0%;
  border:solid 2px black;
}
.goal-cell { border:solid 2px black; }
/* Collapsible goal related */
.collapsible { cursor:pointer;}
.collapsedContent { display:none; }
.subtask-list {
  display:flex;
  flex-wrap:wrap;
  list-style-type:none;
}
.subtask-list li {
  flex:0 0 calc(30% - 10px);
  text-align:center;
  margin:2px;
  line-height:1.5;
}
.collap-arrow { padding-left:5px; }
.goalbox label { cursor:pointer; }
/* X Button that closes modal */
.closeX {
  color:#aaaaaa;
  float:right;
  font-size:28px;
  font-weight:bold;
}
.closeX:hover,.closeX:focus {
  color:white;
  text-decoration:none;
  cursor:pointer;
}