@import url(https://fonts.bunny.net/css?family=caprasimo:400|righteous:400|ubuntu:300,300i,400,400i,500,500i,700,700i|varela-round:400);
@import url(https://fonts.cdnfonts.com/css/lemonmilk);
@import url('https://fonts.cdnfonts.com/css/heathergreen');
@font-face {
  font-family: MouseChronicles;
  src: url("fonts/fotpophappiness.otf") format("opentype"),
  url('fonts/fotpophappiness.ttf') format('truetype');
}
@font-face {
  font-family: SuperStars;
  src: url('fonts/pagbankas.ttf') format('truetype');
}

/* light/dark mode preferences */
:root {
  --outer-bg: #f0f8ff;
  --text-color: #000;
  --link-color: blue;
  
  .content {
    --content-bg: #f0ffff;
  }

  .footbar {
  --footer-bg: #4ee7e7;
  }

  table {
    --table-bg: #fff;
    --table-border: #000;
  }
}

.dark-mode {
  --outer-bg: #1c2f41;
  --text-color: #fff;
  --link-color: #009CFF;

  .content {
    --content-bg: #3c4b5c;
  }

  .footbar {
    --footer-bg: #235555;
  }

  table {
    --table-bg: #000;
    --table-border: #aaa;
    --table-header-datatable-color: #555;
    --table-subheader-datatable-color: #222;
  }
}

/* main content */
body {
    background-color: var(--outer-bg);
    color: var(--text-color);
    font-family: 'Ubuntu', 'Trebuchet MS', 'Calibri', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}
h1 {
    text-align: center;
}
.content {
    padding: 8px;
    margin: 0;
    background-color: var(--content-bg);
}
.ltlogo {
  font-family: 'Lemon/Milk', 'Ubuntu', 'Trebuchet MS', 'Calibri', sans-serif;
  font-weight: bolder;
  color: white;
  text-shadow: -2px 2px 0 #000,
                2px 2px 0 #000,
                2px -2px 0 #000,
                -2px -2px 0 #000;
}
.footbar {
    background-color: var(--footer-bg);
    padding: 8px;
    margin: 0;
    text-align: right;
    font-size: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}
#footbar-img {
  filter: invert(54%) sepia(92%) saturate(3295%) hue-rotate(173deg) brightness(102%) contrast(110%) drop-shadow(0px 0px 3px #ffffff);
  transition: filter 0.35s;
}
#footbar-img:hover {
  filter: invert(54%) sepia(92%) saturate(3295%) hue-rotate(173deg) brightness(102%) contrast(0.5) drop-shadow(0px 0px 3px #ffffff);
}
#footbar-img:active {
  filter: invert(54%) sepia(92%) saturate(3295%) hue-rotate(173deg) brightness(0) contrast(1) drop-shadow(0px 0px 3px #ffffff);
}
/* links */
 a:link {
    color: var(--link-color);
    /* text-decoration: none; */
  }
  a:visited {
    color: var(--link-color);
    /* text-decoration: none; */
  }
  a:hover, a:focus {
    color: crimson;
    /* text-decoration: none; */
  }
  a:active {
    color: darkred;
    /* text-decoration: none; */
  } 
.orderlink:link, .orderlink:visited, .orderlink:hover, .orderlink:focus, .orderlink:active {
  text-decoration: underline;
}
.volumelink:link, .volumelink:visited, .volumelink:hover, .volumelink:focus, .volumelink:active {
  text-decoration: underline;
}
.shortlink:link, .shortlink:visited, .shortlink:hover, .shortlink:focus, .shortlink:active {
  text-decoration: none;
}
.releaselink:link, .releaselink:visited, .releaselink:hover, .releaselink:focus, .releaselink:active {
  text-decoration: none;
}

/* glossary contents */
.glossaryword {
  font-weight: bold;
}

/* filter list */
.filterlist {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

/* tables */
table
{
  border: 1px solid var(--table-border);
  padding: 0px;
  width: 100%;
  border-collapse: collapse;
  color: var(--text-color);
  background-color: var(--table-bg);
}
th, tr
{
  padding: 0px;
}
th
{
  font-size: 24px;
  font-weight: normal;
}
.table_infoheader
{
  font-weight: bold;
  text-align: center;
}
.table_infoheader td
{
  border: 1px solid var(--table-border);
}
.table_release
{
  text-align: center;
}
.table_release td
{
  border: 1px solid var(--table-border);
}
.table_releasetitle
{
  font-weight: 500;
}
.table_print_no
{
  background-color: lightcoral;
  color: brown;
}
.table_print_yes
{
  background-color:palegreen;
  color: green;
}
.dtrg-level-0 {
  background-color: var(--table-header-datatable-color) !important;
}
.dtrg-level-1 {
  background-color: var(--table-subheader-datatable-color) !important;
}

/* collector's guide tiers */
.tierheader {
  font-weight: bold;
}
.releaseheader {
  font-weight: bold;
  font-style: italic;
}
/* logos */
#ltlogogold {
  font-family: 'Lemon/Milk', 'Ubuntu', 'Trebuchet MS', 'Calibri', sans-serif;
  font-weight: bolder;
  color: gold;
  text-shadow: -2px 2px 0 #000,
                2px 2px 0 #000,
                2px -2px 0 #000,
                -2px -2px 0 #000;
}
#ltlogogoldbyline {
  font-family: 'Heathergreen', 'Agency FB', 'Gill Sans MT Condensed', sans-serif;
  /* color: black; */
  letter-spacing: 0.2rem;
  font-weight: normal;
}
#ltlogotan {
  font-family: 'Lemon/Milk', 'Ubuntu', 'Trebuchet MS', 'Calibri', sans-serif;
  font-weight: bolder;
  color: rgb(255, 243, 172);
  text-shadow: -2px 2px 0 #000,
                2px 2px 0 #000,
                2px -2px 0 #000,
                -2px -2px 0 #000;
}
#ltccfont {
  line-height: 1;
}
#ltplatinumfont {
  font-family: 'Righteous', 'Arial', sans-serif;
  font-size: 24px;
}
#ltsuperstarsfont {
  font-family: 'SuperStars', 'Comic Sans MS', cursive;
  color: gold;
  text-shadow: -2px 2px 0 #000,
                2px 2px 0 #000,
                2px -2px 0 #000,
                -2px -2px 0 #000;
}
#ltccfont {
  font-family: 'Lemon/Milk', 'Ubuntu', 'Trebuchet MS', 'Calibri', sans-serif;
  /* color: black; */
  font-weight: bolder;
  font-size: 24px;
  line-height: 1;
}
#ltccsmallfont {
  font-family: 'Lemon/Milk', 'Ubuntu', 'Trebuchet MS', 'Calibri', sans-serif;
  /* color: black; */
  font-weight: bolder;
  font-size: 16px;
  line-height: 1;
}
#iltupperfont {
  font-family: 'Varela Round', 'Ubuntu', 'Calibri', 'Arial', sans-serif;
}
#iltfont {
  font-family: 'Caprasimo', 'Cooper Black', 'Comic Sans MS', cursive;
  color: #FEE722;
  text-shadow: -2px 2px 0 #023C9A,
                2px 2px 0 #023C9A,
                2px -2px 0 #023C9A,
                -2px -2px 0 #023C9A;
  line-height: 1;
}
/* season color */
/* black and white seasons */
.pilot, .s1930-31, .s1931-32, .s1932-33, .s1933-34,.s1934-35, .s1935-36, .s1936-37, .s1937-38, .s1938-39, .s1939-40, .s1940-41, .s1941-42, .s1942-43bw {
  background-color: #e7e6e6;
  color: black;
}
/* merrie melodies pre-color merger */
.s1933-34color {
  background-color: #fcd7a6;
  color: black;
}
.s1934-35red {
  background-color: #c86060;
  color: white;
  .redxshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
.s1934-35green {
  background-color: #96e97f;
  color: black;
}
.s1935-36mm {
  background-color: #5e49f9;
  color: white;
  .mmshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
.s1936-37mm {
  background-color: #2323d7;
  color: white;
  .mmshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
  .pdshorttableicon {
    filter: invert(1);
  }
}
.s1937-38mm {
  background-color: #fae862;
  color: black;
  .boshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
}
.s1938-39mm {
  background-color: #93df4d;
  color: black;
  .checkshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
.s1939-40mmsky {
  background-color: #bbeffb;
  color: black;
}
.s1939-40mm {
  background-color: #263f86;
  color: white;
  .mmshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
  .pdshorttableicon {
    filter: invert(1);
  }
}
.s1940-41mm {
  background-color: #ec9514;
  color: black;
}
.s1941-42mm {
  background-color: #b64ef0;
  color: white;
  .pdshorttableicon {
    filter: invert(1);
  }
  .dvdshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
}
.s1942-43 {
  background-color: #ff1d1d;
  color: white;
  .pdshorttableicon {
    filter: invert(1);
  }
  .redxshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
/* lt/mm post-color merger */
.s1943-44 {
  background-color: #0033cc;
  color: white;
}
.s1944-45 {
  background-color: #ea1a1a;
  color: white;
  .ltshorttableicon, .redxshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
.s1945-46 {
  background-color: #4c8ff2;
  color: white;
  .brshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
}
.s1946-47, .s1947-48 {
  background-color: #fb5d43;
  color: black;
}
.s1946-47green, .s1947-48green, .s1948-49 {
  background-color: #b6db5b;
  color: black;
  .boshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
  .checkshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
.s1947-48yellow, .s1948-49yellow, .s1949-50yellow {
  background-color: #e2ac4a;
  color: black;
  .boshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
}
.s1948-49green, .s1949-50, .s1950-51green {
  background-color: #35973e;
  color: white;
  .checkshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
}
.s1949-50orange, .s1950-51, .s1951-52orange {
  background-color: #ff6d3f;
  color: black;
}
.s1951-52, .s1952-53blue {
  background-color: #107cde;
  color: white;
  .brshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
}
.s1952-53, .s1953-54green {
  background-color: #a0eaa0;
  color: black;
  .boshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
  .checkshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
}
.s1953-54, .s1954-55orange {
  background-color: #f9ab55;
  color: black;
  .boshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
}
.s1954-55 {
  background-color: #ef3f3f;
  color: black;
  .ltshorttableicon, .redxshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
.s1954-55green, .s1955-56 {
  background-color: #40c739;
  color: black;
  .checkshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
}
.s1956-57 {
  background-color: #ed7d31;
  color: black;
}
.s1956-57blue, .s1957-58, .s1958-59 {
  background-color: #5b9bd5;
  color: white;
  .brshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
}
.s1959-60, .s1960-61, .s1961-62, .s1962-63, .s1963-64 {
  background-color: #bc0000;
  color: white;
  .ltshorttableicon, .redxshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
/* depatie-freleng/seven arts */
.s1962-63ab, .s1963-64ab, .s1964-65, .s1965-66, .s1966-67 {
  background-color: #262626;
  color: white;
  .mmshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
.s1967-68, .s1968-69 {
  background-color: #2f5496;
  color: white;
}
/* misc/post-golden age */
.aotrr {
  background-color: #e7e6e6;
  color: black;
}
.anybonds, .s1980 {
  background-color: #c00000;
  color: white;
  .pdshorttableicon {
    filter: invert(1);
  }
  .ltshorttableicon, .redxshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
.quackbusters, .william {
  background-color: #4c8ff2;
  color: white;
}
.boxoffice {
  background-color: #4e46f0;
  color: white;
}
.gregford, .cgiorange, .ddfp {
  background-color: #f96b01;
  color: black;
}
.jonesred, .carrotblanca, .gobeep {
  background-color: #bc0000;
  color: white;
  .ltshorttableicon, .redxshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
.doyle {
  background-color: #e4220d;
  color: white;
  .ltshorttableicon, .redxshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}
.jonesblue {
  background-color: #5b9bd5;
  color: white;
}
.cgi {
  background-color: #ffa45e;
  color: black;
}
.cgigreen {
  background-color: #2b8f2d;
  color: white;
  .checkshorttableicon {
    filter: drop-shadow(0px 0px 2px #000000bb);
  }
}
.cgired {
  background-color: #c5003d;
  color: white;
  .ltshorttableicon, .redxshorttableicon {
    filter: drop-shadow(0px 0px 2px #ffffffbb);
  }
}

/* switch from desktop/mobile */
.content {
      margin-top:51px;
    }
@media screen and (min-width: 1024px) {
    .content {
      margin-top:0px;
    }
}