@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  background: #9ecae0;
}

@media (min-width: 200px) {
  .grid-div {
    width: 85%;
    margin-left: 5%;
    margin-top: 5%;
    margin-bottom: 10%;
    border-radius: 5px;
    display: grid;
  }

  #wrapper-div {
    background: #f94f62;
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .container {
    font-size: 80%;
    font-weight: 600;
    display: flex;
    margin-left: 7.5%;
    margin-right: 5%;
    margin-top: 1.5%;
  }
  .content-div {
    font-size: 50%;
    font-weight: 600;
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 2%;
    margin-left: 5%;
    background: #ffd300;
    border-radius: 5px;
  }

  .p-games {
    margin-left: 1%;
    color: aqua;
  }

  .p-winner {
    margin-left: 28%;
    color: chartreuse;
  }

  .p-mars {
    margin-left: 20%;
    color: indigo;
  }

  .p-nwm {
    margin-bottom: 2rem;
    border-bottom: #3a3d51 1px solid;
  }

  .p-1:last-child {
    margin-bottom: 0;
  }

  .p-2:last-child {
    margin-bottom: 0;
  }

  .p-3:last-child {
    margin-bottom: 0;
  }

  .names {
    text-align: center;
    margin-left: 2%;
    margin-top: 2.5%;
    color: darkcyan;
  }

  .winner {
    text-align: center;
    margin-left: 19%;
    margin-top: 2.5%;
    color: darkslateblue;
  }

  .mars {
    text-align: center;
    margin-left: 23%;
    margin-top: 2.5%;
    color: teal;
  }
}

@media (min-width: 400px) {
  .grid-div {
    width: 85%;
    margin-left: 5%;
    margin-top: 5%;
    margin-bottom: 10%;
    border-radius: 5px;
    display: grid;
  }

  #wrapper-div {
    background: #f94f62;
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .container {
    font-size: 80%;
    font-weight: 600;
    display: flex;
    margin-left: 7.5%;
    margin-right: 5%;
    margin-top: 1.5%;
  }
  .content-div {
    font-size: 60%;
    font-weight: 600;
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 2%;
    margin-left: 5%;
    background: #ffd300;
    border-radius: 5px;
  }

  .p-games {
    margin-left: 6%;
    color: aqua;
  }

  .p-winner {
    margin-left: 28%;
    color: chartreuse;
  }

  .p-mars {
    margin-left: 22%;
    color: indigo;
  }

  .p-nwm {
    margin-bottom: 2rem;
    border-bottom: #3a3d51 1px solid;
  }

  .p-1:last-child {
    margin-bottom: 0;
  }

  .p-2:last-child {
    margin-bottom: 0;
  }

  .p-3:last-child {
    margin-bottom: 0;
  }

  .names {
    text-align: center;
    margin-left: 2%;
    margin-top: 2.5%;
    color: darkcyan;
  }

  .winner {
    text-align: center;
    margin-left: 19%;
    margin-top: 2.5%;
    color: darkslateblue;
  }

  .mars {
    text-align: center;
    margin-left: 23%;
    margin-top: 2.5%;
    color: teal;
  }
}

@media (min-width: 600px) {
  .grid-div {
    width: 85%;
    margin-left: 5%;
    margin-top: 5%;
    margin-bottom: 10%;
    border-radius: 5px;
    display: grid;
  }

  #wrapper-div {
    background: #f94f62;
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .container {
    font-size: 110%;
    font-weight: 600;
    display: flex;
    margin-left: 7.5%;
    margin-right: 5%;
    margin-top: 1.5%;
  }
  .content-div {
    font-size: 90%;
    font-weight: 600;
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 2%;
    margin-left: 5%;
    background: #ffd300;
    border-radius: 5px;
  }

  .p-games {
    margin-left: 8%;
    color: aqua;
  }

  .p-winner {
    margin-left: 31%;
    color: chartreuse;
  }

  .p-mars {
    margin-left: 26%;
    color: indigo;
  }

  .p-nwm {
    margin-bottom: 2rem;
    border-bottom: #3a3d51 1px solid;
  }

  .p-1:last-child {
    margin-bottom: 0;
  }

  .p-2:last-child {
    margin-bottom: 0;
  }

  .p-3:last-child {
    margin-bottom: 0;
  }

  .names {
    text-align: center;
    margin-left: 5%;
    margin-top: 2.5%;
    color: darkcyan;
  }

  .winner {
    text-align: center;
    margin-left: 21%;
    margin-top: 2.5%;
    color: darkslateblue;
  }

  .mars {
    text-align: center;
    margin-left: 25%;
    margin-top: 2.5%;
    color: teal;
  }
}

@media (min-width: 800px) {
  .grid-div {
    width: 85%;
    margin-left: 5%;
    margin-top: 5%;
    margin-bottom: 10%;
    border-radius: 5px;
    display: grid;
  }

  #wrapper-div {
    background: #f94f62;
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .container {
    font-size: 120%;
    font-weight: 600;
    display: flex;
    margin-left: 7.5%;
    margin-right: 5%;
    margin-top: 1.5%;
  }
  .content-div {
    font-size: 100%;
    font-weight: 600;
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 2%;
    margin-left: 5%;
    background: #ffd300;
    border-radius: 5px;
  }

  .p-games {
    margin-left: 8%;
    color: aqua;
  }

  .p-winner {
    margin-left: 31%;
    color: chartreuse;
  }

  .p-mars {
    margin-left: 28%;
    color: indigo;
  }

  .p-nwm {
    margin-bottom: 2rem;
    border-bottom: #3a3d51 1px solid;
  }

  .p-1:last-child {
    margin-bottom: 0;
  }

  .p-2:last-child {
    margin-bottom: 0;
  }

  .p-3:last-child {
    margin-bottom: 0;
  }

  .names {
    text-align: center;
    text-align: center;
    margin-left: 5%;
    margin-top: 2.5%;
    color: darkcyan;
  }

  .winner {
    text-align: center;
    text-align: center;
    margin-left: 21%;
    margin-top: 2.5%;
    color: darkslateblue;
  }

  .mars {
    text-align: center;
    text-align: center;
    margin-left: 25%;
    margin-top: 2.5%;
    color: teal;
  }
}

@media (min-width: 1000px) {
  .grid-div {
    width: 85%;
    margin-left: 5%;
    margin-top: 5%;
    margin-bottom: 10%;
    border-radius: 5px;
    display: grid;
  }

  #wrapper-div {
    background: #f94f62;
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .container {
    font-size: 140%;
    font-weight: 600;
    display: flex;
    margin-left: 7.5%;
    margin-right: 5%;
    margin-top: 1.5%;
  }
  .content-div {
    font-size: 120%;
    font-weight: 600;
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 2%;
    margin-left: 5%;
    background: #ffd300;
    border-radius: 5px;
  }

  .p-games {
    margin-left: 8%;
    color: aqua;
  }

  .p-winner {
    margin-left: 34%;
    color: chartreuse;
  }

  .p-mars {
    margin-left: 26%;
    color: indigo;
  }

  .p-nwm {
    margin-bottom: 2rem;
    border-bottom: #3a3d51 1px solid;
  }

  .p-1:last-child {
    margin-bottom: 0;
  }

  .p-2:last-child {
    margin-bottom: 0;
  }

  .p-3:last-child {
    margin-bottom: 0;
  }

  .names {
    text-align: center;
    margin-left: 5%;
    margin-top: 2.5%;
    color: darkcyan;
  }

  .winner {
    text-align: center;
    margin-left: 23%;
    margin-top: 2.5%;
    color: darkslateblue;
  }

  .mars {
    text-align: center;
    margin-left: 24%;
    margin-top: 2.5%;
    color: teal;
  }
}

@media (min-width: 1200px) {
  .grid-div {
    width: 85%;
    margin-left: 5%;
    margin-top: 5%;
    margin-bottom: 10%;
    border-radius: 5px;
    display: grid;
  }

  #wrapper-div {
    background: #f94f62;
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .container {
    font-size: 140%;
    font-weight: 600;
    display: flex;
    margin-left: 7.5%;
    margin-right: 5%;
    margin-top: 1.5%;
  }
  .content-div {
    font-size: 120%;
    font-weight: 600;
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 2%;
    margin-left: 5%;
    background: #ffd300;
    border-radius: 5px;
  }

  .p-games {
    margin-left: 7%;
    color: aqua;
  }

  .p-winner {
    margin-left: 34.5%;
    color: chartreuse;
  }

  .p-mars {
    margin-left: 29.5%;
    color: indigo;
  }

  .p-nwm {
    margin-bottom: 2rem;
    border-bottom: #3a3d51 1px solid;
  }

  .p-1:last-child {
    margin-bottom: 0;
  }

  .p-2:last-child {
    margin-bottom: 0;
  }

  .p-3:last-child {
    margin-bottom: 0;
  }

  .names {
    text-align: center;
    margin-left: 5%;
    margin-top: 2.5%;
    color: darkcyan;
  }

  .winner {
    text-align: center;
    margin-left: 25%;
    margin-top: 2.5%;
    color: darkslateblue;
  }

  .mars {
    text-align: center;
    margin-left: 28%;
    margin-top: 2.5%;
    color: teal;
  }
}