TheCorrespondingSquares/chess-app

@import "bootstrap";
html, body {
    height: 100%;
}

body {
    background: #f1f1f1;
    display: flex;
    flex-direction: column;
}
.content {
  flex: 1 0 auto;
}

.navbar-bg {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.alert {
    margin-bottom: 0;
}

.check-white, .check-black, .stalemate {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------
  Chess Board Styles
--------------------- */

#board {
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.piece {
    font-size: 150%;
}

.black_tile {
    background-color: #28C76F;
    // color: white;
}

.white_tile {
    background-color: #e0e0c5;
    // color: black;
}

.black {
    color: black;
}

.white {
    color: white;
}

.black, .white {
    text-shadow: 1px 2px 2px rgba(100,100,100,0.5);
}

.black_tile a {
  text-decoration: none;
  color: inherit;
}

.white_tile a {
  text-decoration: none;
  color: inherit;
}

table.center {
    margin-left: auto;
    margin-right: auto;
}

table {
    width: 500px;
    height: 500px;
}

td { width:42px; height:42px; }

// Bootstrap Modal Vertical Centering
.modal-dialog {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  @media(max-width: 768px) {
    min-height: calc(100vh - 20px);
  }
}

.flash {
   animation-name: flash;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

.active {
    outline: 3px solid yellow;
}

@keyframes flash {
    from {color: white;}
    to {color: black;}
}

.drop-hover {
  background-color: yellow;
}

.dropped {
  outline: red;
  background-color: red;
}

/* ------------------------
    Homepage Styles
------------------------- */
.hero {
    background-image: linear-gradient( 135deg, #81FBB8 0%, #28C76F 100%);
    padding: 4rem 2rem;
    // color: rgba(255,255,255,1);
}

// .hero h1 {
//     text-shadow: 0px 4px 3px rgba(0,0,0,0.3),
//              0px 8px 13px rgba(0,0,0,0.1),
//              0px 18px 23px rgba(0,0,0,0.1);
// }

.hero-img {
    min-width: 50%;
    height: auto;
    margin: 0 auto;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: bounce;
    transform-origin: center bottom;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

.card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border: none;
}

.available-games {
    margin-bottom: 1rem;
}

.team-img {
    max-width: 200px;
    border: 2px solid #28C76F;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

#tools {
    background: #fff;
}

/* ------------------------
    Footer Styles
------------------------- */

footer {
    margin-top: 1rem; 
    background: #333;
    color: #fff;
    padding: 3rem 0;
}

footer a {
    color: #fff;
    transition: color .2s ease;

    &:hover {
        color: #28C76F;
    }
}

#available-games-modal-body {
    background: #f1f1f1;
}