body {
  padding: 0;
  margin: 0;
  background-image: url("green.jpg"); }

.top {
  height: 235px;
  width: 200px;
  background-color: maroon;
  z-index: 1; }
  .top p {
    margin: 0; }
  .top h2 {
    text-align: center;
    padding-top: 5px;
    color: red;
    margin: 0;
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    font-size: 30px; }

@keyframes blink {
  0% {
    color: red; }
  50% {
    color: white; } }
#computer {
  display: flex; }
  #computer .ndraggable {
    background: white;
    border-radius: 1rem;
    box-shadow: 4px 4px 12px 2px;
    height: 235px;
    width: 200px;
    background-color: white;
    overflow: hidden; }
  #computer .ndraggable:not(:first-child) {
    margin-left: -4rem; }

span {
  color: wheat; }

#market {
  height: 235px;
  width: 200px;
  background-color: white;
  border-radius: 3%; }

#center {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%); }
  #center div {
    margin-right: 10%; }
  #center p {
    margin: 0; }
  #center #droppable {
    margin-right: 100px; }
  #center #market > div {
    height: 235px;
    width: 200px;
    border-radius: 3%;
    background-color: #521717; }
    #center #market > div div {
      position: relative;
      top: 28%; }
  #center #twenty {
    height: 235px;
    width: 200px;
    background-color: wheat;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0; }
    #center #twenty #circle, #center #twenty #star, #center #twenty #square, #center #twenty #cross, #center #twenty #triangle {
      height: 45px;
      width: 60px;
      margin: 10px;
      background: white;
      position: relative; }
      #center #twenty #circle div, #center #twenty #star div, #center #twenty #square div, #center #twenty #cross div, #center #twenty #triangle div {
        position: absolute;
        top: 30%;
        left: 30%; }
        #center #twenty #circle div i, #center #twenty #star div i, #center #twenty #square div i, #center #twenty #cross div i, #center #twenty #triangle div i {
          font-size: 20px;
          color: #521717; }

#player {
  display: flex;
  position: absolute;
  bottom: 0; }
  #player .my_draggable {
    background: white;
    border-radius: 1rem;
    box-shadow: 4px 4px 12px 2px;
    height: 235px;
    width: 200px;
    background-color: white;
    overflow: hidden; }
  #player .my_draggable:not(:first-child) {
    margin-left: -4rem; }
  #player .my_draggable:hover {
    transform: translateY(-1rem);
    transition: 0.5s ease-out; }
  #player .my_draggable:hover ~ .my_draggable {
    transform: translateX(3rem); }

p.whot-letter {
  text-align: center;
  color: #521717;
  font-size: 40px; }

#one {
  transform: rotateY(180deg) rotateX(180deg);
  margin: 0; }

#two {
  margin: 0; }

.card {
  position: relative; }

h4 {
  color: #521717;
  margin: 0;
  padding-left: 10px; }

.ones {
  transform: rotateY(180deg) rotateX(180deg);
  padding-right: 20px;
  margin-bottom: -15px; }

.twos {
  margin: 0; }

.roll {
  z-index: 4;
  animation-name: rolling;
  animation-duration: 2s;
  animation-fill-mode: forwards; }

@keyframes rolling {
  0% {
    transform: rotateY(180deg); }
  100% {
    transform: rotateY(0deg); } }
.del {
  padding: 0px 6px; }

#score-board {
  background-color: rgba(0, 0, 0, 0.2);
  height: 100vh;
  position: relative; }

#scroller {
  height: 100vh; }

#message_option {
  height: 235px;
  width: 200px; }

#computer, #center {
  position: sticky;
  left: 0; }

#songControl {
  position: absolute;
  bottom: 0;
  width: 90%;
  margin-left: -5px; }

#songControl button i {
  font-size: 30px; }

/*# sourceMappingURL=styles.css.map */
