html, * {
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
    background-image: radial-gradient(red, black);
    background-image:-moz-radial-gradient(red, black);
    background-image:-webkit-radial-gradient(red, black);
    font-family: 'Orbitron', sans-serif;
    font-size: 90%;
    background-size: cover;
    color: white;
  }

  h1, h2, p {
    text-align: center
  }

   .start-page {
    position:fixed;
    width: 100vw;
    height: 100%;
    text-align: center;
    background-image: radial-gradient(black, red);
    background-image:-moz-radial-gradient(black, red);
    background-image:-webkit-radial-gradient(black, red);
    background-size:cover;
    color: white;
    cursor: pointer;
    margin:0;
  } 

  .start-page > h1 {
    position: relative; 
    display:block;
    margin-top: 340px;
    margin-bottom: 340px;
    font-size: 200px;
  }

  @keyframes fade-on-load {
    to {
    opacity: 1;
    height: 100%
    }
  }

  .fade-on-load {
    opacity:0;
    animation: fade-on-load 4s forwards ease-in-out;
  }
  
  @keyframes fade-away {
    from { 
      opacity: 1;
    }
      to {
      opacity: 0;
    }
  }

  .fade-away {
    animation-duration: 2s;
    animation-name: fade-away;
  }

  @media only screen and (max-width: 375px) {
    .card {
      width:1.5em;
      height:1.7em;
      white-space:normal;
    }
    .start-page > h1 {
      font-size: 50px;
      margin-top: 300px;
      margin-bottom: 300px;
    }
    .rules{
      display: grid;
      grid-template-columns: 1fr 5fr 1fr;
    }
    h2, p {
      display: grid;
      grid-column-start: 2;
      font-size: 5px;
    }
  }

  @media only screen and (max-width: 980px) {
    .card {
      width:4.5em;
      height:6.0em;
    }
    .rules {
      margin:-5px;
      padding: -5px;
    }
  }

  @media only screen and (max-width: 780px) {
    .card {
      width:2.5em;
      height:2.6em;
    }
  }

  
  .hidden {
    display:none;
    height: 0;
  }
  
  .game-container {
    display: flex;
    justify-content: center;
    align-content: space-between;
    visibility: visible;
    height: max-content;
  }

    .scoreboard {
    display: inline-block;
    grid-template-columns: 15% 70% 15%;
    font-size:18px;
  }
  
  .scoreboard > #playerscore {
    display:grid;
  }

  .scoreboard > #computerscore {
    display:grid;
  }

  .rules {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size:20px;
  }
  
   .rules > h2, p {
    display: grid;
    grid-column-start: 2;
    padding: 0;
    margin:8px;
    font-size:18px;
  } 

  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    border: 4px dotted grey;
  }

  #player-deck {
    margin-right: 15%;
  }

  #computer-deck {
    margin-left: 15%;
  }
 
  .scoreboard {
    display: flex;
    justify-content:space-between;
    width:100vw;
    height:50px;
  }

  #playerscore {
    margin-left: 15%;
  }

  #computerscore {
    margin-right: 15%;
  }

  button {
    display: block;
    margin: 10px auto;
    padding: 10px;
    font-size: 16px;
    color: white;
    border: 1px solid grey;
    border-radius: 4px;
    outline: none;
    background-color: black;
    font-family: 'Orbitron', sans-serif;
  }
  
  button:hover {
    background-color: black;
    color: red;
    border: 2px solid white;
    cursor: pointer;
  }