@import url('https://fonts.googleapis.com/css?family=Roboto:300');

@font-face {
	font-family: 'Roboto', sans-serif;
}

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-size: 100%;
	font-family: 'Roboto', 'Tahoma', sans-serif;
  background: #F8F8FF;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header {
  width: 80%;
  margin: 0px auto;
  padding: 20px;
  text-align:center;
}

.headline {
  width: 80%;
  margin: auto;
  padding: 20px;
  text-align:center;
}

.header h1 {
	text-transform:uppercase;
	font-size:400%;
}

.header h2, .headline h2 {
	color: #C86A8A;
	font-size:150%;
	font-weight:bold;
	margin:0px;
	padding: 0px;
}

h2 {margin:10px;}

.content {
  width: 80%;
  margin: 0px auto;
  padding: 20px;
  text-align:center;
}

.content .homebutton a {
text-transform: uppercase;
font-size:150%;
  background:#FF8CB8;
  display:inline-block;
  padding:30px;
  margin:20px;
  width:25%;
  color:#fff;
  font-weight:bold;
  text-decoration:none;
}
.content .subhomebutton a {
text-transform: uppercase;
  background:#FF8CB8;
  display:inline-block;
  padding:10px;
  margin:10px;
  width:15%;
  color:#fff;
  font-weight:bold;
  text-decoration:none;
}

form {
  width: 30%;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #FF8CB8;
  background: white;
  border-radius: 10px;
  text-align:center;
}
.input-group {
  margin: 10px 0px 10px 0px;
}
.input-group label {
  display: block;
  text-align: left;
  margin: 3px;
}
.input-group input {
  height: 30px;
  width: 93%;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid gray;
}
.btn {
  padding: 10px;
  font-size: 15px;
  color: white;
  background: #FF8CB8;
  border: none;
  border-radius: 5px;
}


.smalltext {
  font-size: 10pt;
}
.container h4 {
  margin:30px 0 10px 0px;
  font-size:13pt;
  text-align:left;
  padding-left:30px;
  padding-bottom:2px;
  border-bottom:1px solid #FF8CB8;
}
h5 {
	font-size:18pt;
	font-weight:normal;
	margin:5px;
	font-family:'Cambria';
	font-style:italic;
}

button.btn {cursor:pointer;}

pre {
    background-color: #f4f4f8;  
    color: #222; 
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.95rem;
}

pre code {
    color: #222;
}



/* Dark Mode */
body.dark-mode {
  background: #121212;
  color: #e0e0e0;
  font-family: "Roboto","Tahoma",sans-serif;
  font-size: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .header,
body.dark-mode .headline {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

body.dark-mode .header h1 {
  text-transform: uppercase;
  font-size: 400%;
  color: #FF8CB8;
}

body.dark-mode .header h2,
body.dark-mode .headline h2 {
  color: #FFD1E0;
}

body.dark-mode .content {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

body.dark-mode .content .homebutton a,
body.dark-mode .content .subhomebutton a {
  background: #FF8CB8;
  color: #fff;
  border-radius: 5px;
}

body.dark-mode .content .homebutton a {
  text-transform: uppercase;
  font-size: 150%;
  display: inline-block;
  padding: 30px;
  margin: 20px;
  width: 25%;
  font-weight: bold;
  text-decoration: none;
}

body.dark-mode .content .subhomebutton a {
  text-transform: uppercase;
  display: inline-block;
  padding: 10px;
  margin: 10px;
  width: 15%;
  font-weight: bold;
  text-decoration: none;
}

body.dark-mode form {
  width: 30%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #FF8CB8;
  background: #1e1e1e;
  border-radius: 10px;
  text-align: center;
}

body.dark-mode .input-group label {
  color: #FFD1E0;
}

body.dark-mode .input-group input {
  height: 30px;
  width: 93%;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #555;
  background: #2c2c2c;
  color: #EEE;
}

body.dark-mode .btn {
  color: #fff;
  background: #FF8CB8;
  border-radius: 5px;
  cursor: pointer;
}

body.dark-mode .smalltext {
  color: #CCC;
}

body.dark-mode .container h4 {
  margin: 30px 0 10px 0;
  font-size: 13pt;
  text-align: left;
  padding-left: 30px;
  padding-bottom: 2px;
  border-bottom: 1px solid #FF8CB8;
  color: #FFD1E0;
}

body.dark-mode h5 {
  font-size: 18pt;
  font-weight: normal;
  margin: 5px;
  font-family: 'Cambria';
  font-style: italic;
  color: #FFD1E0;
}

body.dark-mode pre {
    background-color: #2b2b2b;
    color: #f0f0f0;
    border: 1px solid #444;
    padding: 10px;
    border-radius: 5px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.95rem;
}

body.dark-mode pre code {
    color: #f0f0f0;
}
body.dark-mode .nav-bar button {background:none;}

body.dark-mode th { background: #333333; }