*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:#0a0a0a;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  font-family:Arial;
}

/* PHONE */
#phone{
  width:100%;
  max-width:390px;
  height:100dvh;
 background:radial-gradient(circle at top,#4f0202,#04040479);
  color:#f30808;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* HEADER */
header{
  height:55px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-bottom:1px solid rgb(247, 5, 5);
}

.title{
  font-size:12px;
  letter-spacing:3px;
  opacity:0.7;
}

/* DISPLAY */
#chrono{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:20px;
}

#display{
  font-size:52px;
  font-weight:300;
  display:flex;
  letter-spacing:2px;
}

.sep{
  opacity:0.3;
  padding:0 4px;
}

/* CONTROLS */
#controls{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

#controls button{
  width:55px;
  height:55px;
  border:none;
  border-radius:14px;
  background:rgba(245, 244, 244, 0.253);
  display:flex;
  justify-content:center;
  align-items:center;
}

#controls img{
  width:20px;
  height:20px;
}

/* CLEAR BUTTON */
#clearLapsWrap{
  display:flex;
  justify-content:center;
  margin:5px 0;
}

#clearLaps{
  width:85%;
  height:36px;
  border:none;
  border-radius:10px;
  background:rgba(255, 255, 255, 0.224);
  color:#ff0000;
  font-size:12px;
}

/* LAPS */
#laps{
  height:25%;
  overflow:auto;
  padding:10px;
  font-size:12px;
  opacity:0.8;
}

.lap{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid rgba(243, 11, 11, 0.813);
}