@import url('https://fonts.googleapis.com/css?family=Nova+Flat');

@keyframes showInfo {
    0% { opacity: 0; right: -50px }
    100% { opacity: 1; right: 20px }
}
@keyframes closeInfo {
    0% { opacity: 1; right: 20px }
    100% { opacity: 0; right: -50px }
}

body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; }

.board-information { position: fixed; top: 20px; right: 20px; padding: 10px 30px 52px 72px; border: 1px solid #c9bbbb; border-radius: 5px; box-shadow: 0 8px 10px -10px black; background: linear-gradient(157deg, #f5f5f5, #e1e1e1); min-height: 100px; width: 400px; }
.board-information-image { position: absolute; top: 10px; left: -20px; width: 72px; height: 72px; border-radius: 5px; border: 1px solid black; background-size: cover; background-repeat: no-repeat; background-position: center; }
.board-information-title { position: relative; font-family: 'Nova Flat', cursive; font-size: 24px; width: 400px; word-break: break-all; word-wrap: break-word; }
.board-information-description { position: relative; font-family: 'Nova Flat', cursive; font-size: 14px; margin-top: 10px; color: #367e8a; width: 400px; word-break: break-all; word-wrap: break-word; }
.board-information-close { position: absolute; width: 20px; height: 20px; font-size: 16px; color: #6f6f6f; user-select: none; -moz-user-select: none; cursor: pointer; font-family: 'Nova Flat', cursive; line-height: 20px; text-align: center; border: 1px solid #959595; top: 5px; border-radius: 5px; right: 5px; background: #f5f5f5; }
.board-information-aspects { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(157deg, #bababa, #787878); height: 42px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }

.board-information-animation-open { animation: 0.4s showInfo; }
.board-information-animation-close { animation: 0.4s closeInfo; }
.board-information-hidden { visibility: hidden; }

.board-card      { position: absolute; transition: 0.25s box-shadow; z-index: 1; overflow: hidden; width: 100px; border: 1px solid grey; border-radius: 10px; height: 150px; -moz-user-select: none; user-select: none; transition-delay: 0.1s; }
.board-card-wrap { position: relative; height: 150px; width: 100px; }
.board-card-rect { position: absolute; bottom: 0px; height: 50px; left: 0; width: 100%; box-shadow: 0 0 5px black; background: linear-gradient(100deg, #e4e4e4, #9b9b9b); }
.board-card-image { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.board-card-title { color: black; text-align: center; font-family: 'Nova Flat', cursive; line-height: 50px; font-size: 14px; }
.board-slot { position: absolute; font-family: 'Nova Flat', cursive; font-size: 10px; text-align: center; line-height: 150px; width: 100px; border: 1px solid grey; height: 150px; -moz-user-select: none; user-select: none; padding: 5px; }