html {
  font-size: min(4vw, 1rem);
}

h1 {
	font-size: 7em;
	font-family: Arial;
}
h2 {
	font-size: 5em;
	font-family: Arial;
}

.chores {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

button {
	border-radius: 20px;
	padding: 7px;
	font-size:20px;
	font-weight: bold;
	color: black;
	padding: 15px;
}
div.choreButton {
  border-radius: 55px;
  text-align: center;
  font-family: Arial;
  border-style: solid;
  border-width: 4px;
  max-width:80%;
  margin-left: 20px;
}
div.green {
	background: #65d765
}

div.yellow {
	background: #e8de49
}

div.red {
	background: #ee4d3c
}

.choreButton > p.name{
  	font-weight: bold;
	font-size: 3rem;
}

.choreButton > p.days-until {
	font-style: italic;
	margin-bottom: 0px;
	font-size: 3rem;
}

.choreButton > p.last-done{
	font-style: italic;
	margin-top: 0px;
	font-size: 3rem;
}