@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
  box-sizing: border-box;
}
html, body {
  width           : 100%;
  height          : 100%;
  margin          : 0;
  display         : -webkit-flex;
  display         : flex;
  justify-content : center;
  align-items     : center;
  background      : #787C95;
}

.outer {
  display         : -webkit-flex;
  display         : flex;
  justify-content : center;
  align-items     : center;
  flex-direction  : column;
}

#clock {
  font-family : Raleway, sans-serif;
  font-size   : 500%;
  color       : #FFF;
}

.buttons {
  height     : 80px;
  margin-top : 30px;
  display    : -webkit-flex;
  display    : flex;
  align-items: center;
}

.buttons > div + div {
  margin-left: 35px;
}

.buttons > div {
  position     : relative;
  z-index      : 1;
  cursor       : pointer;
  border-radius: 50%;
}

#play svg {
  position: absolute;
  top     : calc(50% - 18px);
  left    : calc(50% - 18px);
  width   : 36px;
  height  : 36px;
}


#pause, #play {
  width     : 60px;
  height    : 60px;
  background: none;
  border    : 4px solid #676c82;
  transition: background 200ms linear;
}
#pause:hover, #play:hover {
  background: #676c82;
}

#pause::before, #pause::after {
  content   : "";
  width     : 4px;
  height    : 35%;
  top       : 32.5%;
  background: #FFF;
  position  : absolute;
  
}
#pause::before {
  left : 35%;
}
#pause::after {
  left : 55%;
}

#stop {
  width     : 80px;
  height    : 80px;
  background: #F26C53;
  box-shadow: none;
  transition: all 100ms linear;
}
#stop:hover {
  background : #f1593d;
}
#stop:active {
  box-shadow : inset 0 2px 28px rgba(0,0,0,0.25), inset 0 2px 10px rgba(0,0,0,0.22);;
}
#stop:active::before {
  box-shadow: none;
}
#stop::before {
  content      : "";
  position     : absolute;
  top          : calc(50% - 14px);
  left         : calc(50% - 14px);
  background   : #FFF;
  width        : 28px;
  height       : 28px;
  border-radius: 5px;
  box-shadow   : 0 14px 18px rgba(0,0,0,0.11), 0 10px 10px rgba(0,0,0,0.12);
  transition   : box-shadow 100ms linear;
}

.by {
  position   : fixed;
  top     : 10px;
  left       : 10px;
  color      : #FFF;
  font-family: Raleway, sans-serif;
  font-size  : 14px;
}
.by span {
  font-weight: bold;
}

h1 {
  margin:0;
  text-align:center;
}





input[type='checkbox'] {
  display: none;
}
.wrap-collabsible {
}
.lbl-toggle {
  display: block;
  font-weight: bold;
  font-size: 1.2rem;
  text-transform: none;
  text-align: center;
  color: #DDD;
  background: rgba(128, 128, 128, 0);
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.25s ease-out;
}
.lbl-toggle:hover {
  color: #FFF;
}
.lbl-toggle::before {
  content: ' ';
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);
  transition: transform .2s ease-out;
}
.toggle:checked+.lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}
.collapsible-content {
  max-height: 0px;
  overflow: auto;
  transition: max-height .25s ease-in-out;
}
.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 350px;
}
.toggle:checked+.lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.collapsible-content .content-inner {
  background: grey(0, 105, 255, .2);
  border-bottom: 1px solid grey;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: .5rem 1rem;
}
.collapsible-content p {
  margin-bottom: 0;
}
    


.article {
  padding: 0 10% 0;
}