/*myStyle.css*/

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

p { font-size: 1.5em; }


body{
  min-height: 100vh;
  display: grid;
  /*grid-template-columns: repeat(5, 1fr);*/
  grid: "head head "
        "main main"
        "main main"
        "foot foot"
        / 1fr 1fr;
  background-color: #151515;
  color: #f1f1f1;

  font-family:Lucida Sans Unicode;
  /*font-family: Garamond, serif;*/
  font-weight: normal;
}


@media (min-width: 30em) { 
  body{
    grid: "head head head "
          "main main main" 
          "main main main" 
          "foot foot foot"
          / 1fr  1fr 1fr;
    /*background-color: #ccc;*/


 }
}

@media (min-width: 50em) { 
  body{
    grid: "head head head" 200px
          "main main main"  1fr
          "main main main"  1fr
          "main main main"  1fr
          "foot foot foot" 50px
          / 1fr  1fr  1fr;
    /*background-color: #eee;*/
 }
}


header {
  grid-area: head;  
  /*grid-column: 1 / 6;
  grid-row:    1 / auto; 
  margin-bottom: 4em; 
  background-color: #020202;*/
  background-color: #151515;
  text-align: center;
}

h1{
  padding: 1em 1em 1em 1em;
}

a {
  background-color: #151515;
  color: #f1f1f1;
  text-decoration: none;
}

header ul {
  margin-bottom: 4em;
  text-align: center;
}

header li {
    display: inline;
    list-style-type: none;
}

main {
  grid-area: main;
  display: inline-grid;
  justify-content: center;
  /*grid-column: 2 / 5;
  grid-row:   2;  

  */      
}

main .header{
  text-align: center; 
}


footer {
  grid-area: foot; 
  background-color: #151515; 
  /*background-color: #45dd34;
  grid-column: 1 / 6;
  grid-row:    3;	*/				
}

footer div{
  text-align: center;
}

.ulBig{
  text-align: center;
  list-style-type: none;
}

.ulBig li p{
  padding: 10px 10px 10px 10px;
  border: 1px solid #ccc;
  margin: 20px;
  max-width: 200px;
}


article{
  text-align: center;
  justify-content: center;
  display: inline-grid;
}

#gettingStarted{
  margin-bottom: 6em;
  margin-top: 6em;
}

.pField{
  margin-bottom: 6em;
  margin-top: 6em;
  
}

.pField a{
  border: 1px solid #ccc;
  padding: 10px 10px 10px 10px;
  max-width: 200px;
}


.draggable { 
    /*width: 90px; 
    height: 90px; */
    padding: 0.5em; 
    float: left; 
    margin: 10px 10px 10px 0; 
    border: 1px solid #ccc;
    background-color: #006  ;
  }
.droppable,.droppableDropped { 
  /*
, 
  width: 120px; 
  height: 120px;
    */
  padding: 0.5em;
   float: left; 
   margin: 10px; 
  border: 1px solid #ccc;
}

.green{
  /*padding: 1em; */
  background-color: green;

}

.green, .green p,.green p p{
  background-color: green;
 /* font-size: 1.5em;*/
}

.red{
  background-color: red;
}

#result, #restart{
   display: none;
}

#restart{
  border: 1px solid #ccc;
  padding: 5px 5px 5px 5px;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

table#targets{
  /*font-size: 2em;*/
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

#zahlenblock, #zahlenblock div{
  float: left;
  border: 1px solid #ccc;
  padding: 2px 2px 2px 2px;
  display: inline;
}

#targets{
  float: left;
  display: inline;
}

tr.hiddenRow{
  display: none;
}

table#targets tr td{
  font-size: 2em;
}

div.lower p, div.greater p{
  font-size: 1em;
  padding: 2px 2px 2px 2px;
}

.cv{
  display: block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5em; 
}

.cv tr td{
  padding-left: 5px;
  padding-right: 5px;
}