section h1{
  width: 100%;
}
section{
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                    -ms-grid-row-align: center;
                align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
           -moz-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 100%;
}
#logo{
    position: absolute;
    left: 1rem;
    top:1rem;
    height: 2rem;
    cursor: pointer;
  }
#logo svg{
  position: absolute;
  z-index: 0;
  height: 2.3rem;
}
#logo span{
  padding-left: 3.5rem;
}
  #timer {
    padding: 2rem;
    -webkit-border-radius: 1rem;
       -moz-border-radius: 1rem;
            border-radius: 1rem;
    -webkit-box-shadow: 0 0 10px rgba(30, 30, 30, 0.125);
-moz-box-shadow: 0 0 10px rgba(30, 30, 30, 0.125);
box-shadow: 0 0 10px rgba(30, 30, 30, 0.125);
    text-align: center;
    position: relative;
    background-color: #ffffff;
  }
    .controls {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
         -moz-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      gap: 1rem;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
    }
    @media (max-width: 500px) {
      .controls button{
        width: 100%;
        gap: 1rem;
        margin: 0;
      }
      #timer {
        padding: 1rem;
      }
    }
    .start {
      background-color: #5cb771;
    }
    .start:hover {
      background-color: #4d995e;
    }

    .pause {
      background-color: #e67e22;
    }
    .pause:hover {
      background-color: #bd671b;
    }
    .reset {
      background-color: #dd737d;
    }
    .reset:hover {
      background-color: #9e464e;
    }
.time-display {
    font-size: 2.786rem;
    line-height: 3rem;
    margin: 3rem 0;
  }
    .input-group {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
   -moz-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
margin: 3rem auto 0;
background-color: rgba(180, 191, 209, 0.2);
padding: 2rem;
-webkit-border-radius: 1rem;
   -moz-border-radius: 1rem;
        border-radius: 1rem;
-webkit-box-align: center;
-webkit-align-items: center;
   -moz-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
    .input-group div{
      width: -webkit-calc(50% - 1rem);
      width: -moz-calc(50% - 1rem);
      width: calc(50% - 1rem);
    }
    #alarm-bell {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
  }
  #alarm-bell g{
    fill: rgb(10,37,66);
    stroke: none;
  }
  #alarm-bell.bell-active g{
    fill: #dd737d;
  }