tf2 ship table

<!DOCTYPE html>
<html>
  <head>
    <style>

red{
  color:red}

gr{
  color:green}

h2{
width: 100%;
  color: #f9f9f9;
  font-size: 20px;
  font-weight: bolder;
  margin: 0 auto;
  text-align: center;
  padding:5px;
    background-color: #bd3b3b;
    }

table{
  width: 100%;
  word-wrap: break-word;
  background-color: #ffffff;
  border-collapse: collapse;
  border-width: 1px;
  border-color: #bd3b3b;
  border-style: dotted;
  text-align: left;
  color: #000000;
  padding: 8px;

}

}

 th {
  color: white;
  border-width: 1px;
  background-color: #d55353;
  border-color: #d55353;
  border-style: dotted;
  border-width: 1px;
  padding: 3px;
  border-collapse: collapse;
  padding: 12px;
  min-width: 25px;

}

td, tr {
  border-collapse: collapse;
  border-color: #bd3b3b;
  border-style: dotted;
  border-width: 1px;
  padding: 8px;
  background-color: #f9f9f9;
  min-width: 25px;

td:hover {background-color:#ff9090;}

    </style>
  </head>
  <body>
<h2> pairings </h2>
<div style="overflow-x:auto;">
<table>

    <tr>
     <th>Characters</th>
      <th>Scout</th>
      <th>Soldier</th>
      <th>Pyro</th>
      <th>Demo</th>
      <th>Heavy</th>
      <th>Engie</th>
      <th>Medic</th>
      <th>Sniper</th>
      <th>Spy</th>
      <th>Merasmus</th>
      <th>Pauling</th>
      <th>Admin</th>
    </tr>
  <tbody>
    <tr>
      <th>Scout</th>
      <td><red>❤❤</red></td>
      <td><gr>✓</gr></td>
      <td></td>
      <td><gr>✓</gr></td>
      <td><gr>✓</gr></td>
      <td></td>
      <td><red>❤</red></td>
      <td>🚫</td>
      <td><red>❤❤❤ </red></td>
      <td><gr>✓</gr></td>
      <td><red>❤</red></td>
      <td></td>
    </tr>
    <tr>
      <th>Soldier</th>
      <td><gr>✓</gr></td>
      <td> </td>
      <td> </td>
      <td><gr>✓</gr></td>
      <td> </td>
      <td> </td>
      <td><gr>✓ </gr></td>
      <td> </td>
      <td><gr>✓✓<gr></td>
      <td><red>❤❤</red></td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th>Pyro</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th>Demo</th>
    <td><gr>✓ </gr></td>
    <td><gr>✓ </gr></td>
      <td>  </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th>Heavy</th>
      <td><gr>✓ </gr></td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td><gr>✓ </gr></td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th>Engie</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th>Medic</th>
      <td><red>❤</red></td>
      <td><gr>✓</gr></td>
      <td> </td>
      <td> </td>
      <td><gr>✓</gr></td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td><gr>✓</gr></td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th>Sniper</th>
      <td>🚫</td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td><gr>✓</gr></td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th>Spy</th>
      <td><red>❤❤❤</red></td>
      <td><gr>✓</gr></td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td><gr>✓</gr></td>
      <td><gr>✓</gr></td>
      <td><gr>✓</gr></td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th>Merasmus</th>
      <td><gr>✓</gr></td>
      <td><red>❤❤</red></td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th>Pauling</th>
      <td><red>❤</red></td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td><gr>✓</gr></td>
    </tr>
    <tr>
      <th>Admin</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td><gr>✓</gr></td>
      <td> </td>
    </tr>
  </tbody>
</table>
</div>
<br>
<h3>Notes: </h3>
<p> Name order matters for young/old ships.  Thesis: Young is the giver of affection, Old is the recipient of affection.  As a result Scout always pursues, UNLESS he's paired with a girl, in which case the girl kills or doms him.  I don't really care about name order for balanced ships like demo/solly or pretty much any non-scout ship.</p>
<br>
<p>❤ gachigasm</p>
<p>✓ pretty cool! </p>
<p>🚫 NO top!sniper x bottom!scout.  top!scout x bottom!sniper is acceptable as JUST FRIENDS.</p>
<p> blank means no strong feelings.  I may have drawn it as Just Friends or fwb, and could be convinced to feel more.</p>
<br>
<p> Wanna add this pairing table to your own page! <a href="https://pastebin.com/VH45fF78">Click HERE for the babby code.</a>
<br>
Feel free to edit the code however you wish, and make it into any other characters or universe.  This is just a basic table that I pre-filled, don't credit me!</p>


<footer>
</footer>
  </body>
</html>