/* styles.css */

html, body {
  /* Apple trickery */
  background-color: black;
}

html {
  height: 100%;
}

body {
  /* Mobile compatibility */
  padding-top: env(safe-area-inset-top);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

h1 {
  font-size: clamp(3rem, 5vw, 4rem);
  line-height: 1.2;
  padding-bottom: 1rem;
}

h2 {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
}

label, input[type="name"] {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

#resultRow {
  height: 5rem;
  line-height: 2rem;
  align-content: center;
}

.resultActualBig {
  font-size: clamp(2rem, 6vw, 2.5rem);
  color: #D9D9D9;
}

.diceActual {
  font-size: clamp(3rem, 8vw, 4rem);
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

.footer::after {  
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: env(safe-area-inset-bottom);
  width: 100%;
  background-color: #000000;
}