:root{
    --rand:#3d3f45;
    --hellgrau: #f0f0f0;
    --silber:rgb(211, 211, 231);
    --schrift:white;
    --back: rgba(168, 192, 212, 0.74);
    --steine:#ebf8e1;
    --breite:400px;
    --klein:60px;
    --hoehe:400px;
    --button:#0e3849;
}
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
    height: 100vh; 
    background: linear-gradient(0.25turn, #0e3849, #8a9eb8);
}
h3{
    font-family: Arial, Helvetica, sans-serif;
    margin: 10px;
    margin-bottom: 10px;
    font-size: 1em;
    color: var(--schrift);
}
#brettContainer{
    width:var(--breite);
    height:var(--hoehe);
    border: 3px solid;
    display:grid; 
    grid-template-columns:var(--klein) var(--klein) var(--klein) var(--klein) var(--klein) var(--klein); 
    grid-gap: 6px;
    font-family: Arial, Helvetica, sans-serif;
    border: 3px solid;
    border-color: var(--rand);
    padding: 30px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;  /*mittig bleiben beim Ziehen*/
    background-color:var(--back);
}
#board{
  width: 450px;
  height: 450px;
  background-color: lightblue;
  border: 5px solid slategray;
  border-radius: 10px;
  margin: 0 auto;
  display:flex;
  flex-wrap: wrap;
}

.item:hover{
    cursor:pointer; 
}
.item{
    align-items: center;
    width: var(--klein);
    height:var(--klein);
    font-size: 3rem;
    text-align: center;
    background-color:var(--steine);
    border: 1px solid;
    color: rgb(20, 20, 22);
    margin-left: auto;
    margin-right: auto;
}
img{
  width: var(--klein);
  height: var(--klein);
  position: relative;
  top:2px;
}
#Button{
  font-family: "Permanant Marker", Arial , cursive;
  font-size: 18px;
  width: 30%;
  height: 50px;
  margin-left: 20px;
  margin-right: 20px;
  color: var(--schrift);
  background-color: var(--button);
  border: 4px solid;
  border-radius: 15px;
  cursor: pointer;
  border-color: var(--rand);
}


/*___________________________________________________________*/
.container{
    width: 95%;
    margin-left:auto;
    margin-right: auto;/*trick zum zentrieren*/
  }
  
  .row::after{
    content: "";
    clear:both;
    display:block;
  }
  [class*='col-']{
    float:left;
    min-height: 1px;
    padding: .8rem;
  }
  .col-1{width: 16.666%;}
  .col-2{width: 33.333%;}
  .col-3{width: 50%;    }
  .col-4{width: 66.66%;    }
  .col-6{width: 100%;background-color: aqua;}

  .flex-container{
    display: flex;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    justify-content:space-around;
    align-items: center;
  }
  @keyframes gross{    
    50%{transform:scale(0.7,0.7);}  
    100%{transform:rotatez(720deg);}
}
@keyframes dreh{
  10%{transform:translateX(50);}
    20%{transform:scale(1.2,1.2);}  
    50%{transform:rotateY(180deg);}
    80%{transform:rotatez(180deg);}
    90%{transform:scale(2.5,2.5);}
    100%{transform:skewY(120deg);}
}
@keyframes jump{
  90%{top: -20px}
  100%{top: 20px}
}
@keyframes neu{
  40%{transform:scale(0.5,0.5);}  
 80% {transform:skew(160deg);}
}