/**{*/
/*  outline: 1px solid blue;*/
/*}*/

.skill{
  position: relative;
  margin: 100px auto 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 25% 20% 10% 20% 25%;
  grid-template-rows: 50px 300px;
}

.outer{
  margin-left: auto;
  margin-right: auto;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  padding: 20px;
  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
              -6px -6px 10px -1px rgba(255,255,255,0.7);
}

.inner{
  margin-left: auto;
  margin-right: auto;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
              inset -4px -4px 6px -1px rgba(255,255,255,0.7),
              0 12px 10px -10px rgba(0,0,0,0.05);
}

.number{
  text-align: center;
  font-weight: 600;
}

circle.all_circles{
  fill: none;
  stroke-width: 20px;
  stroke-linecap: butt;
}

svg.all_circles{
  margin-left: auto;
  margin-right: auto;
  rotate: 300grad;
}

.first_circle{
  grid-column: 2;
  grid-row: 2;
}

.second_circle{
  grid-column: 4;
  grid-row: 2;
}

.first_number{
  grid-column: 2;
  grid-row: 1;
}

.second_number{
  grid-column: 4;
  grid-row: 1;
}

@media (max-width: 800px) {

.skill{
  margin: 100px auto 100px auto;
  height: 500px;
  grid-template-columns: 100%;
  grid-template-rows: 50px 250px 50px 250px;
}

.first_circle{
  grid-column: 1;
  grid-row: 2;
}

.second_circle{
  grid-column: 1;
  grid-row: 4;
}

.first_number{
  grid-column: 1;
  grid-row: 1;
}

.second_number{
  grid-column: 1;
  grid-row: 3;
}

#aktAus{
  width: 200px;
}

}