@charset "UTF-8";
/* CSS Document */
html{
	background: #7b573e;
	-webkit-font-smoothing: antialiased;
}

body{
	background: #5e1211;
	box-shadow: 0 0 2px rgba(0,0,0,0.06);
	color: #d8c6b8;
	padding: 20px;
	margin: 0 auto;
	max-width: 1040px;
}

hr{
	display: block;
	margin-before: 0.5em;
	margin-after: 0.5em;
	margin-start: auto;
	margin-end: auto;
	border-spacing: solid;
	border-width: 100%;
	height: 5px;
	background-color: #d8c6b8;
}

ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #d8c6b8;
	border: 5px solid #7b573e;
}

li{
	display: inline;
	float: left;
}

li a{
	display: block;
	color: #5e1211;
	text-align: center;
	padding: 14px 92.05px;
	text-decoration: none;
}

/* unvisited link */
a:link {
  color: #5e1211;
}

/* visited link */
a:visited {
  color: #585858;
	
}

/* mouse over link */
a:hover {
  color: #d8c6b8;
	background-color: #cf1c44;
}

/* selected link */
a:active {
  color: #5e1211;
	background-color: #cf1c44;
}

/* add a #7b573e right border to all list items, except the last item (last child) */
li{
	border-right: 3px solid #7b573e;
}

ul{
	position: -webkit-sticky; /* Safari */
  	position: sticky;
	top: 10px;
}

h1{
	align-content: center;
	border: 5px solid #7b573e;
	width: 460px;
	height: 260px;
	padding: none;
	margin-left: 270px;
	margin-top: 5px;
}

h2{
	text-align: center;
	font-size: 50px;
	font-style: normal;
	font-variant: small-caps;
	color:#7b573e;
	font-family: "Gaudy Old Style";
	text-shadow: -1px 0 #d8c6b8, 0 1px #d8c6b8, 1px 0 #d8c6b8, 0 -1px #d8c6b8, 4px 4px 6px #d8c6b8;
}

/* style star container */
.checked{
	color: orange;
}

/* style inputs, select elements and text areas */
input [type=text], select, row, textarea{
	width: 97%;
	padding: 12px;
	border: 1px solid #5e1211;
	border-sizing: border-box;
	border-radius: 4px;
	resize: vertical;
}

/* style the label to display next to inputs */
label{
	padding: 12px 12px 12px 12px;
	display: inline-block;
}

/* style the submit button */
input [type=submit]{
	background-color: #5e1211;
	color: #5e1211;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	float: right;
}

/* style the container */
.container{
	border-radius: 5px;
	background-color: #d8c6b8;
	border: 5px solid #7b573e;
	color: #5e1211;
	padding: 20px;
}

/* float column for labels: 25% */
.row: after{
	float: left;
	width: 75%;
	margin-top: 6px;
	background-color: #d8c6b8;
	width: 1000px;
}

/* floating column for inputs: 75% width */
.col-75{
	float: left;
	width: 75%;
	margin-top: 6px;
	background-color: #5e1211;
	width: 1000px;
}

/* clear floats after the columns */
.row: after{
	content: "";
	display: table;
	clear: both;
}

/* responsive layout - when the screen is less than 600px wide, make the top columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px){
	.col-25, .col-75, input [type=submiy]{
		width: 100%;
		margin-top: 0;
	}
}

/* Style the container with a rounded border, grey background and some padding and margin */
.container {
  border: 5px solid #7b573e;
  background-color: #d8c6b8;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}

/* Clear floats after containers */
.container::after {
  content: "";
  clear: both;
  display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
	border: 3px solid #7b573e;
}

/* Increase the font-size of a span element */
.container span {
  font-size: 20px;
  margin-right: 15px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }

  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}
	
* {
  box-sizing: border-box;
}

body {
  font-family: "klinic Slab Book";
  margin: 0 auto; /* Center website */
  max-width: 1040px; /* Max width */
  padding: 20px;
}

.heading {
  font-size: 25px;
  margin-right: 25px;
}

.fa {
  font-size: 25px;
}

.checked {
  color: orange;
}

/* Three column layout */
.side {
  float: left;
  width: 15%;
  margin-top: 10px;
}

.middle {
  float: left;
  width: 70%;
  margin-top: 10px;
}

/* Place text to the right */
.right {
  text-align: right;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The bar container */
.bar-container {
  width: 100%;
  background-color: #D8C6B8;
  text-align: center;
  color: #7b573e;
}

/* Individual bars */
.bar-5 {width: 60%; height: 18px; background-color: #4CAF50;}
.bar-4 {width: 30%; height: 18px; background-color: #2196F3;}
.bar-3 {width: 10%; height: 18px; background-color: #00bcd4;}
.bar-2 {width: 4%; height: 18px; background-color: #ff9800;}
.bar-1 {width: 15%; height: 18px; background-color: #f44336;}

/* Responsive layout - make the columns stack on top of each other instead of next to each other */
@media (max-width: 400px) {
  .side, .middle {
    width: 100%;
  }
  /* Hide the right column on small screens */
  .right {
    display: none;
  }
}