/* bootstrap override */
html, body {
    background-color: #565352;

}
/* font and heading size depending on viewport size */
p {
  font-size: 2.5vh;
}
h1 {
  font-size: 4vh;
  text-align: center;
}
h3 {
  font-size: 3vh;
}
/* The site title config */
.container-fluid.float-right{
  display: flex;
  justify-content: flex-end;
  background-color: inherit;
  color: #f46b4a;
  font-size: 4vw ;
  font-weight: bold;
}
/* row and col for grid config */
.row {
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: space-around;
}
.col {
  display: flex;
  flex: auto;
  margin: auto;
  justify-content: space-around;
  align-items: center;
  max-width: 14.25%;
}

/* nav and anchors for links and navigation config */
nav {
  justify-content: flex-end;
  float: right;
}

a {
  color: #f46b4a;
}
a:focus, a:hover, a:visited a:active {
  color: #f9d914 !important;
  text-decoration: none;
}
.active{
  color: #f9d914 !important;
}
.visited{
  color: #f9d914 !important;
}
a.textlink{
  color: #565352;
}
/* form and button behaviour */
.form-control{
  background-color: #565352;
  color: #f9d914;
  border-color: #565352;
}
.btn-group{
  width: 50%
  display: inline-block;
  text-align: center;
  color: #f9d914;
}
.btn-primary  {
  color: #f9d914;
  background-color: #565352;
  border-color: #565352;
}
.btn-primary:visited{
  background-color: #f9d914 !important;;
  color: #565352;
  border-color: #565352;
}
.btn-primary:hover {
  background-color: #f9d914 !important;
  color: #565352;
  border-color: #565352;
}
.btn-primary:active {
  background-color: orange !important;
  color: #565352;
  border-color: #565352;
}
/* footer behaviour */
.panel-footer{
  color: #f9d914;
  text-align: center;
}
/* end bootstrap override*/

/* positioning the 7 virtues of Bushidō in the playground */
#playground {
    background-color: #f46b4a;
    min-width:200px;
    min-height:610px;
    padding: 1em;
    background-image: url("../img/bushido-n.png");
    background-repeat: no-repeat;
    border-radius: 3px;
    margin: .5em;
}

#cpanel {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

#abfrage{
  display: block;
  margin-bottom: 2px;
}
/*wrapper für die btn-group: https://stackoverflow.com/questions/9853815/how-to-center-btn-group-from-twitter-bootstrap*/
#controls{
  display: block;
  text-align: center;
  margin-top: 2px;
}
/* troop setup on stage */
#stage{
    max-width: 60%;
    color: black;
    display: grid;
    justify-items: center;
  }

#playground.container{
  overflow-x: hidden;
}

#stage.container{
  overflow: visible;
}

#comment{
  display: grid;
  align-content: center;
  margin: auto;
  text-align: center;
}
/* all images but big hattori */
.img-rounded:not(#hattori){
  width: 80px;
  height: 80px;
}

/* different sizes for different screens*/
@media screen and (max-width:1024px){
    #stage{
        max-width: 60%;
    }
    .img-rounded:not(#hattori){
        width: 50px;
        height: 50px;
    }
    /* .container-fluid.float-right {
        font-size: 3vh;
  } */
}

@media screen and (max-width:768px){
    #stage{
        max-width: 80%;
    }
    .img-rounded:not(#hattori){
      width: 35px;
      height: 35px;
    }
    #hattori{
      width: 80px;
      height: 80px;
    }
    .container-fluid.float-right{
      font-size: 5vw;
    }
}


/* Animationen */
@keyframes moveout {
  from {
        right: 0px;}
  to {
      right: -2500px;}
}
@-webkit-keyframes moveout {
  from {
        right: 0px;}
  to {
      right: -2500px;}
}
@keyframes movein {
  from {
        right: -2500px;}
  to {
      right: 0px;}
}
@-webkit-keyframes movein {
  from {
        right: -2500px;}
  to {
      right: 0px;}
}