body,html {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
  }

  body{
    background: url('./images/club-4021428.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
    color:rgb(252, 250, 250);
  }

  .title{
    text-align: center;
    font-size: 3rem;
  }
  
  .howto{
    color: #ffc600;
    text-align: center;
  }
 
  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-shrink: 4;
    justify-content: center;
    align-items: center;
    background-color:rgb(14, 5, 1);
    background-color:rgba(14, 5, 1, 0.74);
  }

  .row{
    display: flex;
  }

  .group{
    text-align: center;
  }
  
  .pad {
    width: 11rem;
    height: 11rem;
    border: .4rem solid rgb(82, 80, 80);
    border-radius: 50%;
    margin: .3rem;
    font-size: 4rem;
    transition: all .3s ease;
    text-align: center;
    color: white;
    background: rgba(0,0,0,0.8);
    text-shadow: 0 0 .5rem black;
    text-transform: uppercase;
    cursor: pointer;
  }
  
  .pressed {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    border-color: #ffc600;
    box-shadow: 0 0 1rem #ffc600; 
  }
  
  .sound {
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
    color: #ffc600;
  } 

/***************
  mobile layout 
****************/

  @media(max-width: 767px) {

    .container{
      padding-right: 1rem;
      padding-left: 1rem;
    }

    .title{
      font-size: 1.7rem;
    }

    .row{
      display: flex;
      flex-direction: column;
    }

    .pad {
      width: 6rem;
      height: 6rem;
      border: .3rem solid rgb(82, 80, 80);
      border-radius: 50%;
      margin: .2rem;
      font-size: 2rem;
    }

    .sound {
      font-size: .8rem;
    } 
    


  }