body {
  background-color: #333;
  color: #0f0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding: 0px;
  margin: 0px; 
}

.container {
  width:80%;
  margin: 0px 0px 0px 40px;
  padding: 0px;
  margin-top: 0px;
  overflow: hidden;
}

#navcontainer {
  width:60%;
  margin: 0px 0px 100px 40px;
  min-height: 10px;
  padding-left: 10px;
  overflow: hidden;
  text-align: left;
  float:left;
}

.navbar{
  align-items: left;
  background-color: #555;
  padding-left: 30px;
  margin: 20px 0px 0px 0px;
  overflow: hidden;
}

.navbar ul {
  padding: 0px;
  margin: 0px;
}

.navbar li {
  display: inline;
  padding: 0px;
}

.navbar a {
  color:#0f0;
  text-decoration: none;
  font-size: 16px;
  padding: 0px 15px 0px 0px;
}

.nav-span a{
  float:right;
  padding-top: 8px;
  font-size: 10px;
}

.navbar a:hover {
  color:#080;
}

.useritem{
  float:right;
  font-size: 10px;
  text-decoration: underline;
}

.usersettings{
  float:right;
  background-color: #333;
  padding: 0px;
  margin: 0px 0px 0px 0%;
  font-size: 10px;
}

#userparagraph {
  background-color: #333;
  color:#0f0;
  text-decoration: none;
  font-size: 10px;
  text-align: right;
  margin: 10px 0px 0px 0%;
}

#userparagraph a {
  background-color: #333;
  color:#0f0;
  text-decoration: none;
  font-size: 10px;
  text-align: right;
  padding: 0px 20px 0px 0px;
}

#subtitlecontainer {
  margin: 0px 0px 0px 0px;
  background-color: #555;
  padding: 0px 0px 0px 30px;
  overflow: hidden;
}

#subtitle {
  width:100%;
  min-height: 10px;
  background-color: #555;
  padding: 0px;
  margin: 0px 0px 0px 0px;
}

#subtitle h1{
  font-size: 35px;
  text-align: left;
  padding:0px;
  margin: 0px 0px 0px 30px;
}

.maincontainer {
  width:80%;
  padding: 0px;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
}

#main {
  color: #fff;
  margin:0px 0px 0px 30px;
  padding:0px;
}

#main a:-webkit-any-link{
  color: #0f0;
  background-color: transparent;
  text-decoration: underline;
}

#main a:hover {
  color:#080;
  background-color: transparent;
  text-decoration: underline;
}

#main a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: underline;
}

#main a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

.footercontainer {
  width:97%;
}

#footer {
  background: #444;
  text-align: right;
  padding:0px;
  margin:200px 0px 0px 0px;
}

form {
  float:left;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px;
}

input[type=text], input[type=password] {
  text-align: left;
  width: 100%;
  padding: 10px 10px 10px 2px;
  margin: 5px 0px;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.regular-checkbox {
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
  position: relative;
}

.regular-checkbox:active, .regular-checkbox:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked {
	background-color: #0f0;
	border: 1px solid #0f0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #0f0;
}

.regular-checkbox:checked:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #555;
}

/* Set a style for all buttons */
button {
  background-color: #00FF00;
  color: black;
  font-size: 20px;
  padding: 5px 0px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 30%;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}

#buttonbox {
  width: 100%;
}

#cbgreen {
  float: left;
  width: 28px;
}

#cbtext {
  float: left;
  margin: 5px 0px;
}

#errormessage p{
  font-size: 20px;
  text-align: left;
  color: #f00;
  padding:0px;
  margin: 10px 0px;
}

/* Dropdown item */
.dropdown {
  color: #0f0;
  text-decoration: underline;
  font-size: 14px;
  margin: 0 20px 0 0; /* Adjust margin to position the item correctly */
  float: right;
  position: relative; /* Needed for absolute positioning of dropdown-content */
  cursor: pointer;
  z-index: 1;
}

.dropdown-content {
  display: none;
  border: 1px solid pink;
  position: absolute;
  background-color: #555;
  right: 0; /* Aligns the dropdown to the right */
  background-color: #555;
  min-width: 150px; /* Set minimum width for dropdown */
  z-index: 2; /* Ensures it appears above other content */
}

/* Style for dropdown links */
.dropdown-content a {
  color: white;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  text-align: left; /* Aligns text to the left */
}

/* Show the dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Hover effect on dropdown items */
.dropdown-content a:hover {
  background-color: #666;
}