body{
  background: linear-gradient(to bottom, #34620D, #499014);
  background-size: cover;
  font-family: 'Lato', sans-serif;
}
header{
  background-color: #499014;
  background-image: url("https://images.pexels.com/photos/274506/pexels-photo-274506.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
}
h1{
  margin: 0;
  padding: 3rem 1rem;
}
img {
  width: 70px;
}
div{display: block}
a{
  color:white;
}
p{
  margin: 0;
}
.jugadores {
  margin: 1rem;
}

.jugadores div {
  margin: 0.5rem;
}

.football-grid {
  width: 100%;
  background-color: transparent;
  display: flex;
  justify-content: center;
}

.player {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.player:last-of-type {
  flex-basis: 100%;
}

.field {
  margin: 2rem;
  background-image:url("../img/field.jpg");
  background-size: cover;
  height: 1142px;
    width: 800px; /*width-to-length ratio of 0.625*/
  display: flex;
  flex-wrap: wrap;
}

/* ---------   3-4-3  ---------- */
.p1, .p2{
  padding: 0
}

._3-4-3 .p1, ._3-4-3 .p2, ._3-4-3 .p3 {
  flex-basis: 33.3333%;
}

._3-4-3 .p4, ._3-4-3 .p5, ._3-4-3 .p6, ._3-4-3 .p7 {
  flex-basis: 25%;
}

._3-4-3 .p8, ._3-4-3 .p9, ._3-4-3 .p10 {
  flex-basis: 33.3333%;
}

/* ---------   4-3-3  ---------- */

._4-3-3 .p1, ._4-3-3 .p2, ._4-3-3 .p3, ._4-3-3 .p4 {
  flex-basis: 25%;
}

._4-3-3 .p5, ._4-3-3 .p6, ._4-3-3 .p7 {
  flex-basis: 33.3333%;
}

._4-3-3 .p8, ._4-3-3 .p9, ._4-3-3 .p10 {
  flex-basis: 33.3333%;
}

/* ---------   2-5-3  ---------- */

._2-5-3 .p1, ._2-5-3 .p2 {
  flex-basis: 50%;
}

._2-5-3 .p3, ._2-5-3 .p4, ._2-5-3 .p5, ._2-5-3 .p6, ._2-5-3 .p7 {
  flex-basis: 20%;
}

._2-5-3 .p8, ._2-5-3 .p9, ._2-5-3 .p10 {
  flex-basis: 33.3333%;
}

/* ---------   2-1-4-3  ---------- */

._2-1-4-3 .p1, ._2-1-4-3 .p2 {
  flex-basis: 50%;
}

._2-1-4-3 .p3 {
  flex-basis: 100%;
}

._2-1-4-3 .p4, ._2-1-4-3 .p5, ._2-1-4-3 .p6, ._2-1-4-3 .p7 {
  flex-basis: 25%;
}

._2-1-4-3 .p8, ._2-1-4-3 .p9, ._2-1-4-3 .p10 {
  flex-basis: 33.3333%;
}

/* ---------   3-3-4  ---------- */

._3-3-4 .p1, ._3-3-4 .p2, ._3-3-4 .p3 {
  flex-basis: 33.3333%;
}

._3-3-4 .p4, ._3-3-4 .p5, ._3-3-4 .p6 {
  flex-basis: 33.3333%;
}

._3-3-4 .p7, ._3-3-4 .p8, ._3-3-4 .p9, ._3-3-4 .p10 {
  flex-basis: 25%;
}

/* ---------   1-3-2-4  ---------- */

._1-3-2-4 .p1 {
  flex-basis: 100%;
}

._1-3-2-4 .p2, ._1-3-2-4 .p3, ._1-3-2-4 .p4 {
  flex-basis: 33.3333%;
}

._1-3-2-4 .p5, ._1-3-2-4 .p6 {
  flex-basis: 50%;
}

._1-3-2-4 .p7, ._1-3-2-4 .p8, ._1-3-2-4 .p9, ._1-3-2-4 .p10 {
  flex-basis: 25%;
}

/* ---------   2-2-2-4  ---------- */

._2-2-2-4 .p1, ._2-2-2-4 .p2 {
  flex-basis: 50%;
}

._2-2-2-4 .p3, ._2-2-2-4 .p4 {
  flex-basis: 50%;
}

._2-2-2-4 .p5, ._2-2-2-4 .p6 {
  flex-basis: 50%;
}

._2-2-2-4 .p7, ._2-2-2-4 .p8, ._2-2-2-4 .p9, ._2-2-2-4 .p10 {
  flex-basis: 25%;
}

/* ---------   2-4-4  ---------- */

._2-4-4 .p1, ._2-4-4 .p2 {
  flex-basis: 50%;
}

._2-4-4 .p3, ._2-4-4 .p4, ._2-4-4 .p5, ._2-4-4 .p6 {
  flex-basis: 25%;
}

._2-4-4 .p7, ._2-4-4 .p8, ._2-4-4 .p9, ._2-4-4 .p10 {
  flex-basis: 25%;
}

/* ---------   1-5-4 ---------- */

._1-5-4 .p1 {
  flex-basis: 100%;
}

._1-5-4 .p2, ._1-5-4 .p3, ._1-5-4 .p4, ._1-5-4 .p5, ._1-5-4 .p6 {
  flex-basis: 20%;
}

._1-5-4 .p7, ._1-5-4 .p8, ._1-5-4 .p9, ._1-5-4 .p10 {
  flex-basis: 25%;
}

/* ---------   2-1-3-4  ---------- */

._2-1-3-4 .p1, ._2-1-3-4 .p2 {
  flex-basis: 50%;
}

._2-1-3-4 .p3 {
  flex-basis: 100%;
}

._2-1-3-4 .p4, ._2-1-3-4 .p5, ._2-1-3-4 .p6 {
  flex-basis: 33.3333%;
}

._2-1-3-4 .p7, ._2-1-3-4 .p8, ._2-1-3-4 .p9, ._2-1-3-4 .p10 {
  flex-basis: 25%;
}

/* ---------   1-4-5 ---------- */

._1-4-5 .p1 {
  flex-basis: 100%;
}

._1-4-5 .p2, ._1-4-5 .p3, ._1-4-5 .p4, ._1-4-5 .p5 {
  flex-basis: 25%;
}

._1-4-5 .p6, ._1-4-5 .p7, ._1-4-5 .p8, ._1-4-5 .p9, ._1-4-5 .p10 {
  flex-basis: 20%;
}

/* ---------   2-3-5 ---------- */

._2-3-5 .p1, ._2-3-5 .p2 {
  flex-basis: 50%;
}

._2-3-5 .p3, ._2-3-5 .p4, ._2-3-5 .p5 {
  flex-basis: 33.3333%;
}

._2-3-5 .p6, ._2-3-5 .p7, ._2-3-5 .p8, ._2-3-5 .p9, ._2-3-5 .p10 {
  flex-basis: 20%;
}

.dark{
  --h1-color:red;
}
.light{
  --h1-color:yellow;
}