* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {font-family: Arial, Helvetica, sans-serif;
    font-size:1em; 
    display: grid;
  }
  
  .header{
    background-color: #fff;
    grid-area: hd;
  }

  .header-grid {
    display: grid; 
    grid-template-columns: 60px 200px auto;
    grid-template-rows: 60px; 
  }
  
  .header-logo {
    background-color: #fff;
    background-image: url(../img/neil2.png);
    background-size: cover;
    margin: 10px; 
  }
  
  .header-name {
    background-color: #fff;
    font-family: 'Urbanist',Arial, Helvetica, sans-serif;
    font-size: 30pt;
    padding-top: 7px;
    margin-left: -5px;
    color: #666;  
  }
  
  .header-nav {
    background-color: #fff;
  }
  

  .container-grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 75px auto 60px;
  }

  .main {
    max-width: 850px;
    width: 85%;
    margin: 0 auto;
    border-radius: 20px;
    background-color: #000;
    border: 1px solid #aaa;
  }
  
  .content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr; 
    padding: 10px;
    padding-top: 10px;
    align-items:center;
    justify-items: center;
  }
  
  .footer {
    background-color: #fff;
    color: #3F367B;
    font-size: 14px;
    text-align: center;
    padding-top: 14px;
  }
  
  .led {
    width: 200px;
    height: 50px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 2em;
    text-decoration: none;
    background: #000;
    color: #5ce219;
    margin: 20px;
    text-align: right;
    padding-top: 0px;
    padding-right: 10px;
    border-radius: 8px;
    border:4px solid #5ce219;
  }
  

  .balance {
    grid-column: 1/4;
    }
    
  .winnings {
    grid-column: 4/7;
    }
  
  .reels {
    grid-column: 1/7;
    display: grid;
    border: 1px solid #666;
    border-radius: 8px;
    background-color: #222;
    padding: 10px 30px 10px 30px;
    margin: -20px;
   

    
  }

  .reel {
    width: 150px;
    height: 150px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-decoration: none;
    background: #9ad7b2;
    color: #333;
    margin: 20px; 
    text-align: center;
    padding-top: 15px;
    border-radius: 8px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;


  }

  .one {
    grid-column: 1/2;
    background-image: url(../img/cherry.png);
    background-size: contain;
  }

  .two {
    grid-column: 2/3;
    background-image: url(../img/pear.png);
    background-size: contain;
  }

  .three {
    grid-column: 3/4;
    background-image: url(../img/lemon.png);
    background-size: contain;
  }


  .btn {
    width: 200px;
    height: 50px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-decoration: none;
    background: #222;
    color: #e4dfda;
    margin: 20px;
    text-align: center;
    padding-top: 15px;
    border-radius: 8px;
  }

  .deposit {
    grid-column: 1/4;
    color: #777;
    border-color: red;
    }
    
  .spin {
    grid-column: 4/7;
    border: 2px solid #5ce219;
    color: #5ce219;
    }