@import url(http://fonts.lug.ustc.edu.cn/css?family=Lora:700);
@import url(http://fonts.lug.ustc.edu.cn/css?family=Open+Sans:400italic,400,700);
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  background: linear-gradient(to bottom, rgb(43,43,43) 0%, rgb(40,40,40) 100%);
}

.timer-container{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.timer, .add-timer{
  width: 12em;
  height: 13em;
  border: 2px solid rgb(236, 90, 48);
  margin: .5em;
}

.add-timer{
  order: 500;
  border-color: #F5F5F5;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(to bottom, rgb(236, 90, 48) 0%, rgb(234,71,25) 100%);
}


.add-timer>*:first-child{
  color: #F5F5F5;
  font-size: 6em;
  line-height: 2.125em;
  height: 100%;
  opacity: 0.9;
}

.add-timer>*:first-child:hover{
  opacity: 1.0;
}

.timer>.name{
  display: block;
  border-bottom: 2px solid rgb(234,71,25);
  width: 100%;
  height: 1.5em;
  text-align:center;
  color: #F5F5F5;
  font-size: 1.5em;
  line-height: 1.5em;
  font-family: 'Lora', serif;
  background: linear-gradient(to bottom, rgb(236, 90, 48) 0%, rgb(234,71,25) 100%);
}

.timer>.time{
  display: block;
  height: calc(3.5em + 2px);
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  line-height: 3.5em;
  font-size: 3em;
  color: #2B2B2B;
  background: linear-gradient(to bottom, rgb(245,245,245) 0%, rgb(242,242,242) 100%);
  cursor: pointer;
}

.timer>.time:hover{
  background-color: rgba(20, 20, 20, 0.7);
}