@font-face {
  font-family: molot;
  src: url("../assets/fonts/molot/Molot.otf"); }

* {
  font-family: molot; }

body {
  overflow-x: hidden; }

.button {
  background-color: white;
  color: #417505;
  padding: 0.8em 4em;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5); }
  .button:hover {
    background-color: white; }

footer {
  background-color: transparent;
  font-size: 0.8rem;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 10px 15px; }
  footer span, footer a {
    opacity: 0.2; }
  footer a:hover {
    opacity: 1; }

.home {
  font-size: 2rem; }
  @media screen and (min-width: 637px) {
    .home {
      font-size: 2.4em; } }
  @media screen and (min-width: 810px) {
    .home {
      font-size: 2.75em; } }
  .home .bg, .home .content {
    height: 100vh; }
  .home .bg {
    position: absolute;
    width: 100vw;
    background-image: url("../assets/img/bg/football-stadium.jpg");
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 75%);
    z-index: -1; }
    @media screen and (min-width: 1150px) {
      .home .bg {
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 75%); } }
  .home .content {
    z-index: 1;
    margin: 0 auto;
    display: grid;
    justify-items: center;
    align-items: center; }
  .home .title {
    color: white;
    margin-bottom: 40px;
    font-size: 1.5em; }
  .home .grid-row {
    display: grid;
    justify-items: center; }
  .home .start-btn {
    font-size: 0.6em; }
    .home .start-btn:hover {
      transform: translate(0, -5px);
      box-shadow: 0px 5px 30px 5px rgba(0, 0, 0, 0.5); }

.players {
  font-size: 2rem; }
  @media screen and (min-width: 637px) {
    .players {
      font-size: 2.4em; } }
  @media screen and (min-width: 810px) {
    .players {
      font-size: 2.75em; } }
  .players .bg, .players .content {
    height: 100vh; }
  .players .bg {
    position: absolute;
    width: 100vw;
    background-image: url("../assets/img/bg/football-stadium.jpg");
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 75%); }
    @media screen and (min-width: 1150px) {
      .players .bg {
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 75%); } }
  .players .content {
    display: grid;
    justify-items: center;
    align-items: center; }
  .players .title {
    color: white;
    margin-bottom: 40px;
    font-size: 1.5em; }
  .players .add-player-row {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center; }
    .players .add-player-row .input-player {
      background-color: white;
      box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.5);
      font-size: 0.75em;
      padding: 0.75em 1.25em; }
    .players .add-player-row .remove-player-btn {
      background-color: #d02828;
      color: white;
      border-radius: 0;
      width: 75px;
      padding: 0;
      font-size: 0.4em;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5); }
      .players .add-player-row .remove-player-btn:hover {
        background-color: #a52020; }
    .players .add-player-row.last .input-player {
      opacity: 0.75; }
      .players .add-player-row.last .input-player:hover, .players .add-player-row.last .input-player:focus {
        opacity: 1; }
    .players .add-player-row.last .remove-player-btn {
      display: none; }
  .players .next-btn-row {
    display: grid;
    justify-content: center; }
  .players .continue-btn {
    font-size: 0.6em; }
    .players .continue-btn:hover {
      transform: translate(0, -5px);
      box-shadow: 0px 5px 30px 5px rgba(0, 0, 0, 0.5); }

.results {
  font-size: 2rem; }
  @media screen and (min-width: 637px) {
    .results {
      font-size: 2.4em; } }
  @media screen and (min-width: 810px) {
    .results {
      font-size: 2.75em; } }
  .results .bg, .results .content {
    height: 100vh; }
  .results .bg {
    position: absolute;
    width: 100vw;
    background-image: url("../assets/img/bg/football-stadium.jpg");
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 75%); }
    @media screen and (min-width: 1150px) {
      .results .bg {
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 75%); } }
  .results .content {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 100%; }
    .results .content > .container {
      width: 600px; }
  .results .title {
    color: white;
    margin-bottom: 40px;
    font-size: 1.5em; }
  .results .results-col {
    margin-bottom: 50px;
    display: grid;
    justify-items: center;
    grid-gap: 10px; }
    .results .results-col .player-result {
      background-color: white;
      width: 100%;
      box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.5);
      height: min-content; }
      .results .results-col .player-result:last-child {
        margin-bottom: 0px; }
      .results .results-col .player-result .player-name {
        padding: 0.75em 1.25em; }
      .results .results-col .player-result .country {
        opacity: 0.5;
        font-size: 0.8em; }
      .results .results-col .player-result .team {
        display: grid;
        position: relative;
        border-top: 1px solid #eee; }
        .results .results-col .player-result .team:hover .team-name {
          opacity: 1; }
        .results .results-col .player-result .team .team-flag {
          width: 100%; }
        .results .results-col .player-result .team .team-name {
          position: absolute;
          text-align: center;
          color: white;
          background-color: rgba(0, 0, 0, 0.5);
          left: 0;
          top: 0;
          display: grid;
          justify-content: center;
          align-content: center;
          opacity: 0; }
  .results .next-btn-row {
    display: grid;
    justify-content: center; }
  .results .restart-btn {
    font-size: 0.6em; }
    .results .restart-btn:hover {
      transform: translate(0, -5px);
      box-shadow: 0px 5px 30px 5px rgba(0, 0, 0, 0.5); }