body {
  /* display: block; */
  position: relative;
  margin: 0 auto;
  background-color: aquamarine;

  width: 100%;
  height: 100vh;

}
.gradient-background {

       background-color: hsl(102, 36%, 48%);
       background-image: radial-gradient(ellipse farthest-corner at left top, hsla(60, 64%, 40%, 0.77) 0%, hsl(120, 39%, 38%) 25%, hsl(10, 45%, 42%) 50%, hsla(217, 49%, 45%, 0.52) 75%, hsl(102, 36%, 48%) 100%);;


  /* background: radial-gradient(ellipse at center,  hsl(78,52%,73%) 0%,hsl(95,34%,57%) 44%,hsl(78,52%,73%) 81%,hsl(117,42%,36%) 100%); */
  /* background: linear-gradient(200deg,#cc1d1d,#48c4a4,#f3f96a,#b33096); */
  background-size: 240% 240%;
  /* animation: gradient-animation 8s ease-in-out infinite; */
  /* animation: gradient-rotate 5s linear infinite ; */
}


@keyframes gradient-rotate {
  0% { rotate: 0deg;}
  100%  {rotate: 360deg;}
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
 


/*Navigation Start */

.navBar{
    background-color: #8387f4; 
    }
  
  /*Floats each item to the left with padding of 14 & 16 px.
  Removes the underline with text decoration = none.*/
  .navBar a{
    float: left;
    color: aqua;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: "PoetsenOne";
    
  }
    /*Background color change during hover state*/
  .navBar a:hover{
    background-color: white;
    color: #1c0fd8;
    border: none;
    border-radius: 50% 50%;
  }
  
  /*Hides the menu Icon which will show when the nav needs to be responsive*/
  .navBar .icon{
    display: none;
  }
  
  /*Set your custom screen width here replacing 700*/
  @media (max-width: 700px){
  /*Ignores the first link (which is Home) in the div and       applies 'display = none' to everything else.   Basically hiding everything but Home*/
    .navBar a:not(:first-child){
      display: none;
    }
  /*Brings the menu icon into view and floats it to the right*/
    .navBar a.icon{
      display: block; float: right;
    }
    
  /*The navBar class will be changed to 'navBar responsive' using JS. This chunk of CSS makes the menu icon stay where it is by making the position absolute within it's parent 'right top corner'. Without this, the icon will get kicked around when the items are collapsed and expanded*/
    .navBar.responsive {
      position: relative;
    }
    .navBar.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    
  /*Removes the originally set float and brings them to view*/
    .navBar.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

  /*Navigatin Ende =====================================================   */

  /* ====================== News ======================*/
  /* (A1) FORCE ALL ITEMS INTO SINGLE ROW */
.hmove { display: flex; }
.hitem { width: 100%; flex-shrink: 0; }
.hwrap { overflow: hidden; }

/* (A2) MOVE ITEMS FROM RIGHT TO LEFT */
/* first item = 0, fourth item = -300% */
@keyframes tickerh {
  0% { transform: translatex(00%); }
  100% { transform: translatex(-500%); }
}
.hmove { animation: tickerh linear 20s infinite; }

.hmove:hover { animation-play-state: paused; }

/* (A3) COSMETICS - NOT IMPORTANT */
.hwrap {
  /* font-family: "Courier New", Courier, monospace; */
  color: #0eff66;
  /* background: #000; */
  /* max-width: 600px; highly recommended */
  max-width :;
}
.hitem { 
  padding: 10px;
  text-align: center;
  font-size:1.5em;
}
.hwrap, .hwrap * { box-sizing: border-box; }

/* (B1) UNIFORM ROW HEIGHT */
/* make sure enough height space */
.vwrap, .vitem { height: 80px; }
.vwrap { overflow: hidden; }

/* (B2) CENTER TEXT */
.vitem {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

/* (B3) MOVE ITEMS FROM TOP TO BOTTOM */
/* bottom 0 = first item, bottom 300% = fourth item */
.vmove { position: relative; bottom: 0; }
@keyframes tickerv {
  0% { bottom: -100%; }
  100% { bottom: 400%; }
}
.vmove { animation: tickerv linear 12s infinite; }
.vmove:hover { animation-play-state: paused; }

/* (B4) COSMETICS - NOT IMPORTANT */
.vwrap {
   font-family: "Courier New", Courier, monospace;
  color: #0eff66;
  background: #000; 
  max-width: 600px;
  margin-top: 0px;
}
.vitem { padding: 10px; }
.vwrap, .vwrap * { box-sizing: border-box; }

/* (X) NOT IMPORTANT */
.cbtitle{
 
}
.cbwrap{

  margin:;
  background-color:;
  width:;
  padding:;
  border-radius:20px;
-webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, inset -46px -10px 30px -3px rgba(206,255,98,0); 
box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, inset -46px -10px 30px -3px rgba(206,255,98,0);}

/* ================= Ende  News =============== */
hr {
  background-image:linear-gradient(to right, rgba(70, 130, 180, 0), rgba(70, 130, 180, 0.7), rgba(70, 130, 180, 0));
  border:0;
  height:2px;
}

.hr1 {
        
	width: 60% ;
	background-image: linear-gradient(to right, rgba(0, 255, 0, 0), rgba(0, 255, 0, 0.75), rgba(0, 255, 0, 0));
	}

.hr2 {
	
	width: 60%;
    background-image: radial-gradient(circle at 50% 50%, #0ec235, #33c835, #48cd35, #5ad336, #6ad936, #79de37, #87e438, #95e939, #a2ef3b, #b0f43d, #bdfa3f, #caff42);
    border:0;
    height: 2px;
}
.hr3 {
	width: 5%;
	height: 6px;
	position: relative;
	background-color: red;
	
	animation-name: Zylon-Eye;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;  
	animation-timing-function: linear;
   }


   @keyframes Zylon-Eye {
	 0%   {background-color:rgb(235, 15, 7); left:0%;width: 5%; top:0%;}
   25% {background-color: rgb(120, 6, 6);left:25%;width:10%;top:0%;}
	 50% {background-color: rgb(235, 15, 7);left:50%;width:10%;top:0%;}
   75% {background-color: rgb(120, 6, 6);left:75%;width:10%;top:0%;}
	 100% {background-color:rgb(235, 15, 7);left: 95%;width: 5%; top:0%;}
   }


   
   /* @keyframes example3 {
	 0%   {background-color:rgb(235, 15, 7); left:0%;width: 5%; top:0%;}
   25% {background-color: rgb(120, 6, 6);left:25%;width:10%;top:0%;}
	 50% {background-color: rgb(235, 15, 7);left:50%;width:10%;top:0%;}
   75% {background-color: rgb(120, 6, 6);left:75%;width:10%;top:0%;}
	 100% {background-color:rgb(235, 15, 7);left: 95%;width: 5%; top:0%;}
   }

 */


.container {
  background-color: black;
  font-family: PoetsenOne;
  text-align: center;
  position: relative;
  width: ;
  min-height: ;
  max-width: ;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}
.header {

background-color: #60a6ec;
  font-family: PoetsenOne;
  text-align: center;
  position: relative;
  width: ;
  max-width: 1200px;
  box-sizing: border-box;
  border-radius: 8px;
}
.text-container {
  height: ;
  width: ;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
}

.text-container h1{
  margin: 3px;
  font-size: 40px;
  color: #10477e;
  text-align: center;
  text-shadow: 2px 2px 0px rgb(0, 0, 0);
  
  
}
.text-container h2{
  margin: 3px;
  font-size: 30px;
  color: #10477e;
  /* background-image: url(/img/texthg_2.jpg);
  background-repeat: repeat; */
  /* -webkit-background-clip:text; */
  /* animation: animate 15s linear infinite; */
  text-align: center;
  text-shadow: 2px 2px 0px rgb(0, 0, 0)
  ;
  /* text-transform: uppercase; */
  
}

  @keyframes animate {
    0%, 100% {
      background-position: left top;
    }
    25%{
      background-position: right bottom;
     }
    50% {
      background-position: left bottom;
    }
    75% {
      background-position: right top;
    }   
}

.content {

background-color: #abb7c3;
}




.footer{
  position: relative;
  left: ;
  bottom: 0;
  width: 100%;
  background-color: #10477e;
  max-width: 1200px;
  display: block;
  color: aquamarine;
 
}

/* css für cards */


.card-container {
 /* pattern Background */ 
background-color: #60a6;
opacity: 0.8;
background-image: 
linear-gradient(30deg, #6eee10 12%, transparent 12.5%, transparent 87%, #6eee10 87.5%, #6eee10), 
linear-gradient(150deg, #6eee10 12%, transparent 12.5%, transparent 87%, #6eee10 87.5%, #6eee10),
linear-gradient(30deg, #6eee10 12%, transparent 12.5%, transparent 87%, #6eee10 87.5%, #6eee10),
linear-gradient(150deg, #6eee10 12%, transparent 12.5%, transparent 87%, #6eee10 87.5%, #6eee10),
linear-gradient(60deg, #6eee1077 25%, transparent 25.5%, transparent 75%, #6eee1077 75%, #6eee1077),
linear-gradient(60deg, #6eee1077 25%, transparent 25.5%, transparent 75%, #6eee1077 75%, #6eee1077);

background-size: 44px 77px;
background-position: 0 0, 0 0, 22px 39px, 22px 39px, 0 0, 22px 39px;
/* ende pattern Background */ 
display: flex;
flex-wrap: wrap;
gap: 1.5em; /* space between cards */
/* background: #60a6ec; */
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 1.5em;
color: aquamarine;

}

.card {
/*flex: 1 0 calc(33.333% - 4*10px); /* 3 Karten pro Reihe */
/* Alternativ Breite der Karte
width: 300px;
*/
flex: ;
max-width: 300px;
background: #0b1826;
padding: 20px;
aspect-ratio: 3 / 2;
text-align: center;
border-radius: 8px;
color: red;
box-shadow: #FFF 0 -1px 4px ;
 
}
 .card a{
  font-size: 1em;
  color: aqua;
 }
.card:hover {
 -webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, inset -46px -10px 30px -3px rgba(206,255,98,0); 
box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, inset -46px -10px 30px -3px rgba(206,255,98,0);
  transform: scale(1); 
}

/* @media (max-width: 766px) {
.card {
flex: 1 0 calc((100% - 20px) / 3); /* two per row 
}
} */

/* 
@media (max-width: 480px) {
.card {
flex: 1 0 100%; /* one per row 
}
}} */

.shapedimg {
	border: #DFB711 10px;
    border-style: double;
    border-radius: 38px;
    corner-shape: scoop;
	max-width: 90%;
	width: ;
	aspect-ratio:3 / 2;
}
.animate-world {
   text-transform: uppercase; 
 /*  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
    background: #2A7B9B; */
background-image: linear-gradient(-225deg,
rgba(42, 123, 155, 1) 0%,
 rgba(144, 80, 72, 1) 15%,
  rgba(26, 217, 86, 1) 27%,
   rgba(77, 30, 232, 1) 40%,
    rgba(186, 71, 157, 1) 52%,
     rgba(237, 83, 137, 1) 65%,
      rgba(132, 83, 237, 1) 75%,
       rgba(139, 237, 83, 1) 88%,
        rgba(83, 211, 237, 1) 98%);
  
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip-world 3s infinite ease-in-out reverse;
  display: inline-block;
      /* font-size: 190px; */
}

@keyframes textclip-world{
  to {
    background-position: 200% center;
  }
}