:root {
  --background: #dde1e7;
  --black-shadow: #595959;
  --white-shadow: #f5f5f5;
  --text-color: #555;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  --webkit-appearance: none;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--background);
}

#counter {
  position: fixed;
  top: 0.5rem;
  right: 1rem;
  margin-top: 0.5rem;
  margin-right: 1rem;
  font-size: 4em;
  font-weight: 700;
  color: var(--text-color);
  z-index: 9999;
}

#timer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4em;
  font-weight: 700;
  color: var(--text-color);
  z-index: 9999;
  -webkit-transform:translate3d(-50%,-50%,0);
}

.content {
  width: 100%;
  background: var(--background);
  border-radius: 10px;
  padding: 40px 30px;
  box-shadow: none;
}

.content.hide {
  display: none;
}

.content .text {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 35px;
  color: var(--text-color);
}

.content label {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--text-color);
}

.content .wrap {
  position: relative;
  width: 100%;
  height: 50px;
  display: flex;
}

/* Number input styles */
.wrap {
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.number {
  position: relative;
  width: 100px;
  border-radius: 25px;
  
}

.number input[type="number"] {
  display: block;
  height: 32px;
  line-height: 32px;
  width: 100%;
  padding: 0;
  margin: 0;
  background: var(--background);
  box-sizing: border-box;
  text-align: center;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  appearance: textfield;
  border: none;
  border-radius: 25px;
  box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #ffffff73;
}

.number input[type="number"]::-webkit-outer-spin-button,
.number input[type="number"]::-webkit-inner-spin-button {
  display: none;
}

.number-minus {
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  width: 20px;
  padding: 0;
  display: block;
  text-align: center;
  border: none;
  font-weight: 600;
  color: var(--text-color);
  background: transparent;
  border-radius: 25px;
}
.number-plus {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 20px;
  padding: 0;
  display: block;
  text-align: center;
  border: none;
  font-weight: 600;
  color: var(--text-color);
  background: transparent;
  border-radius: 25px;
}

/* For screens larger than 768px (desktop) */
@media (min-width: 768px) {
  .inputs {
    display: flex;
    flex-wrap: wrap;
  }
  .inputs-group-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .input-group {
    width: calc(33.33% - 10px);
    margin-right: 10px;
  }
  .input-group:last-child {
    margin-right: 0;
  }
}

/* For screens smaller than 768px (mobile) */
@media (max-width: 767px) {
  .inputs {
    display: block;
  }
  .inputs-group-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .input-group {
    width: 100%;
    margin-right: 0;
  }
}

/* Button */
.button {
  outline: none;
  border: none;
  cursor: pointer;
  width: 175px;
  height: 60px;
  border-radius: 30px;
  font-size: 20px;
  font-weight: 700;
  font-family: "Lato", sans-serif;
  color: #fff;
  text-align: center;
  background: #72a98f;
  box-shadow: 7px 7px 15px #b1b1b1, -7px -7px px #ffffff;
  transition: 0.5s;
}
.button:hover {
  background: #5d987c;
}
.button:active {
  background: #8db9a5;
}

@media (min-width: 480px) {

  
    .content {
      width: 480px;
      box-shadow: -3px -3px 7px #ffffff73, 2px 2px 5px rgba(94, 104, 121, 0.288);
    }
  
    .button {
      width: 100%;
    }
}

/**
  * Toggle Switch
  */
  .label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: #394a56;
  }
  
  .label-text {
    margin-left: 16px;
  }
  
  .toggle {
    isolation: isolate;
    position: relative;
    height: 30px;
    width: 60px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: -8px -4px 8px 0px #ffffff,
      8px 4px 12px 0px #d1d9e6,
      4px 4px 4px 0px #d1d9e6 inset,
      -4px -4px 4px 0px #ffffff inset;
  }
  
  .toggle-state {
    display: none;
  }
  
  .indicator {
    height: 100%;
    width: 200%;
    background: #ecf0f3;
    border-radius: 15px;
    transform: translate3d(-75%, 0, 0);
    transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
    box-shadow: -8px -4px 8px 0px #ffffff,
      8px 4px 12px 0px #d1d9e6;
  }
  
  .toggle-state:checked ~ .indicator {
    transform: translate3d(25%, 0, 0);
  }


/**
  * Toggle Switch - label
  */
.toggle-label {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin: 10px;
}

.toggle-label-left {
  margin-right: 10px;
}

.toggle-label-right {
  margin-left: 10px;
}