/*===========================
	BODY - Allgemein
===========================*/
body, html {
	background-color: white;
	height: 100%;
	padding: 0% 2% 0% 2%;
	font-family: 'Karla', sans-serif;
}

h1{
	color:white;
	text-align:center;
	padding:20%;
	font-family: 'Karla', sans-serif;
}
/*===========================
	TOP-BAR
===========================*/
.top-bar, .top-bar ul {
    background-color: rgb(10, 10, 10);
}
a:hover, a {
    color: white;
}
/*===========================
	Parallax-Menu
===========================*/
.parallax{
	background-image: url("../bilder/bild1.jpg");
	height: 100%;
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}
/*============================
	DIV [ class="page"]
============================*/
.page {
	background-color: #f2f2f2;
	padding: 1%;
	border-left: solid rgb(10, 10, 10) 4px;
	border-right: solid rgb(10, 10, 10) 4px;
}
/*---------------------
	class="coloreda"
---------------------*/
.coloreda {
	color: black;
}
.coloreda:hover {
	color: blue;
}

.coloreda2 {
	color: blue;
}
.coloreda2:hover {
	color: red;
}
/*---------------------
	footer
---------------------*/
.footer {
	z-index: 10;
	background-color: rgb(10, 10, 10);
	color: white;
	text-align: center;
	padding: 1rem;
	width: 100%;
}
#footera {
	text-decoration: underline;
}
.uarhere {
	color: red;
}
.uarhere:hover {
	color: blue;
}
/*---------------------
	impressum
---------------------*/
.impressum {
	
}
/*============================
	Copy-Page
============================*/
.copybutton  {
	border: solid black;
	border-radius: 1rem;
	padding: 1rem;
}

.copytext {
	text-decoration: underline;
}
#copyhr {
	background-color: rgb(10, 10, 10);
	color: rgb(10, 10, 10);
	height: 2px;
	border: none;
	width: 100%;
	margin: 1.25rem auto;
}
/*============================
	Buttons
============================*/
/*----------------------------
	NOTE [button-id]:
	id: "w" or "wo" + 1 or 2 or 3 + _"number of button"
	example: id="w1_3"
	
	Copy-Dateien erhalten den gleichen Namen
	w1_3.html
----------------------------*/

/*=========================
	w_javascript_1.html
===========================*/
#w1_2 {
	
}
/*=========================
	wo_javascript_1.html
===========================*/
#wo1_1{
	background-color: rgb(209, 207, 202);
	padding: 1%;
}
#wo1_2{
	background-color: rgb(255, 208, 114);
	padding: 1%;
}
#wo1_3{
	border: solid rgb(57, 173, 140);
	padding: 1%;
}
#wo1_4-0 {
		background-color: rgb(221, 221, 15);
	border-radius: 0%;
	padding: 1%;
}
#wo1_4-1 {
	background-color: rgb(219, 109, 232);
	border-radius: 20%;
	padding: 1%;
}
#wo1_4-2 {
	background-color: rgb(247, 29, 102);
	border-radius: 50%;
	padding: 1%;
}
#wo1_5-0{
	background-color: rgb(20, 224, 13);
	border: solid rgb(20, 224, 13);
	padding: 1%;
}
#wo1_5-0:hover {
	background-color: #f2f2f2;
	border: solid rgb(20, 224, 13);
	padding: 1%;
}
#wo1_5-1 {
	background-color: #f2f2f2;
	border: solid rgb(255, 0, 25);
	padding: 1%;
}
#wo1_5-1:hover {
	background-color: rgb(255, 0, 25);
	border: solid rgb(255, 0, 25);
	padding: 1%;
}
/*=========================
	wo_javascript_2.html
===========================*/
#wo2_1 {
	border: solid black;
	border-radius: 1rem;
	padding: 1rem;
	color: black;
}
#wo2_2 {
	width: 10%;
}
#wo2_3 {
	border: solid rgb(96, 165, 90);
	padding: 1%;
	cursor: not-allowed;
}
#wo2_4 {
	background-color: rgb(234, 122, 21);
	padding: 1%;
	cursor: help;
}
#wo2_5{
	background-color: rgb(82, 197, 235);
	padding: 1%;
	cursor: pointer;
}
/*=========================
	wo_javascript_3.html
===========================*/
#wo3_1 {
	width: 4%;
}
#wo3_2 {
	width: 4%;
}
#wo3_3 {
	width: 4%;
}
#wo3_4 {
	width: 4%;
}
#wo3_5 {
	width: 4%;
}