/* Light Theme */
@media (prefers-color-scheme: light) {
:root {
	--background: #fffee6;
	--foreground: #0f0f0e;
	--accent: #26A269;
	--link: #E7044C;
	--link-visited: #A43737;
}
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
:root {
	--background: #241F31;
	--foreground: #F6F5F4;
	--accent: #50C878;
	--link: #FD8BAF;
	--link-visited: #FB0452;
}
}

body {
	background: var(--background);
	color: var(--foreground);
	max-width: 800px;
	margin: auto;
	padding: 0 16px;
	font-family: 'Atkinson Hyperlegible', sans-serif;
}


a {
	color: var(--link);
	padding: 5px;
}

a:visited {
	color: var(--link-visited);
}

h1 {
	text-align: center;
}

footer {
	text-align: center ;
}

img {
	max-width: 600px ;
	width: 100% ;
	margin: auto ;
	display: block ;
}

ul {
	column-count: 3;
}

@media only screen and (max-width: 768px) {

	ul {
		column-count: 1;
	}
}

ul.recipe {
	column-count: 1;
}

form {
  /* Center the form on the page */
  margin: 0 auto;
  width: 500px;
  /* Form outline */
  padding: 1em;
  border-radius: 1em;
}

ul.form {
  list-style: none;
  padding: 0;
  margin: 0;
	column-count: 1;
}

form li + li {
  margin-top: 1em;
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  width: 90px;
  text-align: right;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

input,
textarea {

  /* Uniform text field size */
  width: 300px;
  box-sizing: border-box;

  /* Match form field borders */
  border: 1px solid #999;
  color: var(--foreground);
  background: var(--background);
}

input:focus,
textarea:focus {
  /* Additional highlight for focused elements */
  border-color: var(--accent);
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;

  /* Provide space to type some text */
  height: 5em;
}

.button {
  /* Align buttons with the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-left: .5em;
  padding      : 5px;
  border       : 2px solid var(--accent);
  border-radius: 5px;
  background   : var(--background);
  color: var(--foreground);
  cursor       : pointer;
}

button:hover,
button:focus {
	filter: drop-shadow(0 0 0.25rem var(--accent));
}