.contain{
    display: grid;
    grid-template-rows: auto 100% auto;
    grid-template-columns: auto 100% auto;
  }
  
  .mem-bg{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: #000;
  }
  
  .mem-border{
    border-style: solid;
    border-width: 5px;
    border-color: #000;
  }
  
  .mem-btn-1{
    height: 225px;
    width: 225px;
    border-top-left-radius: 100%;
    background-image: url('./img/mem-btn-1.png');
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  
  .mem-btn-2{
    height: 225px;
    width: 225px;
    border-top-right-radius: 100%;
    background-image: url('./img/mem-btn-2.png');
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  
  .mem-btn-3{
    height: 225px;
    width: 225px;
    border-bottom-left-radius: 100%;
    background-image: url('./img/mem-btn-3.png');
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 5;
  }
  
  .mem-btn-4{
    height: 225px;
    width: 225px;
    border-bottom-right-radius: 100%;
    background-image: url('./img/mem-btn-4.png');
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;
 
  }
  
  .mem-on-1{
    background-image: url('./img/mem-btn-active-1.png');
  }
  
  .mem-on-2{
    background-image: url('./img/mem-btn-active-2.png');
  }
  
  .mem-on-3{
    background-image: url('./img/mem-btn-active-3.png');
  }
  
  .mem-on-4{
     background-image: url('./img/mem-btn-active-4.png');
  }
  
  .mem-container{
    padding: 25px;
    display: grid;
    grid-template-rows: 150px 75px 75px 150px;
    grid-template-columns: 150px 75px 75px 150px;
    grid-row: 2/3;
    grid-column: 2/3;
  }
  
  .mem-opt-btn{
    border-radius: 5px;
    border-width: 1px;
    background-color: #9BA3BC;
    font-size: 20px;
    font-weight: bold;;
    color: #000;
  }
  
  .mem-options{
    background-color: #F2F2F2;
    color: #000;
    border-radius: 40%;
    display: grid;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-gap: 10px;
    grid-template-rows: 50px 40px 40px;
    grid-template-columns: auto 40px 40px auto;
    justify-items: center;
  }
  
  #mem-screen{
    border-radius: 35%;
    text-align: center;
    padding-top: 33px;
    border-style: solid;
    border-width: 5px;
    margin-top: -30px;
    background: #333;
    color: #FFF;
    width: 100px;
    height: 100px;
    font-size: 55px;
    grid-column: 2/4;
    grid-row: 2/3;
  }
  
  .start-active{
    background-color: #81B689;
  }

  
  .strict-active{
    background-color: #BD898D;
  }
  
  #title{
    grid-column: 1/5;
    grid-row: 1/2
  }

  #start {
    grid-column: 2/3;
    grid-row: 3/4;
  }

  #strict {
    grid-column: 3/4;
    grid-row: 3/4;
  }
  
  .clickable{
    pointer-events : auto;
    cursor:pointer;
  }
  
  .unclickable{
    pointer-events: none;
  }