body {
 background-image: url(lichtung.jpg); 
  /* background-image: url(grass.jpg); */
}
#Links,#Rechts,#Hoch,#Runter,#Anzahl,#Loeschen {
  border-radius: 50%;
  transition: border-radius 1s;
} 
#Links:hover ,#Rechts:hover ,#Hoch:hover ,#Runter:hover ,#Loeschen:hover  {
  
  border-radius: 0%;
/* background-color: black; */
  
} 


/* #content{

} */
#Restart {

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8vw;
  width: 10vw;
  ; 
  height: 3vw;
  ;
  background: lightcoral;
  border: 2px solid black;
}

.standart {
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  height: 5.21vw;
  background: darkgreen;
  border: 2px solid black;
}

#r1, #r2, #r3, #r4, #r5, #rr, #statop {
  display: flex;
}

.win {
  display: flex;
  border-radius: 25%;
  justify-content: center;
  align-items: center;
  font-size: 2.3vw;
  width: 20vw;
  ;
  height: 3.5vw;
  ;
  background: green;
  border: 2px solid black;
}

.lose {
  border-radius: 25%;
  /* display: flex;
  justify-content: center;
  align-items: center; */
 
  width: 20vw;
  ;
  font-size: 2.3vw;
  height: 3.5vw;
  ;
  background: red;
  border: 2px solid black;
}

.l {
  border-radius: 25%;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  font-size: 2.3vw;
  width: 23vw;
  ;
  height: 3.5vw;
  ;
  background: rgb(238, 255, 0);
  border: 2px solid black;
}
.l:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 20%;
  border-bottom: 0;
  padding-bottom: .3em;
  text-decoration: none;
}
#animate {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
   /* border-radius: 50%; */
  width: 5.21vw;
  background-image: url("rund.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  height: 5.21vw;
  position: absolute;
   /* background-color: red;  */
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;

  
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.rechts {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: orange;
  border: 2px solid black;
}

.ziel {
  background-image: url("flagge.svg");
  background-size: 150%;
  /* background-repeat: no-repeat; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  /* background: green; */
  border: 2px solid black;
}

.stopp {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: black;
  border: 2px solid black;
}

.links {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: blue;
  border: 2px solid black;
}

.hoch {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: cyan;
  border: 2px solid black;
}

.runter {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: silver;
  border: 2px solid black;
}

#Anzahl {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: pink;
  border: 2px solid black;
}

#Loeschen {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: red;
  border: 2px solid black;
}






/*                   7777777777777777                             */
.wrapper{
  z-index: 1000;
  /* margin-left: 100px;
  margin-top: 10px; */
  /* width:100vw;
  height:100vh; */
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}
.my-super-cool-btn{
  position:relative;
  text-decoration:none;
  color:rgb(255, 255, 255);
  letter-spacing:1px;
  font-size:2rem;
  box-sizing:border-box;
}
.my-super-cool-btn span{
  position:relative;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100px;
  height:100px;
}
.my-super-cool-btn span:before{
  content:'';
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  border-radius:100%;
  border:7px solid #F3CF14;
  box-sizing:border-box;
  transition: all .85s cubic-bezier(0.25, 1, 0.33, 1);
  box-shadow: 0 30px 85px rgba(0,0,0,0.14), 0 15px 35px rgba(0,0,0,0.14);
}
.my-super-cool-btn:hover span:before{
  transform:scale(0.8);
  box-shadow: 0 20px 55px rgba(0,0,0,0.14), 0 15px 35px rgba(0,0,0,0.14);
}
.my-super-cool-btn .dots-container{
  opacity:0;
  animation: intro 1.6s;
  animation-fill-mode: forwards;
}
.my-super-cool-btn .dot{
  width:8px;
  height:8px;
  display:block;
  background-color:#F3CF14;
  border-radius:100%;
  position:absolute;
  transition: all .85s cubic-bezier(0.25, 1, 0.33, 1);
}
.my-super-cool-btn .dot:nth-child(1){
  top:50px;
  left:50px;
  transform:rotate(-140deg);
  animation: swag1-out 0.3s;
  animation-fill-mode: forwards;
  opacity:0;
}
.my-super-cool-btn .dot:nth-child(2){
  top:50px;
  right:50px;
  transform:rotate(140deg);
  animation: swag2-out 0.3s;
  animation-fill-mode: forwards;
  opacity:0;
}
.my-super-cool-btn .dot:nth-child(3){
  bottom:50px;
  left:50px;
  transform:rotate(140deg);
  animation: swag3-out 0.3s;
  animation-fill-mode: forwards;
  opacity:0;
}
.my-super-cool-btn .dot:nth-child(4){
  bottom:50px;
  right:50px;
  transform:rotate(-140deg);
  animation: swag4-out 0.3s;
  animation-fill-mode: forwards;
  opacity:0;
}
.my-super-cool-btn:hover .dot:nth-child(1){
  animation: swag1 0.3s;
  animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(2){
  animation: swag2 0.3s;
  animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(3){
  animation: swag3 0.3s;
  animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(4){
  animation: swag4 0.3s;
  animation-fill-mode: forwards;
}
@keyframes intro {
   0% {
     opacity:0;
  }
  100% {
     opacity:1;
  }
}
@keyframes swag1 {
   0% {
     top:50px;
     left:50px;
     width:8px;
  }
  50% {
    width:30px;
    opacity:1;
  }
  100% {
     top:20px;
     left:20px;
     width:8px;
     opacity:1;
  }
}
@keyframes swag1-out {
   0% {
     top:20px;
     left:20px;
     width:8px;
  }
  50% {
     width:30px;
    opacity:1;
  }
  100% {
     top:50px;
     left:50px;
     width:8px;
    opacity:0;
  }
}
@keyframes swag2 {
   0% {
     top:50px;
     right:50px;
     width:8px;
  }
  50% {
    width:30px;
    opacity:1;
  }
  100% {
     top:20px;
     right:20px;
     width:8px;
     opacity:1;
  }
}
@keyframes swag2-out {
   0% {
     top:20px;
     right:20px;
     width:8px;
  }
  50% {
     width:30px;
    opacity:1;
  }
  100% {
     top:50px;
     right:50px;
     width:8px;
    opacity:0;
  }
}
@keyframes swag3 {
   0% {
     bottom:50px;
     left:50px;
     width:8px;
  }
  50% {
    width:30px;
    opacity:1;
  }
  100% {
     bottom:20px;
     left:20px;
     width:8px;
     opacity:1;
  }
}
@keyframes swag3-out {
   0% {
     bottom:20px;
     left:20px;
     width:8px;
  }
  50% {
     width:30px;
    opacity:1;
  }
  100% {
     bottom:50px;
     left:50px;
     width:8px;
    opacity:0;
  }
}
@keyframes swag4 {
   0% {
     bottom:50px;
     right:50px;
     width:8px;
  }
  50% {
    width:30px;
    opacity:1;
  }
  100% {
     bottom:20px;
     right:20px;
     width:8px;
     opacity:1;
  }
}
@keyframes swag4-out {
   0% {
     bottom:20px;
     right:20px;
     width:8px;
  }
  50% {
     width:30px;
    opacity:1;
  }
  100% {
     bottom:50px;
     right:50px;
     width:8px;
    opacity:0;
  }
}






















#Rechts {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: orange;
  border: 2px solid black;
}

.ziel {
  background-image: url("flagge.svg");
  background-size: 150%;
  /* background-repeat: no-repeat; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  /* background: green; */
  border: 2px solid black;
}

.stopp {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: black;
  border: 2px solid black;
}

#Links {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: blue;
  border: 2px solid black;
}

#Hoch {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: cyan;
  border: 2px solid black;
}

#Runter {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  width: 5.21vw;
  ;
  height: 5.21vw;
  ;
  background: silver;
  border: 2px solid black;
}