@font-face
{
  font-family: 'Play';
  font-weight: 400;
  font-style: normal;
  src: url('Play-Regular.ttf') format('truetype');
}

@font-face
{
  font-family: 'Play';
  font-weight: 700;
  font-style: normal;
  src: url('Play-Bold.ttf') format('truetype');
}

:root
{
  --plm: 10%;
  --prm: 8%;
}

html
{
  scroll-behavior: smooth;
}

body
{
  /*background-image: linear-gradient(#eee .05em, transparent .05em);
  background-size: 100% 20px;*/
  box-sizing: border-box;
  font-family: Play, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 20px;
  margin: 0;
  max-width: 100%;
  padding: 0;
  scroll-snap-type: y proximity;
  width: 100%;
}

table
{
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
}

header
{
  background-color: #6690b8;
  color: white;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 40px;
  margin: 0;
  padding: 0 var(--prm) 0 var(--plm);
}

header img
{
  position: relative;
  top: 4px;
}

span.tr
{
  color: #52759b;
  font-size: 20px;
}

h1
{
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 42px;
  margin: 58px var(--prm) 40px var(--plm);
}

h1.en
{
  margin-bottom: 0;
}

h2
{
  color: #4d4d4d;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 39px;
  margin: 0 var(--prm) 40px var(--plm);
  padding-bottom: 1px;
}

p.status
{
  font-size: 22px;
  margin: 0 var(--prm) 40px var(--plm);
}

h3
{
  font-size: 28px;
  font-weight: 400;
  line-height: 40px;
  margin: 40px var(--prm) 20px var(--plm);
}

h4
{
  font-size: 25px;
  font-weight: 400;
  line-height: 40px;
  margin: 40px var(--prm) 20px var(--plm);
}

h5
{
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 23px;
  margin: 37px var(--prm) 20px var(--plm);
  white-space: normal;
}

table h5
{
  font-size: 20px;
  margin: 0 0 0 0;
}

section.latest h5
{
  font-size: 22px;
}

h6
{
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 20px;
  margin: 23px 0 0;
}

section.latest h6
{
  font-size: 20px;
}

section
{
  align-items: flex-start;
  column-gap: 85px;
  display: flex;
  flex-flow: row wrap;
  margin: 0 var(--prm) 20px var(--plm);
  scroll-snap-align: start;
}

section.latest td, section.latest th
{
  font-size: 18px;
  letter-spacing: 0.02em;
}

section.fixtures
{
  display: none;
}

section.nav
{
  column-gap: 60px;
  margin: 20px var(--plm) 20px var(--plm);
}

section.sn a
{
  font-size: 20px;
  line-height: 40px;
  white-space: nowrap;
}

h5.matchday
{
  display: none;
}

h5.g1
{
  margin-top: 20px;
}

h5.g2
{
  margin-top: 40px;
}

section.matchday
{
  display: none;
}

section.matchday table.standings
{
  display: none;
}

table.bc td
{
  border: 0;
  font-size: 20px;
  letter-spacing: 0.01em;
  line-height: 23px;
  padding: 10px 10px 7px 0;
  text-align: left;
}

table.pn
{
  margin-left: auto;
}

table.pn td
{
  border: 0;
  font-size: 16px;
  line-height: 20.5px;
  padding: 10px 0 8px 0;
}

table.pn td:nth-child(1)
{
  padding-right: 20px;
  text-align: left;
}

table.standings
{
  margin: 0 0 20px;
}

table.matches
{
  margin: 0 0 20px;
}

table tr:nth-child(1) h6
{
  margin-top: 3px;
}

td
{
  border-bottom: 1px dotted black;
  letter-spacing: 0.02em;
  padding: 17px 10px 2px;
  text-align: right;
  white-space: nowrap;
}

th
{
  font-weight: 700;
  padding: 18px 10px 2px;
  text-align: center;
  white-space: nowrap;
}

th.date
{
  padding: 15px 10px 2px 0;
  text-align: left;
}

table.matches tr td:nth-child(1), table.matches tr td:nth-child(4)
{
  min-width: 100px;
  text-align: left;
}

table.standings tr td:nth-child(1)
{
  padding-left: 5px;
  text-align: center;
}

table.standings tr td:nth-child(2)
{
  text-align: left;
}

table.standings tr td:first-child + td:not([colspan]) + td
{
  font-size: 16px;
  padding-top: 18px;
  padding-bottom: 1px;
  text-align: left;
}

section.latest table.standings tr td:first-child + td:not([colspan]) ~ td:nth-child(5), table.standings tr td:first-child + td[colspan] ~ td:nth-child(4)
{
  font-weight: 700;
}

section.matchday table.standings tr td:nth-child(4)
{
  font-weight: 700;
}

table.standings tr td:first-child + td[colspan] ~ td:nth-child(10), table.standings tr td:nth-child(11), table.standings tr td:nth-child(12)
{
  border: 0;
  font-size: 16px;
  letter-spacing: 0;
  padding-right: 0;
  text-align: left;
}

table.standings tr td:first-child + td[colspan] ~ td:nth-child(11), table.standings tr td:nth-child(12)
{
  width: 100%;
}

table.standings tr td.ra
{
  text-align: right !important;
}

tr.fl td
{
  border: 0;
  padding-bottom: 0;
}

tr.sl td
{
  padding-top: 0;
  text-align: center;
}

tr.sl td div
{
  font-size: 16px;
  margin: 0 -150px;
}

tr.pen td
{
  font-size: 16px;
  padding-top: 0;
}

table.matches tr.pen td:nth-child(1)
{
  text-align: right;
}

a
{
  color: #1a3c62;
  text-decoration: none;
}

a:hover
{
  text-decoration: underline #6690b8;
}

header a
{
  color: white;
}

a.rad
{
  border: solid 1px white;
  padding: 0 7px 2px;
}

a.sel, a.rad:hover
{
  border: solid 1px #6690b8;
  border-radius: 10px;
  text-decoration: none;
}

.ld, .sd
{
  display: none;
}

@media (max-width: 820px)
{
  :root
  {
    --plm: 7%;
    --prm: 6%;
  }
}

@media (max-width: 780px)
{
  .fd
  {
    display: none;
  }
  .ld
  {
    display: inline;
  }
}

@media (max-width: 700px)
{
  table.standings tr td:first-child + td:not([colspan]) ~ td:nth-child(6),
  table.standings tr td:first-child + td[colspan] ~ td:nth-child(5),
  table.standings tr th:nth-child(5),
  table.standings tr td:first-child + td:not([colspan]) ~ td:nth-child(7),
  table.standings tr td:first-child + td[colspan] ~ td:nth-child(6),
  table.standings tr th:nth-child(6),
  table.standings tr td:first-child + td:not([colspan]) ~ td:nth-child(8),
  table.standings tr td:first-child + td[colspan] ~ td:nth-child(7),
  table.standings tr th:nth-child(7)
  {
    display: none;
  }
}

@media (max-width: 580px)
{
  table.standings tr td:first-child + td[colspan] ~ td:nth-child(10),
  table.standings tr td:nth-child(11), 
  table.standings tr td:nth-child(12)
  {
    display: none;
  }
}

@media (max-width: 550px)
{
  .all
  {
    display: none;
  }
}

@media (max-width: 500px)
{
  .md
  {
    display: none;
  }
  .sd
  {
    display: inline;
  }
}

@media (max-width: 460px)
{
  .st
  {
    display: none;
  }
  table.standings
  {
    width: 100%;
  }
  table.standings tr td:first-child + td:not([colspan]) + td
  {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 430px)
{
  :root
  {
    --plm: 5%;
    --prm: 5%;
  }
  table.matches tr td:nth-child(1), table.matches tr td:nth-child(4)
  {
    min-width: 80px;
  }
  td
  {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 400px)
{
  :root
  {
    --plm: 2%;
    --prm: 2%;
  }
  table.matches tr td:nth-child(1), table.matches tr td:nth-child(4)
  {
    min-width: 60px;
  }
  td, th
  {
    padding-left: 6px;
    padding-right: 6px;
  }
}

@media (max-width: 380px)
{
  section.latest, section.matchday
  {
    width: 96%;
  }
  table.standings tr td:nth-child(1)
  {
    padding-left: 0;
  }
}

@media (max-width: 360px)
{
  :root
  {
    --plm: 1%;
    --prm: 1%;
  }
  a.rad
  {
    padding-left: 4px;
    padding-right: 4px;
  }
  section.latest, section.matchday
  {
    width: 98%;
  }
}