:root{
  --flame: #FD5901;
  --ember: #F78104;
  --solar: #FAAB36;
  --aqua: #249EA0;
  --tide: #008083;
  --depth: #005F60;
  --white: #ffffff;
  --black: #001214;
  --grey-1: #001f29;
  --grey-2: #002837;
  --grey-3: #003246;
  --grey-4: #01394c;
  --grey-5: #013f51;
  --crimson: #D45E5E;
  --coral: #F08080;
  --blush: #F4978E;
  --petal: #F8AD9D;
  --peach: #FBC4AB;
  --apricot: #FFDAB9;
  --amberleaf: #F6BD60;
  --ivorydust: #F7EDE2;
  --blushrose: #F5CAC3;
  --sagebrush: #84A59D;
  --coraline: #F28482;
  --peachglow: #F59D9B;
  --land-1-width: calc(((var(--vw) * 100) - (var(--vh) * 17)) / 16);
  --land-2-width: calc(((var(--vw) * 100) - (var(--vh) * 12)) / 11);
  --land-1-height: calc(((var(--vh) * 100) - (var(--vh) * 12)) / 11);
  --port-1-width: calc(((var(--vw) * 100) - (var(--vh) * 10)) / 9);
  --port-2-width: calc(((var(--vw) * 100) - (var(--vh) * 8)) / 7);
  --port-height: calc(((var(--vh) * 100) - (var(--vh) * 17)) / 16);
}
@property --delay1{ syntax: "<time>";  inherits: false; initial-value: 0s;}
@property --delay2{ syntax: "<time>";  inherits: false; initial-value: 0s;}
@property --dur-1{ syntax: "<time>"; inherits: false; initial-value: .8s;}
@property --dur-2{ syntax: "<time>"; inherits: false; initial-value: 4s;}
@property --colour{ syntax: "<color>"; inherits: false; initial-value: #000;}
@property --x1{ syntax: "<length> | <percentage>"; inherits: false; initial-value: 0px;}
@property --x2{ syntax: "<length> | <percentage>"; inherits: false; initial-value: 0px;}
html, body{width: 100%; height: 100%;}
html, body, div, p{margin: 0; padding: 0;}
html { -webkit-text-size-adjust: 100%; }
body, div, p{overflow: hidden; overflow: clip;}
body{background-color: #ffffff;}
#def{height: 0; width: 0;}
div{font-family: "Pixels"; color: var(--white); position: relative;}
#land, #land2, #port1, #port2{ display: none; text-align: center;}
#port1, #port2{grid-template-rows: repeat(16, minmax(0, 1fr)); grid-auto-flow: dense;}
#land{grid-template-columns: repeat(16, minmax(0, 1fr)); grid-template-rows: repeat(11, minmax(0, 1fr));}
#land2{grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(16, minmax(0, 1fr)); grid-auto-flow: dense;}
#port1{grid-template-columns: repeat(9, minmax(0, 1fr));}
#port2{grid-template-columns: repeat(7, minmax(0, 1fr));}
.my-pixels{width: calc(var(--vw) * 100); height: calc(var(--vh) * 100); top: 0; left: 0; position: absolute; gap: calc(var(--vh) * 1); padding: calc(var(--vh) * 1); box-sizing: border-box;}
.black, .l-colour, .l2-colour, .p1-colour, .p2-colour{place-items: end start; min-width: 0; min-height: 0; overflow: hidden; transform-origin: top left;}
/*#land2 .black, #port1 .black, #port2 .black,*/ .l2-colour, .p1-colour, .p2-colour{height: var(--port-height);}
#title{background-color: #fff; display: flex; justify-content: space-evenly; align-items: center;  column-gap: calc(var(--vh) * 1); row-gap: calc(var(--vh) * 1);}
#land2 #title, #port1 #title, #port2 #title{flex-direction: column; justify-content: space-evenly; align-items: center;}
#land #title{grid-row: 6;  grid-column: 6/ span 6; flex-direction: row; justify-content: stretch;}
#land2 #title{grid-column: 6;  grid-row: 6 / span 6;}
#port1 #title{grid-column: 5;  grid-row: 5 / span 8; }
#port2 #title{grid-column: 4;  grid-row: 4 / span 10;}
.black p, .l-colour p, .l2-colour p, .p1-colour p, .p2-colour p{width:100%; height: 100%; display: block; position: absolute; top: 0; left: 0; animation: hor-slide var(--dur-1) linear alternate infinite both, blink var(--dur-2) linear alternate infinite both;}
#port1 .black p, .p1-colour p, #port2 .black p, .p2-colour p, #land2 .black p, .l2-colour p{font-size: var(--port-height); line-height: var(--port-height);}
#land .black p, .l-colour p{font-size: var(--land-1-height); line-height: var(--land-1-height); --x1: calc(var(--land-1-width) / -4); --x2: calc(var(--land-1-width) / 4);}
#land2 .black p, .l2-colour p{--x1: calc(var(--land-2-width) / -4); --x2: calc(var(--land-2-width) / 3);}
#port1 .black p, .p1-colour p{--x1: calc(var(--port-1-width) / -3); --x2: calc(var(--port-1-width) / 3);}
#port2 .black p, .p2-colour p{--x1: calc(var(--port-2-width) / -3); --x2: calc(var(--port-2-width) / 3);}

.flame{background-color: var(--flame);}
.ember{background-color: var(--ember);}
.solar{background-color: var(--solar);}
.aqua{background-color: var(--aqua);}
.tide{background-color: var(--tide);}
.depth{background-color: var(--depth);}
.colour-in{animation: turn-colour .2s cubic-bezier(.55,1.39,.51,-0.4) var(--delay1) both;}
.colour-out{animation: turn-colour .2s cubic-bezier(.55,1.39,.51,-0.4) var(--delay2) reverse both;}
.l-colour{height: 100%; width: var(--land-1-width);}
.l2-colour, .p1-colour, .p2-colour{width: 100%;}
.l-colour.flame{animation: p-container-horizontal 30s linear 1s infinite both, var(--extra-animation, none);}
.l-colour.ember{animation: i-container-horizontal 30s linear 1s infinite both, var(--extra-animation, none);}
.l-colour.solar{animation: x-container-horizontal 30s linear 1s infinite both, var(--extra-animation, none);}
.l-colour.aqua{animation: e-container-horizontal 30s linear 1s infinite both, var(--extra-animation, none);}
.l-colour.tide{animation: l-container-horizontal 30s linear 1s infinite both, var(--extra-animation, none);}
.l-colour.depth{animation: s-container-horizontal 30s linear 1s infinite both, var(--extra-animation, none);}
.l2-colour.flame, .p1-colour.flame, .p2-colour.flame{animation: p-container-vertical 30s linear 1s infinite both, var(--extra-animation, none);}
.l2-colour.ember, .p1-colour.ember, .p2-colour.ember{animation: i-container-vertical 30s linear 1s infinite both, var(--extra-animation, none);}
.l2-colour.solar, .p1-colour.solar, .p2-colour.solar{animation: x-container-vertical 30s linear 1s infinite both, var(--extra-animation, none);}
.l2-colour.aqua, .p1-colour.aqua, .p2-colour.aqua{animation: e-container-vertical 30s linear 1s infinite both, var(--extra-animation, none);}
.l2-colour.tide, .p1-colour.tide, .p2-colour.tide{animation: l-container-vertical 30s linear 1s infinite both, var(--extra-animation, none);}
.l2-colour.depth, .p1-colour.depth, .p2-colour.depth{animation: s-container-vertical 30s linear 1s infinite both, var(--extra-animation, none);}
.l-black, .l2-black, .p1-black, .p2-black{background-color: var(--black);}
.l-grey1, .l2-grey1, .p1-grey1, .p2-grey1{background-color: var(--grey-1);}
.l-grey2, .l2-grey2, .p1-grey2, .p2-grey2{background-color: var(--grey-2);}
.l-grey3, .l2-grey3, .p1-grey3{background-color: var(--grey-3);}
.l-grey4, .l2-grey4{background-color: var(--grey-4);}
.l-black, .l2-black{--colour: var(--apricot);}
.l-grey1, .l2-grey1, .p1-black{--colour: var(--peach);}
.l-grey2, .l2-grey2, .p1-grey1, .p2-black{--colour: var(--petal);}
.l-grey3, .l2-grey3, .p1-grey2, .p2-grey1{--colour: var(--blush);}
.l-grey4, .l2-grey4, .p1-grey3, .p2-grey2{--colour: var(--coral);}
.l-colour, .l2-colour, .p1-colour, .p2-colour{--colour: var(--crimson);}
.l-black:hover, .l2-black:hover, .l-grey1:hover, .l2-grey1:hover, .p1-black:hover, .l-grey2:hover, .l2-grey2:hover, .p1-grey1:hover, .p2-black:hover, .l-grey3:hover, .l2-grey3:hover, .p1-grey2:hover, .p2-grey1:hover, .l-grey4:hover, .l2-grey4:hover, .p1-grey3:hover, .p2-grey2:hover, .l-colour:hover, .l2-colour:hover, .p1-colour:hover, .p2-colour:hover{text-shadow: 1px 1px 0 var(--white), 2px 2px 0 var(--white), 3px 3px 0 var(--white), 4px 4px 0 var(--white), 5px 5px 0 var(--white), 6px 6px 0 var(--white), 7px 7px 0 var(--white), 8px 8px 0 var(--white);}
.l-black:hover, .l2-black:hover{background-color: var(--apricot); color: var(--black);}
.l-grey1:hover, .l2-grey1:hover, .p1-black:hover{background-color: var(--peach); color: var(--black);}
.l-grey2:hover, .l2-grey2:hover, .p1-grey1:hover, .p2-black:hover{background-color: var(--petal); color: var(--black);}
.l-grey3:hover, .l2-grey3:hover, .p1-grey2:hover, .p2-grey1:hover{background-color: var(--blush); color: var(--black);}
.l-grey4:hover, .l2-grey4:hover, .p1-grey3:hover, .p2-grey2:hover{background-color: var(--coral); color: var(--black);}
.l-colour:hover, .l2-colour:hover, .p1-colour:hover, .p2-colour:hover{background-color: var(--crimson); color: var(--black);}
.l-black p, .l2-black p, .l-grey2 p, .l2-grey2 p, .l-grey4 p, .l2-grey4 p{animation-direction:alternate-reverse;}
.l-black p, .l2-black p{--dur-1: 3s;--dur-2: 0.8s;}
.l-grey1 p, .l2-grey1 p{--dur-1: 3.5s; --dur-2: 0.8s;}
.l-grey2 p, .l2-grey2 p{--dur-1: 4s; --dur-2: 0.8s;}
.l-grey3 p, .l2-grey3 p{--dur-1: 5s; --dur-2: 0.8s;}
.l-grey4 p, .l2-grey4 p{--dur-1: 4.5s; --dur-2: 0.8s;}
.p1-black p{--dur-1: 3s; --dur-2: 0.8s;}
.p1-grey1 p{--dur-1: 3.5s; --dur-2: 0.8s;}
.p1-grey2 p{--dur-1: 4s; --dur-2: 0.8s;}
.p1-grey3 p{--dur-1: 5s; --dur-2: 0.8s;}
.p2-black p{--dur-1: 3s; --dur-2: 0.8s;}
.p2-grey1 p{--dur-1: 3.5s; --dur-2: 0.8s;}
.p2-grey2 p{--dur-1: 4s; --dur-2: 0.8s;}
/*------------------landscapes---------------*/
@media only screen and (orientation : landscape){
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 16/9){
  #land{display: grid;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/9){
  #land{display: grid;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3){
  #land2{display: grid;}
}
/*------------------portraits---------------*/
@media only screen and (orientation : portrait){
}
@media only screen and (orientation : portrait) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1){
  #port1{display: grid;}
}
@media only screen and (orientation : portrait) and (max-aspect-ratio: 3/4){
  #port2{display: grid;}
}
/*-------------------------------------------------*/
/*----------------reduce animation-----------------*/

/*-------------------------------------------------*/
/*-----------------------IOS-----------------------*/
@supports (-webkit-touch-callout: none) and (-webkit-overflow-scrolling: touch) {
  .black p, .l-colour p, .l2-colour p, .p1-colour p, .p2-colour p{
    margin-top: calc(var(--vh) * -0.5);
    padding-top: calc(var(--vh) * 0.5);
  }
  .port2 .black p, .p2-colour p, .port1 .black p, .p1-colour p, .land2 .black p, .l2-colour p{line-height: calc(var(--port-height) / 1.3);}
  .land .black p, .l-colour p{line-height: calc(var(--land-1-height) / 1.3);}
}
/*-------------------------------------------------*/
/*--------------------animation--------------------*/
@keyframes hor-slide{
  from {transform: translateX(var(--x1));}
  to {transform: translateX(var(--x2));}}
@keyframes blink{
  from {opacity: 1;}
  to {opacity: 0;}}
@keyframes turn-colour{
  to{background-color: var(--colour); color: var(--black); text-shadow: 1px 1px 0 var(--white), 2px 2px 0 var(--white), 3px 3px 0 var(--white), 4px 4px 0 var(--white), 5px 5px 0 var(--white), 6px 6px 0 var(--white), 7px 7px 0 var(--white), 8px 8px 0 var(--white);}}
@keyframes p-container-horizontal {
    0%{width: var(--land-1-width);}
    2%, 24%{width:0;}
    26%, 74%{width: var(--land-1-width);}
    76%, 86%{width:0;}
    88%, 100%{width: var(--land-1-width);}}
@keyframes i-container-horizontal {
    0%, 2%{width: var(--land-1-width);}
    4%, 22%{width:0;}
    24%, 76%{width: var(--land-1-width);}
    78%, 88%{width:0;}
    90%, 100%{width: var(--land-1-width);}}
@keyframes x-container-horizontal {
    0%, 4%{width: var(--land-1-width);}
    6%, 20%{width:0;}
    22%, 78%{width: var(--land-1-width);}
    80%, 90%{width:0;}
    92%, 100%{width: var(--land-1-width);}}
@keyframes e-container-horizontal {
    0%, 6%{width: var(--land-1-width);}
    8%, 18%{width:0;}
    20%, 80%{width: var(--land-1-width);}
    82%, 92%{width:0;}
    94%, 100%{width: var(--land-1-width);}}
@keyframes l-container-horizontal {
    0%, 8%{width: var(--land-1-width);}
    10%, 16%{width:0;}
    18%, 82%{width: var(--land-1-width);}
    84%, 94%{width:0;}
    96%, 100%{width: var(--land-1-width);}}
@keyframes s-container-horizontal {
    0%, 10%{width: var(--land-1-width);}
    12%, 14%{width:0;}
    16%, 84%{width: var(--land-1-width);}
    86%, 96%{width:0;}
    98%, 100%{width: var(--land-1-width);}}
@keyframes p-container-vertical {
    0%{height: var(--port-height);}
    2%, 24%{height:0;}
    26%, 74%{height: var(--port-height);}
    76%, 86%{height:0;}
    88%, 100%{height: var(--port-height);}}
@keyframes i-container-vertical {
    0%, 2%{height: var(--port-height);}
    4%, 22%{height:0;}
    24%, 76%{height: var(--port-height);}
    78%, 88%{height:0;}
    90%, 100%{height: var(--port-height);}}
@keyframes x-container-vertical {
    0%, 4%{height: var(--port-height);}
    6%, 20%{height:0;}
    22%, 78%{height: var(--port-height);}
    80%, 90%{height:0;}
    92%, 100%{height: var(--port-height);}}
@keyframes e-container-vertical {
    0%, 6%{height: var(--port-height);}
    8%, 18%{height:0;}
    20%, 80%{height: var(--port-height);}
    82%, 92%{height:0;}
    94%, 100%{height: var(--port-height);}}
@keyframes l-container-vertical {
    0%, 8%{height: var(--port-height);}
    10%, 16%{height:0;}
    18%, 82%{height: var(--port-height);}
    84%, 94%{height:0;}
    96%, 100%{height: var(--port-height);}}
@keyframes s-container-vertical {
    0%, 10%{height: var(--port-height);}
    12%, 14%{height:0;}
    16%, 84%{height: var(--port-height);}
    86%, 96%{height:0;}
    98%, 100%{height: var(--port-height);}}



@font-face {
  font-family: "Pixels";
    src:
    url("../fonts/Pixels.woff2") format("woff2"),
    url("../fonts/Pixels.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}