@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:300,400&display=swap");
@import url("https://rsms.me/inter/inter.css");
body {
  background: #eff1f4;
  font-family: "Inter", sans-serif;
}

header {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 100px;
  background: #007fff;
}
header img {
  width: 130px;
}

.main-cont {
  background: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0 35px 55px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 35px 55px 0 rgba(0, 0, 0, 0.05);
  margin-top: -54px;
  padding-bottom: 20px;
}

.tab-menu {
  text-align: center;
  border-bottom: 1px solid #eeeeee;
}
.tab-menu .item {
  display: inline-block;
}
.tab-menu .item a {
  margin: 0 5px;
  padding: 15px 30px;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #797f89;
  -webkit-transition: color 0.2s ease-in;
  -o-transition: color 0.2s ease-in;
  transition: color 0.2s ease-in;
}
.tab-menu .item a:hover {
  text-decoration: none;
  color: #61666e;
}
.tab-menu .active-item a {
  color: #007fff;
  font-weight: 600;
  border-bottom: 2px solid #007fff;
}
.tab-menu .active-item a:hover {
  text-decoration: none;
  color: #0066cc;
}

.stopw-cont {
  text-align: center;
  padding-bottom: 70px;
}
.stopw-cont .unit {
  display: inline-block;
  margin: 70px 15px;
}
.stopw-cont .unit h2 {
  display: inline-block;
  font-family: "Roboto Mono", monospace;
  font-size: 50px;
  font-weight: 300;
  color: #383e47;
}
.stopw-cont .unit label {
  margin-left: 5px;
  font-size: 15px;
  color: #383e47;
}

.btn-wrap {
  display: block;
}
.btn-wrap .btn {
  padding: 8px 40px;
  border-radius: 3px;
  font-family: "Roboto Mono", monospace;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0px 5px;
  background: #ffffff;
}
.btn-wrap .btn:focus {
  outline: none;
}
.btn-wrap #btn-toggle {
  background: #e5f2ff;
  color: #007fff;
}
.btn-wrap #btn-add-lap {
  border: 1px solid #e5f2ff;
  color: #007fff;
}
.btn-wrap #btn-reset {
  color: #797f89;
  border: 1px solid #e4e5e7;
}

.laps {
  text-align: center;
  margin-bottom: 20px;
}
.laps #laps-header {
  font-size: 13px;
  color: #797f89;
}
.laps #lap-info {
  font-size: 12px;
  color: #9da3ac;
}
.laps ul {
  padding-left: 0px;
  list-style: none;
}
.laps li {
  font-family: "Roboto Mono", monospace;
  color: #545b65;
  padding: 10px 0px;
}
.laps li:nth-child(odd) {
  background: #fbfcfe;
}

footer {
  padding: 20px 0;
  margin-top: 100px;
  background: #ffffff;
}
footer .footer-logo {
  display: inline-block;
}
footer .footer-logo img {
  height: 35px;
}
footer .footer-items {
  display: inline-block;
  float: right;
}
footer .footer-items a {
  color: #a3aab2;
  font-size: 14px;
  text-decoration: underline;
  margin-left: 25px;
}

.timer-input {
  text-align: center;
  margin: 30px 0;
}
.timer-input label {
  font-size: 13px;
  color: #797f89;
  margin-bottom: 10px;
}
.timer-input #set {
  margin-top: 30px;
  padding: 10px 45px;
  border-radius: 3px;
  font-family: "Roboto Mono", monospace;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  color: #535962;
  border: none;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #e0e4e9;
}
.timer-input .full-input {
  display: inline-block;
  border-radius: 5px;
  margin: 10px;
  padding: 10px 15px;
  background: #f9fafd;
}
.timer-input .full-input label {
  font-family: "Roboto Mono", monospace;
  font-weight: 600;
  font-size: 12px;
  margin-right: 10px;
}
.timer-input input {
  border: none;
  padding: 10px 15px;
  text-align: center;
  background: #f9fafd;
  font-family: "Roboto Mono", monospace;
  font-size: 16px;
  width: 80px;
}
.timer-input input:focus {
  outline: none;
}

.notification-permission {
  padding: 10px 0px;
  background: #ffcc91;
  font-size: 14px;
  color: #a76c29;
  text-align: center;
  display: none;
}
.notification-permission a {
  color: #a76c29;
  font-weight: 600;
}

.timer-stopw-cont {
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 40px;
}
.timer-stopw-cont .unit {
  margin: 40px 15px;
}

@media screen and (max-width: 540px) {
  .stopw-cont {
    margin: 30px 10px;
  }
  .stopw-cont .unit {
    margin: 10px !important;
  }
  .stopw-cont .unit h2 {
    font-size: 30px;
  }
  .btn-wrap {
    margin-top: 30px;
  }
  .btn-wrap .btn {
    margin-top: 20px;
  }
  .timer-stopw-cont .unit {
    margin-top: 40px !important;
  }
}