@charset "utf-8";
/* CSS Document

weltspilldag.lu
------------------------------------------------

colors
------------------------------------------------*/
:root {
	--color-1: #e1dd00; /* gelbgrün */
	--color-2: #fff; /* weiß */
	--color-3: #11288a; /* dunkelblau */
	--color-4: #73625d; /* hellbraun */ 
	--color-5: #e8e433; /* gelbgrün hell */
	--color-6: #f0ee7a; /* gelbgrün hell 2 */
	--color-7: #374b9d; /* dunkelblau hell */
	

}
body {background-color: var(--color-2); color: var(--color-3);}

@media screen and (min-width: 601px) {
body {/*background-image:url(../img/pfoten4.png), url(../img/hg2.jpg);*/
background-image:url(../img/hg2.jpg);
	background-position: center center;
	background-attachment: fixed;
background-size: cover;}
}
@media screen and (max-width: 600px) {
body {
background-image: url(../img/hg2-mobil.jpg);
}
}
.navv1{color: var(--color-7);}
.navv1:hover{color: var(--color-2);}
.red{color:red;}
h5{color:red; font-size: 21px;}
h3{color:red;}

/* fonts
--------------------------------------------------- */
body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;}


/* font-size
--------------------------------------------------- */
body {font-size: 21px; line-height: 150%;}
h1{font-size: 48px;}
h2{font-size: 26px;}
.h1big{font-size: 36px;}
.text30{font-size: 30px;}
.text24{font-size: 24px; line-height: 200%;}
#nav a{font-size: 21px; line-height: 0;}

@media screen and (max-width: 750px) {
	body {font-size: 18px;}
	h1{font-size: 24px;}
	h2{font-size: 21px;}
	h3{ font-size: 21px;}
	h5{ font-size: 18px;}
	.h1big{font-size: 28px;}
}

/* width
--------------------------------------------------- */
header{ padding: 0 20px;}

/*.fix{position: fixed; top:0; width: 100%}*/
.center1{ margin: 0 auto; width: 100%; background-color: #b3e5ca; text-align: center; line-height: 0;}
.center2{ margin: 0 auto; width: 100%; background-color: #b3e5ca; text-align: center; line-height: 0;}


.centerwidth1, .centerwidthindex{ margin: 0 auto; max-width: 860px; padding: 0 20px;}
.centerwidth2{ margin: 0 auto;	max-width: 1100px;	padding: 0 50px; }

.centerwidth3{ margin: 0 auto;	max-width: 100%; text-align: center;  background-color: #b3e5ca; }/*padding-top: 200px;*/

.centerfull{ width: 100%; padding: 15px 0; margin: 15px 0; }

@media screen and (max-width: 1280px) {
	.centerwidth1{ margin: 0; padding: 0 40px; max-width: 1200px; }
	.centerwidth2{ margin: 0 40px; max-width: 1200px; padding: 0 0px; }
	.centerwidthindex{ margin: 0 auto; max-width: 400px;}
}

/* basics
------------------------------------------------------------------------- */
 *{ margin:0; padding:0; }
/* scroll-behavior */ html {scroll-behavior: smooth;} 
/* Firefox-Bug */ a {outline:none;} a img {border:none;}
/* img responsive */  img {max-width: 100%; height: auto;}

body { text-align: center;}
#nav {margin: 10px 0 0 0;}
hr{margin: 15px 0;   border: 1px dashed #016f34;}

/* headings
------------------------------------------------------------------------- */

h1{ margin-bottom: 10px;}
.h1big{ display: inline-block; margin-bottom: 10px;}

/* links
------------------------------------------------------------------------- */
footer a{color: var(--color-2); text-decoration: none;}
footer a:hover{color: var(--color-4);}

/* buttons
------------------------------------------------------------------------- */
.button-1 {
	background-color:var(--color-3);
	border-radius:20px;
	display:inline-block;
	cursor:pointer;
	color:var(--color-2);
	font-size:24px;
	font-weight:bold;
	padding:10px 26px;
	margin: 20px 0 0 0;
	text-decoration:none;
	border: solid 0px var(--color-2);
	letter-spacing: 0.1em;
}
.button-2{ background-color:var(--color-3-l2);}
.button-1:hover { background-color:var(--color-7);	color:var(--color-2);}
.button-2:hover { background-color: #555;}
.button-1:active {position:relative; top:1px;}
.m-bottom{margin-bottom: 30px;}

@media screen and (max-width: 750px) {
.button-1 {
	border-radius:10px;
	font-size:18px;
}
}



/* sections
------------------------------------------------------------------------- */
#intro{text-align: center;}
footer{
	background-color: var(--color-3);
	padding: 50px;
	color: var(--color-2);
}

/* properties
------------------------------------------------------------------------- */
.fleft{float: left;}
.lineheight0{ line-height: 0;}

.corner1{border-radius: 10px; margin-right: 15px;}
.centertext{text-align: center;}
.bg1{background-color:var(--color-5);}
.round {border-radius: 100%;}
.lineheight0{line-height: 0px;}
.textleft{text-align: left;}
.spacer80{margin-bottom: 80px;}
.margin1{margin: 40px 0;}
.divider-h-1{height: 40px;}
.divider-ver-1{float: left; width: 25px;}

@media screen and (max-width: 440px) {
	.paddingtop1{padding-top: 30px;}
}

/* to top button
------------------------------------------------------------------------- */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {background-color: var(--color-6);}