/*
  CEECAT master stylesheet.
  Includes the Mode7 font setup, CEECAT fixed palette,
  page layout helpers, link hovers, flash presets, pixel cells, and image slots.
*/

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,
sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,output,section,summary,time,audio,video {
  padding: 0;
  margin: 0;
  border: 0;
  font-smooth: never;
  -webkit-font-smoothing: none;
}

@font-face {
  font-family: Mode7;
  src: url("ModeSevenThin.ttf");
}

html,
body {
  min-height: 100%;
}

body,
td.teletext {
  background: #000;
  color: #fff;
  font-family: Mode7, monospace, courier, fixed;
  font-size: 33px;
  line-height: 33px;
  font-smooth: never;
  -webkit-font-smoothing: none;
}

body {
  padding: 30px;
  align-items: center;
  justify-content: center;
  margin: 0;
  display: flex;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

.teletext {
  display: block;
  width: max-content;
  background: #000;
  color: #fff;
  font-family: Mode7, monospace, courier, fixed;
  font-size: 33px;
  line-height: 33px;
  text-align: left;
  white-space: pre;
  font-smooth: never;
  -webkit-font-smoothing: none;
}

.ceecat-stage {
  position: relative;
  width: max-content;
  background: #000;
  color: #fff;
  font-family: Mode7, monospace, courier, fixed;
  font-size: 33px;
  line-height: 33px;
}

.ceecat-page {
  position: relative;
  z-index: 1;
}

.ceecat-cell {
  display: inline-block;
  position: relative;
  width: 1ch;
  height: 1em;
  line-height: 1em;
  text-align: center;
  vertical-align: top;
  overflow: visible;
  transform-origin: top left;
}

.ceecat-cell-content {
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 1em;
  vertical-align: top;
}

.ceecat-dh {
  transform: scaleY(2);
  z-index: 2;
}

.ceecat-dw {
  transform: scaleX(2);
  z-index: 2;
}

.ceecat-ds {
  transform: scale(2);
  z-index: 2;
}

.ceecat-placeholder {
  color: transparent !important;
}

.ceecat-pixel-cell {
  display: inline-grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(3, 33.333333%);
  line-height: normal;
}

.ceecat-pixel-cell i {
  display: block;
  width: 100%;
  height: 100%;
}

.ceecat-link {
  display: inline-block;
  height: 1em;
  line-height: 1em;
  vertical-align: top;
  white-space: pre;
  color: inherit;
  text-decoration: none;
}

.ceecat-image-slot {
  position: absolute;
  z-index: 4;
  object-fit: cover;
  outline: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.04);
}

.ceecat-image-landscape {
  left: 0;
  top: calc(5 * 1em);
  width: calc(45 * 1ch);
  height: calc(13 * 1em);
}

.ceecat-image-portrait-left {
  left: calc(1 * 1ch);
  top: calc(6 * 1em);
  width: calc(22 * 1ch);
  height: calc(17 * 1em);
}

.ceecat-image-portrait-right {
  left: calc(23 * 1ch);
  top: calc(6 * 1em);
  width: calc(22 * 1ch);
  height: calc(17 * 1em);
}

.ceecat-image-centre-square {
  left: calc(9 * 1ch);
  top: calc(5 * 1em);
  width: calc(27 * 1ch);
  height: calc(16 * 1em);
}

.flash-normal,
.flashing {
  animation: ceecat-flash 1.6s steps(1, end) infinite;
}

.flash-alt-normal {
  animation: ceecat-flash-alt 1.6s steps(1, end) infinite;
}

.flash-slow {
  animation: ceecat-flash 2.8s steps(1, end) infinite;
}

.flash-fast {
  animation: ceecat-flash 0.8s steps(1, end) infinite;
}

.flash-delay-1 {
  animation: ceecat-flash 1.8s steps(1, end) infinite;
  animation-delay: 0s;
}

.flash-delay-2 {
  animation: ceecat-flash 1.8s steps(1, end) infinite;
  animation-delay: -0.2s;
}

.flash-delay-3 {
  animation: ceecat-flash 1.8s steps(1, end) infinite;
  animation-delay: -0.4s;
}

.flash-delay-4 {
  animation: ceecat-flash 1.8s steps(1, end) infinite;
  animation-delay: -0.6s;
}

.flash-delay-5 {
  animation: ceecat-flash 1.8s steps(1, end) infinite;
  animation-delay: -0.8s;
}

.flash-delay-6 {
  animation: ceecat-flash 1.8s steps(1, end) infinite;
  animation-delay: -1s;
}

.flash-delay-7 {
  animation: ceecat-flash 1.8s steps(1, end) infinite;
  animation-delay: -1.2s;
}

.flash-delay-8 {
  animation: ceecat-flash 1.8s steps(1, end) infinite;
  animation-delay: -1.4s;
}

.flash-delay-9 {
  animation: ceecat-flash 1.8s steps(1, end) infinite;
  animation-delay: -1.6s;
}

@keyframes ceecat-flash {
  0%,
  49.999% {
    visibility: visible;
  }

  50%,
  100% {
    visibility: hidden;
  }
}

@keyframes ceecat-flash-alt {
  0%,
  49.999% {
    visibility: hidden;
  }

  50%,
  100% {
    visibility: visible;
  }
}

.cee-fg-teletext-black { color: #000000; }
.cee-bg-teletext-black { background-color: #000000; }
.cee-hover-teletext-black:hover, .ceecat-link.cee-hover-teletext-black:hover .ceecat-cell { color: #000000 !important; }
.cee-fg-teletext-red { color: #ff0000; }
.cee-bg-teletext-red { background-color: #ff0000; }
.cee-hover-teletext-red:hover, .ceecat-link.cee-hover-teletext-red:hover .ceecat-cell { color: #ff0000 !important; }
.cee-fg-teletext-green { color: #00ff00; }
.cee-bg-teletext-green { background-color: #00ff00; }
.cee-hover-teletext-green:hover, .ceecat-link.cee-hover-teletext-green:hover .ceecat-cell { color: #00ff00 !important; }
.cee-fg-teletext-yellow { color: #ffff00; }
.cee-bg-teletext-yellow { background-color: #ffff00; }
.cee-hover-teletext-yellow:hover, .ceecat-link.cee-hover-teletext-yellow:hover .ceecat-cell { color: #ffff00 !important; }
.cee-fg-teletext-blue { color: #0000ff; }
.cee-bg-teletext-blue { background-color: #0000ff; }
.cee-hover-teletext-blue:hover, .ceecat-link.cee-hover-teletext-blue:hover .ceecat-cell { color: #0000ff !important; }
.cee-fg-teletext-magenta { color: #ff00ff; }
.cee-bg-teletext-magenta { background-color: #ff00ff; }
.cee-hover-teletext-magenta:hover, .ceecat-link.cee-hover-teletext-magenta:hover .ceecat-cell { color: #ff00ff !important; }
.cee-fg-teletext-cyan { color: #00ffff; }
.cee-bg-teletext-cyan { background-color: #00ffff; }
.cee-hover-teletext-cyan:hover, .ceecat-link.cee-hover-teletext-cyan:hover .ceecat-cell { color: #00ffff !important; }
.cee-fg-teletext-white { color: #ffffff; }
.cee-bg-teletext-white { background-color: #ffffff; }
.cee-hover-teletext-white:hover, .ceecat-link.cee-hover-teletext-white:hover .ceecat-cell { color: #ffffff !important; }
.cee-fg-dark-blue { color: #172038; }
.cee-bg-dark-blue { background-color: #172038; }
.cee-hover-dark-blue:hover, .ceecat-link.cee-hover-dark-blue:hover .ceecat-cell { color: #172038 !important; }
.cee-fg-dark-azure-1 { color: #253a5e; }
.cee-bg-dark-azure-1 { background-color: #253a5e; }
.cee-hover-dark-azure-1:hover, .ceecat-link.cee-hover-dark-azure-1:hover .ceecat-cell { color: #253a5e !important; }
.cee-fg-azure-1 { color: #3c5e8b; }
.cee-bg-azure-1 { background-color: #3c5e8b; }
.cee-hover-azure-1:hover, .ceecat-link.cee-hover-azure-1:hover .ceecat-cell { color: #3c5e8b !important; }
.cee-fg-azure-2 { color: #4f8fba; }
.cee-bg-azure-2 { background-color: #4f8fba; }
.cee-hover-azure-2:hover, .ceecat-link.cee-hover-azure-2:hover .ceecat-cell { color: #4f8fba !important; }
.cee-fg-teal-1 { color: #73bed3; }
.cee-bg-teal-1 { background-color: #73bed3; }
.cee-hover-teal-1:hover, .ceecat-link.cee-hover-teal-1:hover .ceecat-cell { color: #73bed3 !important; }
.cee-fg-light-cyan { color: #a4dddb; }
.cee-bg-light-cyan { background-color: #a4dddb; }
.cee-hover-light-cyan:hover, .ceecat-link.cee-hover-light-cyan:hover .ceecat-cell { color: #a4dddb !important; }
.cee-fg-dark-blue-green { color: #19332d; }
.cee-bg-dark-blue-green { background-color: #19332d; }
.cee-hover-dark-blue-green:hover, .ceecat-link.cee-hover-dark-blue-green:hover .ceecat-cell { color: #19332d !important; }
.cee-fg-dark-green { color: #25562e; }
.cee-bg-dark-green { background-color: #25562e; }
.cee-hover-dark-green:hover, .ceecat-link.cee-hover-dark-green:hover .ceecat-cell { color: #25562e !important; }
.cee-fg-green-1 { color: #468232; }
.cee-bg-green-1 { background-color: #468232; }
.cee-hover-green-1:hover, .ceecat-link.cee-hover-green-1:hover .ceecat-cell { color: #468232 !important; }
.cee-fg-green-2 { color: #75a743; }
.cee-bg-green-2 { background-color: #75a743; }
.cee-hover-green-2:hover, .ceecat-link.cee-hover-green-2:hover .ceecat-cell { color: #75a743 !important; }
.cee-fg-yellow-green { color: #a8ca58; }
.cee-bg-yellow-green { background-color: #a8ca58; }
.cee-hover-yellow-green:hover, .ceecat-link.cee-hover-yellow-green:hover .ceecat-cell { color: #a8ca58 !important; }
.cee-fg-light-chartreuse { color: #d0da91; }
.cee-bg-light-chartreuse { background-color: #d0da91; }
.cee-hover-light-chartreuse:hover, .ceecat-link.cee-hover-light-chartreuse:hover .ceecat-cell { color: #d0da91 !important; }
.cee-fg-dark-red-1 { color: #4d2b32; }
.cee-bg-dark-red-1 { background-color: #4d2b32; }
.cee-hover-dark-red-1:hover, .ceecat-link.cee-hover-dark-red-1:hover .ceecat-cell { color: #4d2b32 !important; }
.cee-fg-dark-red-2 { color: #7a4841; }
.cee-bg-dark-red-2 { background-color: #7a4841; }
.cee-hover-dark-red-2:hover, .ceecat-link.cee-hover-dark-red-2:hover .ceecat-cell { color: #7a4841 !important; }
.cee-fg-dark-red-3 { color: #602c2c; }
.cee-bg-dark-red-3 { background-color: #602c2c; }
.cee-hover-dark-red-3:hover, .ceecat-link.cee-hover-dark-red-3:hover .ceecat-cell { color: #602c2c !important; }
.cee-fg-dark-brown { color: #884b2b; }
.cee-bg-dark-brown { background-color: #884b2b; }
.cee-hover-dark-brown:hover, .ceecat-link.cee-hover-dark-brown:hover .ceecat-cell { color: #884b2b !important; }
.cee-fg-brown-1 { color: #ad7757; }
.cee-bg-brown-1 { background-color: #ad7757; }
.cee-hover-brown-1:hover, .ceecat-link.cee-hover-brown-1:hover .ceecat-cell { color: #ad7757 !important; }
.cee-fg-brown-2 { color: #be772b; }
.cee-bg-brown-2 { background-color: #be772b; }
.cee-hover-brown-2:hover, .ceecat-link.cee-hover-brown-2:hover .ceecat-cell { color: #be772b !important; }
.cee-fg-orange-1 { color: #c09473; }
.cee-bg-orange-1 { background-color: #c09473; }
.cee-hover-orange-1:hover, .ceecat-link.cee-hover-orange-1:hover .ceecat-cell { color: #c09473 !important; }
.cee-fg-orange-2 { color: #d7b594; }
.cee-bg-orange-2 { background-color: #d7b594; }
.cee-hover-orange-2:hover, .ceecat-link.cee-hover-orange-2:hover .ceecat-cell { color: #d7b594 !important; }
.cee-fg-light-orange { color: #e7d5b3; }
.cee-bg-light-orange { background-color: #e7d5b3; }
.cee-hover-light-orange:hover, .ceecat-link.cee-hover-light-orange:hover .ceecat-cell { color: #e7d5b3 !important; }
.cee-fg-orange-3 { color: #de9e41; }
.cee-bg-orange-3 { background-color: #de9e41; }
.cee-hover-orange-3:hover, .ceecat-link.cee-hover-orange-3:hover .ceecat-cell { color: #de9e41 !important; }
.cee-fg-yellow-orange { color: #e8c170; }
.cee-bg-yellow-orange { background-color: #e8c170; }
.cee-hover-yellow-orange:hover, .ceecat-link.cee-hover-yellow-orange:hover .ceecat-cell { color: #e8c170 !important; }
.cee-fg-dark-pink { color: #341c27; }
.cee-bg-dark-pink { background-color: #341c27; }
.cee-hover-dark-pink:hover, .ceecat-link.cee-hover-dark-pink:hover .ceecat-cell { color: #341c27 !important; }
.cee-fg-dark-red-4 { color: #752438; }
.cee-bg-dark-red-4 { background-color: #752438; }
.cee-hover-dark-red-4:hover, .ceecat-link.cee-hover-dark-red-4:hover .ceecat-cell { color: #752438 !important; }
.cee-fg-dark-red-5 { color: #a53030; }
.cee-bg-dark-red-5 { background-color: #a53030; }
.cee-hover-dark-red-5:hover, .ceecat-link.cee-hover-dark-red-5:hover .ceecat-cell { color: #a53030 !important; }
.cee-fg-vermilion { color: #cf573c; }
.cee-bg-vermilion { background-color: #cf573c; }
.cee-hover-vermilion:hover, .ceecat-link.cee-hover-vermilion:hover .ceecat-cell { color: #cf573c !important; }
.cee-fg-orange-4 { color: #da863e; }
.cee-bg-orange-4 { background-color: #da863e; }
.cee-hover-orange-4:hover, .ceecat-link.cee-hover-orange-4:hover .ceecat-cell { color: #da863e !important; }
.cee-fg-very-dark-magenta { color: #241527; }
.cee-bg-very-dark-magenta { background-color: #241527; }
.cee-hover-very-dark-magenta:hover, .ceecat-link.cee-hover-very-dark-magenta:hover .ceecat-cell { color: #241527 !important; }
.cee-fg-dark-magenta-pink { color: #411d31; }
.cee-bg-dark-magenta-pink { background-color: #411d31; }
.cee-hover-dark-magenta-pink:hover, .ceecat-link.cee-hover-dark-magenta-pink:hover .ceecat-cell { color: #411d31 !important; }
.cee-fg-dark-indigo { color: #1e1d39; }
.cee-bg-dark-indigo { background-color: #1e1d39; }
.cee-hover-dark-indigo:hover, .ceecat-link.cee-hover-dark-indigo:hover .ceecat-cell { color: #1e1d39 !important; }
.cee-fg-dark-purple { color: #402751; }
.cee-bg-dark-purple { background-color: #402751; }
.cee-hover-dark-purple:hover, .ceecat-link.cee-hover-dark-purple:hover .ceecat-cell { color: #402751 !important; }
.cee-fg-dark-magenta { color: #7a367b; }
.cee-bg-dark-magenta { background-color: #7a367b; }
.cee-hover-dark-magenta:hover, .ceecat-link.cee-hover-dark-magenta:hover .ceecat-cell { color: #7a367b !important; }
.cee-fg-dark-pink-magenta { color: #a23e8c; }
.cee-bg-dark-pink-magenta { background-color: #a23e8c; }
.cee-hover-dark-pink-magenta:hover, .ceecat-link.cee-hover-dark-pink-magenta:hover .ceecat-cell { color: #a23e8c !important; }
.cee-fg-pink-magenta { color: #c65197; }
.cee-bg-pink-magenta { background-color: #c65197; }
.cee-hover-pink-magenta:hover, .ceecat-link.cee-hover-pink-magenta:hover .ceecat-cell { color: #c65197 !important; }
.cee-fg-red-pink { color: #df84a5; }
.cee-bg-red-pink { background-color: #df84a5; }
.cee-hover-red-pink:hover, .ceecat-link.cee-hover-red-pink:hover .ceecat-cell { color: #df84a5 !important; }
.cee-fg-very-dark-blue-1 { color: #090a14; }
.cee-bg-very-dark-blue-1 { background-color: #090a14; }
.cee-hover-very-dark-blue-1:hover, .ceecat-link.cee-hover-very-dark-blue-1:hover .ceecat-cell { color: #090a14 !important; }
.cee-fg-very-dark-blue-2 { color: #10141f; }
.cee-bg-very-dark-blue-2 { background-color: #10141f; }
.cee-hover-very-dark-blue-2:hover, .ceecat-link.cee-hover-very-dark-blue-2:hover .ceecat-cell { color: #10141f !important; }
.cee-fg-dark-azure-2 { color: #151d28; }
.cee-bg-dark-azure-2 { background-color: #151d28; }
.cee-hover-dark-azure-2:hover, .ceecat-link.cee-hover-dark-azure-2:hover .ceecat-cell { color: #151d28 !important; }
.cee-fg-dark-teal-1 { color: #202e37; }
.cee-bg-dark-teal-1 { background-color: #202e37; }
.cee-hover-dark-teal-1:hover, .ceecat-link.cee-hover-dark-teal-1:hover .ceecat-cell { color: #202e37 !important; }
.cee-fg-dark-teal-2 { color: #394a50; }
.cee-bg-dark-teal-2 { background-color: #394a50; }
.cee-hover-dark-teal-2:hover, .ceecat-link.cee-hover-dark-teal-2:hover .ceecat-cell { color: #394a50 !important; }
.cee-fg-teal-2 { color: #577277; }
.cee-bg-teal-2 { background-color: #577277; }
.cee-hover-teal-2:hover, .ceecat-link.cee-hover-teal-2:hover .ceecat-cell { color: #577277 !important; }
.cee-fg-greyish-cyan { color: #819796; }
.cee-bg-greyish-cyan { background-color: #819796; }
.cee-hover-greyish-cyan:hover, .ceecat-link.cee-hover-greyish-cyan:hover .ceecat-cell { color: #819796 !important; }
.cee-fg-greyish-blue-green { color: #a8b5b2; }
.cee-bg-greyish-blue-green { background-color: #a8b5b2; }
.cee-hover-greyish-blue-green:hover, .ceecat-link.cee-hover-greyish-blue-green:hover .ceecat-cell { color: #a8b5b2 !important; }
.cee-fg-light-grey { color: #c7cfcc; }
.cee-bg-light-grey { background-color: #c7cfcc; }
.cee-hover-light-grey:hover, .ceecat-link.cee-hover-light-grey:hover .ceecat-cell { color: #c7cfcc !important; }
.cee-fg-very-light-grey { color: #ebede9; }
.cee-bg-very-light-grey { background-color: #ebede9; }
.cee-hover-very-light-grey:hover, .ceecat-link.cee-hover-very-light-grey:hover .ceecat-cell { color: #ebede9 !important; }