/* Copyright (c) 2017 MIT 6.813/6.831 course staff, all rights reserved.
 * Redistribution of original or derived work requires permission of course staff.
 */

/* REMOVE ME - dashed lines and height for debugging */
/*
#mainColumn {
  outline: 1px dashed orange;
  height: 200px;
}
*/
/* Your css code here! */

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

body {
  margin: auto;
  vertical-align: middle;
  font-weight: bold;
  text-align: center;
  background-image: url("./graphics/background.jpg");
}

img {
  position: absolute;
}

.btn {
  margin: 5px;
  border: 1px solid #666666;
  box-shadow: 1px 1px 5px gray;
}

.btn:hover {
  background-color: #8c8c8c;
}

.arrow {
  margin: 0;
  color: white;
}

.arrow:disabled {
  background-color: grey;
}

.arrow:enabled {
  background-color: #4889f0;
}

#firstColumn,
#mainColumn,
#lastColumn {
  padding: 10px;
}

#firstColumn {
  z-index: 3;
  background-color: #f9cce4;
}

#gameTitle {
  font-weight: bold;
  color: red;
}

#gameBoard {
  z-index: 1;
  width: 320px;
  height: 320px;
  table-layout: fixed;
  position: relative;
  background-color: rgba(255, 255, 255, 0.5);
}

#moveInput {
  width: 50px;
}

#moveInput:hover,
#moveInput:focus {
  box-shadow: 0 0 5px blue;
}

#arrowContainer {
  margin: 20px auto;
}

#canvas {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
}

#scoreLabel {
  background-color: #f281c0;
  color: white;
}

#cover {
  z-index: 2;
  position: absolute;
  top: -500px;
  left: calc(50% - 160px);
  background-color: white;
  width: 320px;
  height: 500px;
}

#newGame,
#showMove {
  width: 10em;
}

#DEBUG {
  z-index: 100;
  position: fixed;
  top: 50px;
  left: 25px;
  background-color: #ff4d4d;
  opacity: 0.85;
}

.bg-pink {
  background-color: #f281c0;
}

.objective-item {
  display: flex;
  flex-direction: column;
}

.objective-item img {
  width: 30px;
  height: 30px;
}