/**************
|  style.css  |
**************/

/* Use a sane box model 
so borders/padding don't 
create overflow. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  background-color: rgba(174, 156, 136, 0.5);
  height: 100%;
}

body {
  width: 100%;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

/* form styles */

#form {
  font-family: Arial, Helvetica, sans-serif;
  border: solid 1px rgb(43, 27, 12);
  background-color: white;
  padding: 25px 10px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  margin: 0 auto;

  /* Allow it to shrink on small screens */
  width: min(250px, 92vw);
  display: block;
}

input {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin: 10px auto;
  padding: 10px 20px;
  font-size: 18px;

  /* Helps on tiny screens */
  max-width: 92vw;
}

input[type="date"] {
	background-color: rgb(255, 255, 184);
  border: solid 1px rgb(43, 27, 12);
  font-weight: bold;
	cursor: pointer;
}

input[type="button"] {
  text-shadow: 1px 1px 2px black;
  border: solid 1px rgb(43, 27, 12);
  background-color: rgb(195, 29, 41);
  color: rgb(255, 255, 184);
  letter-spacing: 1px;
  font-weight: bold;
  cursor: pointer;
}

input[type="button"]:hover {
  color: deepskyblue;
}

/* main styles */

#main {
  text-align: center;
  margin: 0 auto;

  /* Center content without forcing a fragile body height */
	min-height: 100vh;
  min-height: 100svh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
	
  /* Prevent content from kissing the border on small screens */
  padding: 20px 12px 10px 12px;
  gap: 0;  /* removes any implicit flex gap */
}

#message {
  color: rgb(43, 27, 12);
  text-shadow: none;
  font-size: 26px;
  padding: 10px;
  margin: 8px auto;
  max-width: 92vw;
}

#selector {
  width: 40px;
  margin-bottom: 2px;
  max-width: 15vw; /* let's it scale down if needed */
}

/* Make the wheel responsive instead of fixed pixels */
#wheel {
  width: min(700px, 92vw, 55vh);
  height: auto;
  border-radius: 50%;
  transform: rotate(0deg);
  display: block;
}

#wheel.spin {
  animation: spinToSign 2.5s ease-out forwards;
}

@keyframes spinToSign {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(var(--target-rotation));
  }
}

h1 {
  text-shadow: 2px 2px 2px black;
  color: rgb(195, 29, 41);
  margin: 8px 0 0 0;
  font-size: 40px;
  max-width: 92vw;
}

/* Minimal media tweaks */
@media (max-width: 480px) {
	h1 {
		font-size: 32px;
	}

	#message {
		font-size: 22px;
		margin: 14px auto;
	}

	#wheel {
		width: min(400px, 85vw);
	}

}