stylesheet.css

@media screen {  

 
 * {  
  font-family: verdana,sans-serif;  
}

#VERSION{
  text-align: right;
  font-size: small;

  }

#tipps {
  font-size: 18;
  text-align: center;

  }

  #button{
    height:20px;
    width:40px;
    margin:0 auto;
    margin-right:10px;
    margin-top: 20px;
    float:left;
    border-radius: 5px;
}

#buttonColoum{
  height:20px;
  width:40px;
  margin-top: 20px;
  margin:0 auto;
  float:left;
  border-radius: 5px;

}


}

@media print{
  #VERSION, #tipps, #button, #buttonColoum {
    display: none;
    }

    * {  
      font-family: "times new roman",times,serif;  
    }
}

#date{
  text-align: center;

}

  #disclaimer{
    text-align: center;

  }


  .outerspace {
    overflow:auto;
  }
  .content {
    text-align: center;
    margin:0 auto;
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
  }

.Spieler1{
    position: relative;
    left: 50px;

}
.box1, .box2, .box3, .box4 {
     float: left;
     width:18%;
     margin-right: 2%;
     padding: 10px;
     background: var(--color-Box);
     box-sizing: border-box;
     line-height: 26px;
     margin-top: 10px;
     margin-bottom: 10px;
     min-width: 60px;
     box-shadow: 10px 10px 5px var(--color-BoxShadow);
     border-radius: 5px;
     max-width: 160px;

}

 .Kategorie {
     float: left;
     width:18%;
     margin-right: 2%;
     padding: 05px 10px 10px 5px;
     background: var(--color-Box);
     box-sizing: border-box;
     line-height: 26px;
     margin-top: 10px;
     margin-bottom: 10px;
     max-width: 100px;
     min-width: 50px;
     box-shadow: 10px 10px 5px var(--color-BoxShadow);
     border-radius: 5px;

}

.Title {
         font-size: 2em;
         text-align: center;
         border: 3px solid var(--color-Title);;
         font-weight: bold;

     }

#number {
  width: 3em;

}

#inputName {
  width: 6em;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;

}

#Categories{
  overflow: hidden;
  text-overflow: ellipsis;

}

#input1, #input2, #input3, #input4, #input5, #input6, #input7, #output, #inputDev1,#inputDev2, #inputDev3{
  width: 3em;

 }

#output{
    height:20px;
    width:40px;
    margin:0 auto;
    margin-right:10px;
    margin-top: 20px;
    float:right;
    border-radius: 5px;

}

  #styleMilitary {
    border: 3px solid red;
    text-align: center;
    vertical-align: middle;

  }

  #styleCoins {
    border: 3px solid gold;
    text-align: center;

  }

  #stylePyramid {
    border: 3px solid sandybrown;
    text-align: center;

  }

  #styleBlue {
    border: 3px solid rgb(12, 123, 228);
    text-align: center;

  }

  #styleYellow {
    border: 3px solid yellow;
    text-align: center;

  }

  #styleViolet {
    border: 3px solid rgb(164, 3, 185);
    text-align: center;

  }

  #styleGreen {
    border: 3px solid green;
    text-align: center;

  }

body {
    background-color: var(--color-BG);

}

#styleGreenDetail1, #styleGreenDetail2, #styleGreenDetail3, #styleGreenDetail4 {
    border: 3px solid green;
    text-align: center;
    
  }

  :root {

    --color-Title: #007DAB;
    --color2: #8dd1a4;
    --color-BoxShadow: #AD5C05;
    --color-Box: #F8DBBD;
    --color-BG: #83DEFF;
  }