body {
  background-color: #6ebd6e;
}

.field {
  width: 1000px;
  border: 10px solid white;
  transform: translateX(-50%) translateY(-50%);
}

.field,
.half-line,
.grass {
  height: 600px;
}

.grass {
  width: 500px;
  height: 600px;
  background-color: #55cb55;
  border-left: 500px solid #0d560e;
}

.center-circle,
.half-circle {
  border: 4px solid white;
}

.big-goal-area,
.small-goal-area,
.goal {
  border-bottom: 4px solid white;
  border-top: 4px solid white;
}

.big-goal-area.left,
.small-goal-area.left,
.goal.right {
  border-right: 4px solid white;
}

.big-goal-area.right,
.small-goal-area.right,
.goal.left {
  border-left: 4px solid white;
}

.goal.left {
  left: -49px;
}

.goal.right {
  left: 1000px;
}

.center-circle,
.small-center-circle {
  transform: translate(-50%, -50%);
}

.center-circle {
  width: 150px;
  height: 150px;
}

.small-center-circle,
.penalty-mark {
  width: 12px;
  height: 12px;
}

.penalty-mark.left {
  left: 142px;
}

.penalty-mark.right {
  right: 142px;
}

.big-goal-area {
  width: 200px;
  height: 400px;
}

.small-goal-area {
  width: 90px;
  height: 200px;
}

.goal {
  width: 45px;
  height: 100px;
}

.half-circle {
  width: 60px;
  height: 120px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.half-circle.left {
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  border-left: 0;
  left: 200px;
}

.half-circle.right {
  border-bottom-left-radius: 100px;
  border-top-left-radius: 100px;
  border-right: 0;
  right: 200px;
}

.corner {
  width: 22px;
  height: 22px;
}

.center-circle,
.small-center-circle,
.penalty-mark.left,
.penalty-mark.right,
.corner.top-left,
.corner.top-right,
.corner.bottom-left,
.corner.bottom-right {
  border-radius: 50%;
}

.corner.top-left,
.corner.top-right {
  top: -10px;
}

.corner.bottom-left,
.corner.bottom-right {
  bottom: -10px;
}

.corner.top-left,
.corner.bottom-left {
  left: -10px;
}

.corner.top-right,
.corner.bottom-right {
  right: -10px;
}

.half-line {
  width: 4px;
}

.small-center-circle,
.penalty-mark,
.corner,
.half-line {
  background-color: white;
}

.half-line,
.center-circle,
.field {
  left: 50%;
}

.small-center-circle {
  left: 502px;
}

.penalty-mark,
.big-goal-area,
.small-goal-area,
.half-circle,
.goal {
  transform: translateY(-50%);
}

.center-circle,
.small-center-circle,
.penalty-mark,
.big-goal-area,
.small-goal-area,
.half-circle,
.goal,
.field {
  top: 50%;
}

.center-circle,
.small-center-circle,
.corner,
.half-line,
.penalty-mark,
.big-goal-area,
.small-goal-area,
.half-circle,
.goal,
.field {
  position: absolute;
}

img[alt="soccer-field"] {
  display: none;
}

@media (max-width: 1100px) {
  .field {
    display: none;
  }

  img[alt="soccer-field"] {
    display: block;
    margin-top: 100px;
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}