#root {
    text-align: center;
    padding-top: 150px;
  }
  
  .crystal {
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    display: inline-block;
    margin: 40px;
    cursor: pointer;
  }
  
  .crystal:hover {
    transform: rotate(135deg) scale(1.2);
    transition: .5s all;
  }
  
  .crystal:active {
    transform: rotate(135deg) scale(1);
    transition: .2s all;
  }
  
  .red {
    background: #e53935;
  }
  
  .blue {
    background: #1e88e5;
  }
  
  .green {
    background: #43a047;
  }
  /* .instructions {
    width: 75%;
    margin: 2% 0 0 11%;
    padding-left: 10px;
    padding-right: 10px;
    background: #F6E6E5;
    border: 5px solid #43a047;
    font-weight: 700;
  } */
  body{
    background: black;
  }
  p{
    font-family: 'Gloria Hallelujah', cursive;
    text-align: center;
    margin-top: 0%;
    border: 10px solid;
    border-top-color: #00a9ff;
    border-right-color: #00a9ff;
    border-bottom-color: #00a9ff;
    border-left-color: #00a9ff;
    background-color: #F6E6E5;
    width: 70%;
    margin-left: 15%;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1.5px;
  }
  .head{
    text-align: center;
    font-family: 'Gloria Hallelujah', cursive;
    font-weight: 900;
    font-size: 20px;
  }
  .wins-loses {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    float: right;
    position: relative;
    text-align: center;
    width: 50%;
    background-color: #00e5ff;
    border: 8px solid;
    border-top-color: #00a9ff;
    border-right-color: #00a9ff;
    border-bottom-color: #00a9ff;
    border-left-color: #00a9ff;
    margin-bottom: 5%;
    margin-top: 1%;
    font-size: 25px;
    padding-bottom: 12px;
    margin-right: 25%;
  }
  .losses{
    color: #e53935;
    font-family: 'Permanent Marker', cursive;
  }
  .wins{
    color: #43a047;
    font-family: 'Permanent Marker', cursive;
  }
  #root{
    margin-top: 0%;
    padding: 7%;
  }