/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@900&display=swap'); /* font-family: 'Zen Kaku Gothic Antique', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap'); /* font-family: 'Major Mono Display', monospace; */
@import url('https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap'); /* font-family: 'Rubik Wet Paint', cursive; */
@import url('https://fonts.googleapis.com/css2?family=Rubik+Microbe&display=swap'); /* font-family: 'Rubik Microbe', cursive; */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); /* font-family: 'Roboto Mono', monospace; */

/* Computer UI + Carry over to Mobile */

body {
  margin: 0;
  padding: 0;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

header {
  position: fixed;
  height: 8.5vh;
  width: 100%;
  background-color: #D3D3D3;
  border-radius: 0px 0px 10vh 10vh;
  z-index: 10;
}

#timerPannel, #alarmPannel {
  display: none;
}

.item {
  position: absolute;
  height: 8.5vh;
  width: 25%;
  background-color: inherit;
  transition: 0.25s;
}
.item1 { border-radius: 0 0 0 10vh; }
.item2 { left: 25%; }
.item3 { left: 50%; }
.item4 {
  left: 75%;
  border-radius: 0 0 10vh 0;
}

.item:hover {
  height: 9.5vh;
  background-color: #B3B3B3;
  cursor: pointer;
}

.timerInput, .timerDisplay, .stopwatchDisplay {
  position: fixed;
  left: 50%;
  top: 50%;
  font-size: 12.5vh;
  transform: translate(-50%, -70%);
}

#hours, #minutes, #seconds, .smallLabel, .gridDiv, #span1, #span2, #span3, #span4, #span5, #span6 {
  display: inline;
}

.stopwatch, #stopwatchPlayContainer, #stopwatchResetContainer, .timerDisplay {
  display: none;
}

#hours, #minutes, #seconds, #span1, #span2, #span3, #span4, #span5, #span6 {
  color: #FF0000;
  font-size: 12.5vh;
  width: 15vh;
  border: none;
  outline: none
}

#hours:hover, #minutes:hover, #seconds:hover {
  cursor: pointer;
  border-bottom: 0.5vh solid red;
}

.digital {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 20vh;
  width: 65vh;
  background-color: black;
  border-radius: 5vh;
  transition: 0.75s;
  color: red;
}

.digital:hover {
  cursor: default;
}

.display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 15vh;
  transition: 0.75s;
}

.ampm {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 4vh;
  transform: translate(-50%, 80%);
  transition: 0.75s;
}

.date {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 4vh;
  transform: translate(-50%, -185%);
  transition: 0.75s;
}

#settings {
  position: fixed;
  top: 0;
  left: -1vh;
  height: 1vh;
  width: 1vh;
  background-color: #B3B3B3;
  transition: 1.5s;
  z-index: 10;
}

.borderRadius {
  border-radius: 0 0 150vh 0;
}

label {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 5vh;
  transition: 0.25s;
  transform: translate(-50%,-50%);
}

.item:hover label {
  cursor: pointer;
  color: #36454F;
  font-size: 6vh;
}

#mobile {
  display: none;
}

.headerSVG {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  height: 8.5vh;
  width: 8.5vh;
  transition: 0.25s;
}

.item:hover .headerSVG {
  height: 9.5vh;
  width: 9.5vh;
}

#headerSVGleft, #headerSVGright {
  height: 6.375vh;
  width: 6.375vh;
}

.item:hover #headerSVGleft, .item:hover #headerSVGright {
  height: 7.375vh;
  width: 7.375vh;
}

#settings-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  height: 100%;
  width: 45%;
  display: none;
  transition: 0.5s;
}

.settingsHeading {
  text-align: left;
  font-size: 6.5vh;
  width: 100%;
  padding: 1vh;
}

.settingsHeading:hover {
  cursor: pointer;
}

.static {
  text-align: center;
  font-size: 7.5vh;
}

.static:hover {
  cursor: default;
}

.settingsLabel {
  font-size: 4vh;
  font-weight: bold;
  text-indent: 5vw;
  margin-top: 2vw;
}

.settingsButton {
  position: absolute;
  font-size: 4vh;
  right: 5vw;
  margin-top: -7vh;
  border: 0.5vh solid black;
  padding: 1vh;
  border-radius: 2.5vh;
  transition: 0.25s;
}

.settingsButton:hover {
  cursor: pointer;
  color: #36454F;
  border-color: #36454F;
}

#close-settings {
  position: fixed;
  right: 1.5vh;
  top: 0.75vh;
  font-size: 7.5vh;
  transition: 0.25s;
}

#close-settings:hover, .closeSwitcher:hover {
  cursor: pointer;
  color: grey;
}

.timerControls {
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  width: 60vh;
  transition: 1s;
  bottom: 27.9vh;
}

ul {
  display: flex;
  padding-left: 0;
  list-style: none;
  justify-content: space-around;
  align-items: center;
}

#startTimer:hover, #pauseTimer:hover, #addAlarm:hover, #resetTimer:hover, #startStopwatch:hover, #resetStopwatch:hover, #pauseStopwatch:hover, #remove:hover, #submit:hover, .cancelAlarm:hover, .snoozeAlarm:hover, #timerChange:hover, #focusMode:hover {
  cursor: pointer;
}

#addAlarm {
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  bottom: 3.5vh;
  height: 12.5vh;
  width: 12.5vh;
}

#focusMode {
  position: fixed;
  right: 2vh;
  bottom: 2vh;
  height: 11vh;
  width: 11vh;
}

hr {
  margin-top: 5vh;
  width: 85%;
}

.buildInfo {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  padding: 2.5vh;
  width: 100%;
  font-family: "Arial";
  font-weight: lighter;
  text-align: center;
  font-size: 2.5vh;
}

.buildInfo div {
  font-size: 2vh;
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
}

.buildInfo div a {
  color: #000;
}

.alarms-container {
  position: absolute;
  left: 50%;
  top: 8.5vh;
  height: 91.5vh;
  transform: translate(-50%);
  width: 65%;
  transition: 0.5s;
}

.alarm {
  position: relative;
  left: 50%;
  margin-top: 5vh;
  transform: translate(-50%);
  width: 50%;
  height: 20vh;
  background-color: #B3B3B3;
  border-radius: 5vh;
}

.buffer {
  background-color: #FFF;
  height: 15vh;
}

.alarmName {
  position: relative;
  left: 50%;
  top: 1.5vh;
  transform: translate(-50%);
  text-align: center;
  font-size: 5vh;
  width: 80%;
  border: none;
  border-bottom: 0.5vh solid #000;
  outline: none;
  background-color: #B3B3B3;
}

.alarmTime {
  position: relative;
  left: 50%;
  top: 2vh;
  transform: translate(-50%);
  text-align: center;
  font-size: 5vh;
  width: 80%;
  border: none;
  outline: none;
  background-color: #B3B3B3;
}

#remove {
  position: relative;
  top: 3vh;
  text-align: center;
  font-size: 2.5vh;
  color: #F00;
}

#submit {
  position: relative;
  top: -4vh;
  text-align: center;
  color: #00F;
  font-size: 3vh;
}

.printAlarmName {
  position: relative;
  left: 50%;
  top: 0.5vh;
  transform: translate(-50%);
  text-align: center;
  font-size: 5vh;
}

.printAlarmTime {
  position: relative;
  left: 50%;
  top: 1vh;
  transform: translate(-50%);
  text-align: center;
  font-size: 3vh;
}

#alarmActive {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  opacity: 99%;
  background-color: #000;
  display: none;
  z-index: 10;
}

.activeAlarmName {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-150%);
  font-size: 10vh;
  color: #FFF;
}

.activeAlarmTime {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: 15vh;
  color: #0F0;
}

.cancelContainer, .snoozeContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(50%,150%);
  background-color: #0F0;
  height: 10vh;
  width: 10vh;
  border-radius: 50%;
}

.snoozeContainer {
  background-color: #F00;
  transform: translate(-150%,150%);
}

.cancelAlarm, .snoozeAlarm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  height: 9vh;
  width: 9vh;
}

.switcher {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  height: 50vh;
  width: 40vh;
  background-color: #D3D3D3;
  border-radius: 5vh;
  display: none;
}

.switcherTitle {
  font-size: 4vh;
  font-weight: bolder;
  text-align: center;
  text-decoration: underline;
}

.switcherContainer {
  margin-top: 0vh;
  height: 40vh;
}

.closeSwitcher {
  position: absolute;
  font-size: 4.5vh;
  left: 50%;
  transform: translate(-50%);
  bottom: -0.5vh;
  transition: 0.25s;
}

.switcherOption {
  font-size: 3.5vh;
  text-align: center;
  transition: 0.25s;
}

.switcherOption:hover {
  cursor: pointer;
  color: grey;
}

.scroll {
  overflow-x: hidden;
  overflow-y: scroll;
}

.buttonSVG, .circleOnSVG, .barOnSVG, .coverSVG {
  transition: 0.25s;
}

.buttonSVG:hover .circleOnSVG, .buttonSVG:hover .coverSVG {
  fill: #B3B3B3;
}

.buttonSVG:hover .barOnSVG {
  fill: #000;
}

.settingsContainer {
  display: none;
}

li svg {
  height: 10vh;

}

.clear {
  background-color: #FFF;
}

.classicFont { font-family: 'Major Mono Display', monospace; }
.wetFont { font-family: 'Rubik Wet Paint', cursive; }
.arialFont { font-family: 'Arial'; }
.bubbleFont { font-family: 'Rubik Microbe', cursive; }
.robotFont { font-family: 'Roboto Mono', monospace; }
.defaultFont { font-family: 'Zen Kaku Gothic Antique', sans-serif; }

/* Changes because of different fonts */

.defaultFont .display {
  font-size: 15vh;
}

.robotFont .display {
  font-size: 12vh;
  transform: translate(-50%, -53%);
}

.arialFont .date {
  font-size: 3vh;
  transform: translate(-50%, -270%);
}

.arialFont .display {
  font-size: 14vh;
  transform: translate(-50%, -50%);
}

.arialFont .ampm {
  font-size: 3vh;
  transform: translate(-50%, 170%);
}

.arialFont .settingsButton {
  margin-top: -6vh;
}

.wetFont .date {
  font-size: 3vh;
  transform: translate(-50%, -250%);
}

.wetFont .display {
  font-size: 12vh;
  transform: translate(-50%, -50%);
}

.wetFont .ampm {
  font-size: 3vh;
  transform: translate(-50%, 150%);
}

.wetFont .settingsButton {
  margin-top: -6vh;
}

.classicFont .date {
  font-size: 4vh;
  transform: translate(-50%, -240%);
}

.classicFont .display {
  transform: translate(-50%, -55%);
  font-size: 10vh;
}

.classicFont .ampm {
  font-size: 4vh;
  transform: translate(-50%, 130%);
}

.classicFont .settingsButton {
  margin-top: -5.5vh;
}

.classicFont #settings-container{
  width: 50%;
}

.classicFont .timerInput, .classicFont .stopwatchDisplay {
  font-size: unset;
}

.bubbleFont .date {
  transform: translate(-50%, -200%);
}

.bubbleFont .display {
  transform: translate(-50%, -50%);
  font-size: 13vh;
}

.bubbleFont .ampm {
  transform: translate(-50%, 100%);
}

.bubbleFont .settingsButton {
  margin-top: -6vh;
}

/* Mobile UI */

@media screen and (max-width: 800px) {
  header {
    bottom: 2.5vh;
    border-radius: 10vh 10vh 0 0;
  }

  .settingsPadding, .timerPadding, .clockPadding, .alarmPadding {
    position: fixed;
    bottom: 0;
    height: 2.5vh;
    width: 25%;
    left: 0;
    background-color: #D3D3D3;
    transition: 0.25s;
  }

  .timerPadding { left: 25%; }
  .clockPadding { left: 50%; }
  .alarmPadding { left: 75%; }

  .item1:hover .settingsPadding { background-color: #B3B3B3; }
  .item2:hover .timerPadding { background-color: #B3B3B3; }
  .item3:hover .clockPadding { background-color: #B3B3B3; }
  .item4:hover .alarmPadding { background-color: #B3B3B3; }

  .item1 { border-radius: 10vh 0 0 0; }
  .item4 { border-radius: 0 10vh 0 0; }

  .item {
    bottom: 0vh;
  }

  #settings {
    top: initial;
    bottom: 0;
  }

  .borderRadius {
    border-radius: 0 150vh 0 0;
  }

  #mobile {
    display: block;
  }

  #computer {
    display: none;
  }

  .alarms-container {
    top: 0;
  }

  .alarm {
    width: 85%;
  }

  #addAlarm {
    bottom: 12.5vh;
  }

  #focusMode {
    left: 50%;
    transform: translate(-50%);
    bottom: 13.5vh;
  }

  #settings-container {
    width: 90%;
  }

  .alarms-container {
    width: 100%;
  }

  .digital {
    width: 90%;
  }

  .timerInput, .timerDisplay, .stopwatchDisplay {
    width: 100%;
    text-align: center;
  }

  #hours, #minutes, #seconds {
    font-size: 12.5vh;
    width: 13.5vh;
  }

  .timerDisplay {
    font-size: 6vh;
  }

  .settingsHeading {
    font-size: 5vh;
  }

  .settingsLabel {
    font-size: 3vh;
    margin-top: 5vw;
  }

  .settingsButton {
    font-size: 3vh;
    padding: 0.25vh;
    margin-top: -4.75vh;
  }

  .buildInfo {
    font-size: 1.5vh;
  }

  .timerControls {
    transform: translate(-50%);
    width: 45vh;
    bottom: 12.5vh;
  }

  .buffer {
    height: 20vh;
  }
  
  .ampm {
    transform: translate(-50%, 65%);
  }

  .date {
    transform: translate(-50%, -165%);
  }

  .gridDiv {
    display: block;
  }

  /*Fonts*/

  .defaultFont .display {
    font-size: 10vh;
  }

  .arialFont .date {
    font-size: 4vh;
    transform: translate(-50%, -190%);
  }

  .arialFont .display {
    font-size: 10vh;
    transform: translate(-50%, -50%);
  }

  .arialFont .ampm {
    font-size: 4vh;
    transform: translate(-50%, 100%);
  }

  .arialFont .settingsButton {
    margin-top: -4vh;
  }

  .classicFont #settings-container {
    width: 100%;
  }
  
  .classicFont .date {
    font-size: 4vh;
  }
  
  .classicFont .display {
    font-size: 7.5vh;
  }
  
  .classicFont .ampm {
    font-size: 4vh;
  }

  .classicFont .settingsHeading {
    font-size: 4.5vh;
  }

  .classicFont .settingsButton {
    margin-top: -3.5vh;
  }

  .classicFont .settingsLabel {
    font-size: 2.5vh;
  }

  .robotFont .date {
    font-size: 3vh;
    transform: translate(-50%, -220%);
  }

  .robotFont .display {
    font-size: 8vh;
  }

  .robotFont .ampm {
    font-size: 3vh;
    transform: translate(-50%, 120%);
  }

  .robotFont .settingsButton {
    margin-top: -5vh;
  }

  .robotFont #settings-container {
    width: 95%;
  }

  .wetFont .display {
    font-size: 8vh;
  }

  .wetFont #settings-container {
    width: 100%;
  }

  .wetFont .settingsButton {
    margin-top: -4.5vh;
  }

  .bubbleFont .date {
    transform: translate(-50%, -180%);
  } 

  .bubbleFont .display {
    transform: translate(-50%, -50%);
    font-size: 8vh;
  }

  .bubbleFont .ampm {
    transform: translate(-50%, 80%);
  }

  .bubbleFont .settingsButton {
    margin-top: -4vh;
  }

  .bubbleFont #settings-container {
    width: 99%;
  }

  .classicFont .timerInput, .classicFont .stopwatchDisplay {
    font-size: 12.5vh;
  }
}

#hours, #minutes, #seconds {
  position: relative;
  left: 1.5vh;
}

.smallLabel {
  position: relative;
  left: -1.5vh;
  font-size: 12.5vh;
}

/* Dark Mode UI */

/* Makes header SVGs white */
.dark .headerSVG path, .dark .headerSVG rect {
  fill: #f5f5f5;
}

.dark #focusPath {
  fill: #697074;
}

.dark #focusMode:hover #focusPath {
  fill: #36454F;
}

/* Colour for alarm creation menu */
.dark .alarm, .dark .alarmName, .dark .alarmTime {
  background-color: rgb(102, 109, 113);
  color: #f5f5f5;
}

/* Base background colours */
.dark body, .dark input, .dark .buffer {
  background-color: #292b2d;
  color: #f5f5f5;
}

/* Clock Display dark colour */
.dark .digital {
  background-color: rgb(6, 6, 6);
  color: rgb(255, 43, 43);
}

/* Header bar colour */
.dark header, .dark .alarmPadding, .dark .settingsPadding, .dark .clockPadding, .dark .timerPadding {
  background-color: rgb(76, 82, 85);
}

/* Hover effect for header, and backgroud of svg */
.dark .item:hover, .dark .circleOnSVG, .dark .coverSVG, .dark .item:hover .settingsPadding, .dark .item:hover .timerPadding, .dark .item:hover .clockPadding, .dark .item:hover .alarmPadding {
  background-color: #697074; fill: #697074;
}
.dark .buttonSVG:hover .circleOnSVG, .dark .buttonSVG:hover .coverSVG { fill: #697074; }
.dark .item:hover label, .dark .buildInfo div a { color: #f5f5f5; }
.dark #settings { background-color: rgb(102, 109, 113); }
.dark .switcher { background-color: rgb(76, 82, 85); }
.dark .settingsButton { border-color: rgb(206, 192, 170); }
.dark #remove { color: rgb(255, 43, 43); }
.dark #submit { color: rgb(79, 184, 255); }
.dark .clear { background-color: #292b2d; }

/* Washed out red colours */
.dark #span1, .dark #span2, .dark #span3, .dark #span4, .dark #span5, .dark #span6, .dark #hours, .dark #minutes, .dark #seconds  {
  color: rgb(255, 43, 43);
}

/* Custom Font stuff */

.defaultFont {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

.classicFont {
  font-family: 'Major Mono Display', monospace;
}

.wetFont {
  font-family: 'Rubik Wet Paint', cursive;
} 

.arialFont {
  font-family: 'Arial';
}

.bubbleFont {
  font-family: 'Rubik Microbe', cursive;
}

.robotFont {
  font-family: 'Roboto Mono', monospace;
}