/* *********************************  Overall settings  ********************************* */

* {
	/* Makes boxes not exceed their spacing by default */
	box-sizing: border-box;

	/* Initializes padding for all items */
	padding: 0;

	/*Sets default text color */
	color: #111;

	/* Sets default font */
	font-family: "Lucida Console", "Courier New", Courier, monospace;

	/* Removes list-style unless specified */
	list-style: none;
}

body {
	/* Removes all margin for the body, helping fullwidth-items take up whole screen */
	margin: 0;

	/* Locks the background in place*/
	background-attachment: fixed;

	min-width: 320px;
	overflow-x: hidden;
}

main {
	/* Makes site start a bit below the Top nav, put everything in the middle + add a little space from footer */
	margin: 7rem auto 2rem;

	/* Helping footer stay at bottom */
	min-height: 75vh;

	/* Makes text take up 90% of width unless screen is very big */
	width: 90%;
	max-width: 60rem;
}

footer {
	/* Makes footer stick to bottom of screen */
	position: sticky;
	top: 100%;

	/* Makes text get some room from bottom*/
	padding: 0.5rem 0 1rem;

	background-color: #89abe3ff;
}

footer p {
	color: #000;
}

/* *********************************  Navigation menu  ********************************* */

#navbar {
	/* Makes navbar scroll with the document */
	position: fixed;

	/* Makes navbar start at top of document, fill width, sets height, background color, put it in front of everything */
	top: 0;
	width: 100%;
	height: 5.2rem;
	background-color: #89abe3ff;
	z-index: 10;
	overflow: hidden;

	/* Enable flex for logo and navbar */
	display: flex;

	/* Sets hamburger menu on the right */
	justify-content: space-between;
}

/* Hide the links inside the navigation menu (except for logo/home) */
#nav-list {
	display: none;
	top: 4.2rem;
	position: fixed;
	background: #fff7ef;
	text-align: center;
}

#nav-list li span {
	font-size: 1.5rem;
	color: #000;
}

#nav-list li {
	line-height: 3rem;
}
#nav-list li span {
	padding: 1rem 0;
	border-bottom: 2px solid white;
}

#nav-list li a,
#nav-list li span {
	font-size: 1.5rem;
	color: #000;
	display: block;
}

#nav-list li a.current,
#nav-list li a:hover,
#nav-list li a:focus {
	/* Change color on active or hover */
	background-color: #ea738dff;
}

#nav-list li a {
	text-decoration: none;
	text-transform: uppercase;
	width: 100%;
}

/* Navbar text */

#navtext {
	/* Makes sure on top of header, fix for firefox */
	z-index: 20;

	background: #e7e7e7;
	border: solid 5px black;
	border-radius: 10px;

	/* Center logotype & Bars vertically & horizontally */
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

#navtext p {
	font-size: 1.4rem;
	font-weight: bolder;
	font-family: "Times New Roman", Times, serif;
	text-shadow: 0 0 2px #ea738dff;
	padding: 0 1rem;
}

/* Navbar text END */

.invisible {
	display: none;
}

/* Upperleft Logo */
#logo-link,
#hamburger-btn {
	/* Decides width of link, height is set automatically */
	width: 5rem;

	/* Makes sure on top of header, fix for firefox */
	z-index: 20;

	background: #e7e7e7;
	border: solid 5px black;
	border-radius: 10px;

	/* Center logotype & Bars vertically & horizontally */
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;

	/* Animate colorchange */
	transition: 0.1s;
}

/* Hamburger menu button */
#hamburger-btn {
	/* Makes the button behave like a link */
	cursor: pointer;
}

#logo-link:active,
#logo-link:hover,
#logo-link:focus,
#hamburger-btn:active,
#hamburger-btn:hover,
#hamburger-btn:focus {
	/* Shows a different color on mouseover/click */
	background-color: #fff7ef;
	border-color: #1018de;
}

#logo-link #logo {
	height: 4rem;
	margin: auto;
}

.hamburger-bars {
	/* Sets appearance of lines in hamburger menu */
	width: 36px;
	height: 5px;
	background-color: #8494a5;
	margin: 3px auto;

	/* Animate colorchange */
	transition: 0.1s;
}

#hamburger-btn:hover .hamburger-bars,
#hamburger-btn:focus .hamburger-bars,
#hamburger-btn:active .hamburger-bars {
	background-color: #5058f2;
}

/* Rotate first bar */
#bar1.rotate {
	transform: rotate(-45deg) translate(-8px, 6px);
}

/* Fade out the second bar */
#bar2.rotate {
	opacity: 0;
}

/* Rotate last bar */
#bar3.rotate {
	transform: rotate(45deg) translate(-8px, -8px);
}

/* *********************************  Text Settings  ********************************* */

/* Class for making text centered */
.centered-text {
	text-align: center;
}

.error-msg {
	color: red;
	font-weight: bold;
}

h1 {
	font-size: 1.1rem;
	text-align: center;
	color: #000;
}

h2 {
	font-size: 1.25rem;
	text-align: center;
}

h3 {
	font-size: 1.2rem;
}

h4 {
	font-size: 1.1rem;
}

p,
li,
time,
adress,
figcaption,
div,
form,
input,
textarea,
a,
select {
	font-size: 1rem;
}

/* *********************************  Forms  ********************************* */

input[type="username"],
input[type="password"],
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="datetime-local"],
textarea,
select {
	width: 100%;
	padding: 0.8rem 0.6rem;
	box-sizing: border-box;
	margin: 0.8rem 0;
	border-radius: 5px;
	border: 2px solid grey;
}

input[type="username"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus,
input[type="checkbox"]:focus {
	background-color: #e6e6e6;
	border: 3px solid #106020;
}

#Todolist {
	width: 100%;
}

#Todolist li {
	justify-content: space-between;
	display: flex;

	padding: 1rem;
	margin: 0.5rem 0;
	font-size: 1.5rem;

	border-radius: 5px;
	border: 2px solid transparent;
}

#Todolist li:focus,
#Todolist li:hover,
#Todolist li:active {
	background-color: green;
	border-color: black;
}

input[type="checkbox"] {
	width: 1.2rem;
	height: 1.2rem;
}

/* *********************************  Buttons  ********************************* */
.btn-container {
	display: flex;
	justify-content: space-around;
}
.small-btn {
	background-color: #49525a;
	border: 4px solid black;
	color: #f8f8f8;
	padding: 1rem 2rem;
	text-align: center;
	text-decoration: none;
	/*display: inline-block;*/
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	border-radius: 10px;
}

.small-btn:hover,
.small-btn:active,
.small-btn:focus {
	/* Shows a different color on mouseover/click */
	background-color: #fff7ef;
	border-color: #1018de;
	color: #1018de;
}

/* **************************** FORM VALIDATE *****************/
fieldset {
	border: none;
}

.form-control small {
	color: red;
	bottom: 0;
	left: 0;
	visibility: hidden;
}

.form-control.error small {
	visibility: visible;
}

.form-control.success input {
	border-color: #2ecc71;
}

.form-control.error input {
	border-color: #e74c3c;
}

/* *********************************  Media queries  ********************************* */

@media all and (min-width: 1201px) {
	h1 {
		font-size: 3rem;
	}

	h2 {
		font-size: 2.3rem;
	}

	h3 {
		font-size: 1.8rem;
	}

	h4 {
		font-size: 1.5rem;
	}

	#navtext p {
		font-size: 2rem;
	}
}

@media all and (max-width: 600px) {
	.post-btns {
		display: flex;
		flex-direction: column;
	}

	.small-btn {
		margin: 0.2rem 3rem;
	}
}