/* Modern reset: https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Prevent zooming when orientation changes on some iOS devices */
html {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Global */

body {
	background-color: #FFD42A;
	font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

header {
	background-color: white;
}


/* Home */

.home-alert {
	position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	text-align: center;
	font-size: 1.4rem;
	padding: 40px;
	background-color: white;
	border-radius: 3px;
}

.projects-list {
	margin: 32px;
	padding: 32px;
	background-color: white;
	border-radius: 3px;
}

.projects-list ul li {
	padding: 8px;
}

/* Header */

.logo {
	padding: 16px;
}


/* Navigation */

.navigation {
	display: flex;
	justify-content: space-between;
	padding: 16px;
	background-color: #EF4444;
	color: white;
}

.navigation a {
	color: white;
	text-decoration: none;
}

.navigation a:hover {
	text-decoration: underline;
}

.navigation h1 {
	font-size: 1rem;
}


/* Tasks */

.tasks {
	display: flex;
}

.tasks h2 {
	text-align: center;
}

.opened-tasks {
	padding: 32px;
	background-color: #FFD42A;
	width: 50%;
	height: 100vh;
}

.opened-tasks h2 {
	color: #111111;
}

.closed-tasks {
	padding: 32px;
	width: 50%;
	min-height: 100vh;
	height: auto;
	background-color: #111111;
	color: white;
}

.closed-tasks ul li a {
	color: #FFD42A;
	text-decoration: none;
}

.closed-tasks ul li a:hover {
	text-decoration: underline;
}

.closed-tasks h2 {
	color: #FFD42A;
	padding-bottom: 32px;
}

.closed-tasks-empty {
	color: #94A3B8;
	margin-left: 16px;
}

.feedback, .action {
	margin: 32px 0;
	padding: 16px;
	border-radius: 3px;
	background-color: white;
	color: #94A3B8;
}

.feedback ul li a, .action ul li a {
	text-decoration: none;
}

.feedback ul li a:hover, .action ul li a:hover {
	text-decoration: underline;
}

.feedback h3, .action h3 {
	color: #EF4444;
}

/* Form message */

.form-message {
	padding: 32px;
	background-color: #111111;
	color: #FFD42A;;
}

.honeypot {
	display: none;
}

.f_published_message {
	width: 100%;
}

.f_published_message {
	margin: 16px 0;
	padding: 16px;
}

.messages {
	padding: 32px;
	background-color: #FFD42A;
	min-height: 100vh;
	height: 100%;
}

.messages h2, .messages h3 {
	text-align: center;
}

.messages h3 {
	font-size: 1rem;
}

.messages h3 > a {
	text-decoration: none;
}

.messages h3 > a:hover {
	text-decoration: underline;
}

.submit-button {
	background-color: #EF4444;
	color: white;
	border-radius: 3px;
	border: 0;
	padding: 8px;
	margin: 16px 0;
}

.submit-button:hover {
	background-color: #EF1111;
	cursor: pointer;
}

.message-feedback {
	background-color: white;
	border-radius: 4px;
	padding: 16px;
	margin: 32px 0;
	width: 60%;
	margin-left:auto;
}

.message-action {
	background-color: #E2E8F0;
	border-radius: 4px;
	padding: 16px;
	margin: 32px 0;
	width: 60%;
}

.message-feedback p, .message-action p {
	padding: 8px 16px;
}

.message-feedback h1, 
.message-action h1,
.message-feedback h2, 
.message-action h2,
.message-feedback h3, 
.message-action h3,
.message-feedback h4, 
.message-action h4,
.message-feedback h5, 
.message-action h5 {
	text-align: left;
}

.message-metadata {
	display: flex;
	justify-items: center;
	color: #94A3B8;
	font-size: 0.9rem;
}

.message-metadata img {
	border-radius: 4px;
	margin-right: 16px;
}

.newtasks h2 {
	margin: 20px auto;
	width: 100%;
	text-align: center;
}

.newtasks .form-message {
	height: 80vh;
}

.newtasks input,
.newtasks textarea {
	width: 100%;
	margin: 15px 0;
}

.newtasks .submit-button {
	width: auto;
	margin: 15px 0;
}

.create-new-task {
  text-decoration: none;
}

.create-new-task:hover {
  text-decoration: underline;
}

/* Media queries */

@media ( max-width: 800px ) {
  
  .navigation, .tasks {
		display: block;
	}

	.closed-tasks, .opened-tasks {
		width: 100%;
		height: auto;
	}

	body {
		height: auto;
		min-height: auto;
	}

	.messages {
		height: auto;
		min-height:100%;
	}

	.message-action, .message-feedback {
		width: 100%;
	}

}