/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

body {
  font-family: serif;
  font-size:3em;
  background-color: #DDF1F6;
  color: #ffc2ad;
  display:grid;
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  vertical-align:center;
  margin: 0 1rem;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#timeText {
/*   display: flex; */
/*   justify-content: center; */
/*   align-items: center; */
  text-align:center;
  display: grid;
  align-items: center;  
}

#locationButton {
  position:absolute;
  top:20px;
  left:20px;

  background-color:rgba(255,255,255,0.25);
  border: none;
  color: rgba(0,0,0,0.25);
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  font-family:sans-serif,'Arial';
  font-size: 12px;
/*  margin: 0 15px;*/
  cursor: pointer;
  border-radius:20px;
  transition: background-color 1s;  
  box-shadow: 0 0 5px rgba(255,255,255,0.25);
}

#locationButton:hover {
  background-color:rgba(255,255,255,0.75);  
  transition: background-color 1s;
}

#locationButton:active, #locationButton:visited {
  background-color:rgba(255,255,255,0);  
  transition: background-color 1s;
}

#audioStart {
  position:absolute;
  bottom:20px;
  width:98%;
  text-align: center;
  font-family:sans-serif,'Arial';
  font-size:36px;
  color: rgba(255,255,255,0.25);
  align-self: end;
}

/* Text styling */
.current {
  -webkit-text-stroke-width: 0.75px;
  -webkit-text-stroke-color: red;  
}