#main {
  display:flex;
  align-items: center;
  justify-content:center;
  height: 100vh;
  min-height:500px;
  margin:auto;
}

main .timer-container{
  display:flex;
  justify-content:center;
  text-align:center;
  align-items: center;
  flex-wrap: wrap;
  width:90%;
}

main #timer-analog{
  margin:5px;
  width:100%;
}

main .timer-controller{
  margin:5px;
  width:100%;
}

main #timer-canvas {
  border: none;
}

main .timer-controller-row{
  margin:auto;
  width: 100%;
}

main #timer-digit {
  font-size: 1.5em;
  color: #696969;
  line-height: 2em;
}

main .timer-button {
  font-size: 1.2em;
  font-weight: bold;
  padding: 0.3em 1em;
  background-color: #008080;
  color: #fff;
  border-style: none;


  height:50px;
  margin-top:20px;

  /* ボタンの影の指定
   * 影の横幅を2px
   * 縦長を2px
   * ぼかしを3px
   * 広がりを1px
   * 色を#666（グレー）に指定 */
  box-shadow: 2px 2px 3px 1px #666;
  -moz-box-shadow: 2px 2px 3px 1px #666;
  -webkit-box-shadow: 2px 2px 3px 1px #666;
}

main .timer-button:hover {
  background-color: #66cdaa;
  color: #fff;
  cursor: pointer;
}

main .timer-button img{
  height: 20px;
}

/** 時間セットするボタン */
main .timer-set-button {
  font-size: 1.0em;
  font-weight: bold;
  padding: 0.5em 1em;
  background-color: #2f4f4f;
  color: #fff;
  border-style: none;
  max-width:90px;
  width: 20%;
  margin-top: 1em;

  /* ボタンの影の指定
   * 影の横幅を2px
   * 縦長を2px
   * ぼかしを3px
   * 広がりを1px
   * 色を#666（グレー）に指定 */
  box-shadow: 2px 2px 3px 1px #666;
  -moz-box-shadow: 2px 2px 3px 1px #666;
  -webkit-box-shadow: 2px 2px 3px 1px #666;
}

main .timer-set-button:hover {
  background-color: #66cdaa;
  color: #fff;
  cursor: pointer;
}


@media (orientation: landscape) {
  /* start, stop, retry */
  main .timer-button {
    height:60px;
    width:60px;
    max-width:100px;
  }

  /** 時間セットするボタン */
  main .timer-set-button {
    height:40px;
  }
}

@media (orientation: portrait) {

  /* start, stop, retry */
  main .timer-button {
    max-width:none;
    width:60px;
    height:60px;
  }

  /** 時間セットするボタン */
  main .timer-set-button {
    max-width:none;
    width:20%;
    height:60px;
    padding: 0;
  }
}