/* mtbinkdotcom.css v0.0.287 */
/* ========================= */

@import url("https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap");

:root { 
  --animation-view-transition: 500ms ease-in-out; /* APPROVED */
  
  --transition: all 0.25s ease-in-out; /* APPROVED */
  --animation-infinite-alternate: 0.5s ease-in-out infinite alternate; /* APPROVED */
  --animation-infinite: 1s ease-in-out infinite; /* APPROVED */
  --transform-coloured-boxes: perspective(2cm) rotateY(15deg); /* APPROVED */
  --transform-root-out: perspective(2cm) rotateY(15deg); /* APPROVED */
  --transform-root-in: perspective(2cm) rotateY(-15deg); /* APPROVED */
}

:root {  
  /* 
  source:
    https://m1.material.io/style/color.html#color-color-palette 
  */
  --color-red-100: #FFCDD2;
  --color-red-200: #EF9A9A;
  --color-red-300: #E57373;
  --color-red-400: #EF5350;
  --color-red-500: #F44336;
  --color-red-600: #E53935;
  --color-red-700: #D32F2F;
  --color-red-800: #C62828;
  --color-red-900: #B71C1C;

  --color-pink-100: #F8BBD0;
  --color-pink-200: #F48FB1;
  --color-pink-300: #F06292;
  --color-pink-400: #EC407A;
  --color-pink-500: #E91E63;
  --color-pink-600: #D81B60;
  --color-pink-700: #C2185B;
  --color-pink-800: #AD1457;
  --color-pink-900: #880E4F;

  --color-purple-100: #E1BEE7;
  --color-purple-200: #CE93D8;
  --color-purple-300: #BA68C8;
  --color-purple-400: #AB47BC;
  --color-purple-500: #9C27B0;
  --color-purple-600: #8E24AA;
  --color-purple-700: #7B1FA2;
  --color-purple-800: #6A1B9A;
  --color-purple-900: #4A148C;

  --color-deep-purple-100: #D1C4E9;
  --color-deep-purple-200: #B39DDB;
  --color-deep-purple-300: #9575CD;
  --color-deep-purple-400: #7E57C2;
  --color-deep-purple-500: #673AB7;
  --color-deep-purple-600: #5E35B1;
  --color-deep-purple-700: #512DA8;
  --color-deep-purple-800: #4527A0;
  --color-deep-purple-900: #311B92;

  --color-indigo-100: #C5CAE9;
  --color-indigo-200: #9FA8DA;
  --color-indigo-300: #7986CB;
  --color-indigo-400: #5C6BC0;
  --color-indigo-500: #3F51B5;
  --color-indigo-600: #3949AB;
  --color-indigo-700: #303F9F;
  --color-indigo-800: #283593;
  --color-indigo-900: #1A237E;

  --color-blue-100: #BBDEFB;
  --color-blue-200: #90CAF9;
  --color-blue-300: #64B5F6;
  --color-blue-400: #42A5F5;
  --color-blue-500: #2196F3;
  --color-blue-600: #1E88E5;
  --color-blue-700: #1976D2;
  --color-blue-800: #1565C0;
  --color-blue-900: #0D47A1;

  --color-light-blue-100: #B3E5FC;
  --color-light-blue-200: #81D4FA;
  --color-light-blue-300: #4FC3F7;
  --color-light-blue-400: #29B6F6;
  --color-light-blue-500: #03A9F4;
  --color-light-blue-600: #039BE5;
  --color-light-blue-700: #0288D1;
  --color-light-blue-800: #0277BD;
  --color-light-blue-900: #01579B;

  --color-cyan-100: #B2EBF2;
  --color-cyan-200: #80DEEA;
  --color-cyan-300: #4DD0E1;
  --color-cyan-400: #26C6DA;
  --color-cyan-500: #00BCD4;
  --color-cyan-600: #00ACC1;
  --color-cyan-700: #0097A7;
  --color-cyan-800: #00838F;
  --color-cyan-900: #006064;
  
  --color-teal-100: #B2DFDB;
  --color-teal-200: #80CBC4;
  --color-teal-300: #4DB6AC;
  --color-teal-400: #26A69A;
  --color-teal-500: #009688;
  --color-teal-600: #00897B;
  --color-teal-700: #00796B;
  --color-teal-800: #00695C;
  --color-teal-900: #004D40;

  --color-green-100: #C8E6C9;
  --color-green-200: #A5D6A7;
  --color-green-300: #81C784;
  --color-green-400: #66BB6A;
  --color-green-500: #4CAF50;
  --color-green-600: #43A047;
  --color-green-700: #388E3C;
  --color-green-800: #2E7D32;
  --color-green-900: #1B5E20;

  --color-light-green-100: #DCEDC8;
  --color-light-green-200: #C5E1A5;
  --color-light-green-300: #AED581;
  --color-light-green-400: #9CCC65;
  --color-light-green-500: #8BC34A;
  --color-light-green-600: #7CB342;
  --color-light-green-700: #689F38;
  --color-light-green-800: #558B2F;
  --color-light-green-900: #33691E;

  --color-lime-100: #F0F4C3;
  --color-lime-200: #E6EE9C;
  --color-lime-300: #DCE775;
  --color-lime-400: #D4E157;
  --color-lime-500: #CDDC39;
  --color-lime-600: #C0CA33;
  --color-lime-700: #AFB42B;
  --color-lime-800: #9E9D24;
  --color-lime-900: #827717;

  --color-yellow-100: #FFF9C4;
  --color-yellow-200: #FFF59D;
  --color-yellow-300: #FFF176;
  --color-yellow-400: #FFEE58;
  --color-yellow-500: #FFEB3B;
  --color-yellow-600: #FDD835;
  --color-yellow-700: #FBC02D;
  --color-yellow-800: #F9A825;
  --color-yellow-900: #F57F17;

  --color-amber-100: #FFECB3;
  --color-amber-200: #FFE082;
  --color-amber-300: #FFD54F;
  --color-amber-400: #FFCA28;
  --color-amber-500: #FFC107;
  --color-amber-600: #FFB300;
  --color-amber-700: #FFA000;
  --color-amber-800: #FF8F00;
  --color-amber-900: #FF6F00;

  --color-orange-100: #FFE0B2;
  --color-orange-200: #FFCC80;
  --color-orange-300: #FFB74D;
  --color-orange-400: #FFA726;
  --color-orange-500: #FF9800;
  --color-orange-600: #FB8C00;
  --color-orange-700: #F57C00;
  --color-orange-800: #EF6C00;
  --color-orange-900: #E65100;

  --color-deep-orange-100: #FFCCBC;
  --color-deep-orange-200: #FFAB91;
  --color-deep-orange-300: #FF8A65;
  --color-deep-orange-400: #FF7043;
  --color-deep-orange-500: #FF5722;
  --color-deep-orange-600: #F4511E;
  --color-deep-orange-700: #E64A19;
  --color-deep-orange-800: #D84315;
  --color-deep-orange-900: #BF360C;

  --color-brown-100: #D7CCC8;
  --color-brown-200: #BCAAA4;
  --color-brown-300: #A1887F;
  --color-brown-400: #8D6E63;
  --color-brown-500: #795548;
  --color-brown-600: #6D4C41;
  --color-brown-700: #5D4037;
  --color-brown-800: #4E342E;
  --color-brown-900: #3E2723;

  --color-gray-100: #F5F5F5;
  --color-gray-200: #EEEEEE;
  --color-gray-300: #E0E0E0;
  --color-gray-400: #BDBDBD;
  --color-gray-500: #9E9E9E;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  
  --color-blue-gray-100: #CFD8DC;
  --color-blue-gray-200: #B0BEC5;
  --color-blue-gray-300: #90A4AE;
  --color-blue-gray-400: #78909C;
  --color-blue-gray-500: #607D8B;
  --color-blue-gray-600: #546E7A;
  --color-blue-gray-700: #455A64;
  --color-blue-gray-800: #37474F;
  --color-blue-gray-900: #263238;
}

:root {
  /* font-size: xx-small; */
  /* font-size: x-small;  */
  /* font-size: small;    */
  /* font-size: medium;   */ /* browser default, fb distract */
  /* font-size: large;    */ /* fb distract */
  font-size: x-large; /* APPROVED */
  
  /* too big, .box-coloured 1 column, .box-social 1 column */
  /* font-size: xx-large; */ 
  
  /* The Biggus Dickus, only 2 words per line, .box-coloured 1 column, .box-social 1 column, website version overflow */
  /* font-size: xxx-large;*/ 
  
  scroll-behavior: smooth; /* APPROVED */
  scroll-padding-top: 100px; /* APPROVED */
  
  font-family: sans-serif; /* APPROVED */
  
  background-color: white;
  color: black;
     
  --border-light: 1px solid black; /* APPROVED */
  --border-dark:  1px solid var(--color-gray-400); /* APPROVED */
  --border-thick: 0.5rem; /* APPROVED */
  --border-radius: 2rem; /* APPROVED */
  --border-new-tran: var(--border-thick) solid transparent; /* APPROVED */
  --border-new-light: var(--border-thick) solid black; /* APPROVED */
  --border-new-dark: var(--border-thick) solid var(--color-gray-400); /* APPROVED */
  
  --box-shadow-light: 0.5rem 0.5rem black; /* APPROVED */
  
  --background-color-dark: var(--color-gray-900); /* APPROVED */
  --text-color-dark:       var(--color-gray-400); /* APPROVED special */
  
  /* --margin-top:    0.2rem; */
  /* --margin-bottom: 0.2rem; */
  --margin-top:    1rem; /* APPROVED */
  --margin-bottom: 1rem; /* APPROVED */
  
  --padding:       0.2rem; /* APPROVED */
  --gap:           0.2rem; /* APPROVED */
  
  --line-height:   1.75; /* APPROVED and unitless! */
  
  /* 100/(2)/2 = 25%   */
  /* 100/(3)/2 = 16.7% */
  /* 100/(4)/2 = 12.5% */
  /* 100/(5)/2 = 10%   */
  --percent-body-left-right: 16.7%; /* APPROVED */
  --percent-gcse-padding-left-right: 10%; /* APPROVED */
  
  /* 
  --ws-font-size:
  #.  1.6rem = current waktu solat overflow AM/PM on handphone potrait
  #.  3.6rem = current waktu solat overflow AM/PM on tablet landscape
  */
  --ws-font-size: 1.5rem; /* APPROVED */
  
  /*--big-emoji-font-size: 13rem;*/ /* touched border */
  --big-emoji-font-size: 12rem; /* APPROVED */
  
  --hero-font-size: 2.4rem; /* APPROVED */
}

@view-transition {
  navigation: auto;
}

/* avoid scale() */
@keyframes move-out {
  from {
    transform-origin: center left;
    transform: perspective(2cm) rotateY(0deg) translateX(0);
    opacity: 1;
  }

  to {
    transform-origin: center left;
    transform: var(--transform-root-out) translateX(-100vw);
    /* transform: translateX(-100vw); */
    opacity: 0;
  }
}

@keyframes move-in {
  from {
    transform-origin: center left;
    transform: var(--transform-root-in) translateX(100vw);
    /* transform: translateX(100vw); */
    opacity: 0;
  }

  to {
    transform-origin: center left;
    transform: perspective(2cm) rotateY(0deg) translateX(0);
    opacity: 1;
  }
}

@keyframes move-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(300vw);
  }
}

@keyframes move-left {
  from {
    transform: translateX(300vw);
  }

  to {
    transform: translateX(0);
  }
}

::view-transition-old(root) {
  animation: move-out var(--animation-view-transition);
}

::view-transition-new(root) {
  animation: move-in var(--animation-view-transition);
}

/* view-transition-name */
/* ==================== */
div.container_contents {
  /* view-transition-name: vtn-div-container-contents; */
}

nav {
  /* view-transition-name: vtn-nav; */
}

h1 {
  /* view-transition-name: vtn-h1; */
}

div#page-title {
  view-transition-name: vtn-page-title;
}

div#container-logotop {
  /* view-transition-name: vtn-div-container-logotop; */
}

:target,
#footer:target {
  background: linear-gradient(to right, var(--color-green-300), transparent);
  color: black;
}

:target a {
  color: black;
}

h1, 
h2, 
h3,
div#page-title {
  font-family: "Protest Riot";
}

/* begin mobile default */
/* ==================== */

/* date-time utility */
div.dtu,
div.dtu_logotop {
  background-color: black;
  text-align: center;
  font-family: monospace;
  font-weight: bold;
  margin-top: var(--margin-top);
}

a.dtu_link {
  text-decoration: none;
}

div#output_div_dtu {
  font-size: var(--ws-font-size);
  line-height: normal;
}

div#logotop_charts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  background-color: black;
  width: 100%;
  padding-bottom: var(--padding);
  gap: var(--gap);
}

.pie-chart-mini,
.orbit-chart-mini { 
  width: 2.5rem;
  height: 2.5rem;
}

div#container-logotop {
  margin-top: 0;
}

h1, 
div.container, 
nav,
dd,
div#page-title {
  margin-top: var(--margin-top);
  margin-bottom: var(--margin-bottom);
  padding: var(--padding);
  border: var(--border-light);
  box-shadow: var(--box-shadow-light);
}

fieldset {
  margin-top: var(--margin-top);
  margin-bottom: var(--margin-bottom);
  padding: var(--padding);
  border: var(--border-light);
}

.buy-buttons {
  text-align: center;
}

.buy-buttons a {
  text-decoration: none;
}

.buy-buttons a:hover {
  background-color: transparent;
}

.buy-button {
  border-radius: var(--border-radius);
  cursor: pointer;  
  color: white;
  font-size: 1rem;
  text-shadow: 3px 3px 0px black;
  background-color: var(--color-green-900); 
  padding: calc(var(--padding)*3);
  font-weight: bold;
}

.buy-button:hover {
  background-color: var(--color-green-500);
}

details {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}  

h1,
div#page-title {  
  text-align: center;
  text-wrap: balance;
  
  -webkit-user-select: all;
  user-select: all;
  
  background-color: var(--background-color-dark);
  color: var(--text-color-dark);
    
  border: var(--border-thick) solid var(--text-color-dark);
  
  /* due to background-clip truncated, this is the max */
  font-size: xxx-large;
  
  font-weight: bold;
}

div#page-title {
  margin-top: 0;
}

h2 {
  margin: 0;
  padding: 0;
  margin-top: var(--margin-top);
}

h3 {
  margin: 0;
  padding: 0;
  margin-top: var(--margin-top);
}

a {
  color: var(--color-blue-900);
}

/* boxes */
/* ===== */
.coloured-boxes, 
.uncoloured-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.coloured-boxes,
.uncoloured-boxes {
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.coloured-boxes a {
  text-decoration: none;
}

.coloured-boxes a:hover {
  background-color: transparent;
}

.box-coloured {
  /* width: 9ch; */
  /*width: 4.9rem;*/ /* touched border */
  width: 5rem;
  aspect-ratio: 1;
  text-align: center;
  /* padding: 0; */ /* touched border */
  padding: var(--padding);
  color: black; /* overwrite a */
  border: var(--border-light);
}

.box-logo {
  height: 1rem;
  font-size: 1.75rem;
}

div#box0 {
  background-color: var(--color-gray-200);
  border: var(--border-thick) solid var(--color-gray-200);
} 
div#box1 {
  background-color: var(--color-orange-200);
  border: var(--border-thick) solid var(--color-orange-200);
}               
div#box2 {
  background-color: var(--color-yellow-200);
  border: var(--border-thick) solid var(--color-yellow-200);
}
div#box3 {
  background-color: var(--color-green-200);
  border: var(--border-thick) solid var(--color-green-200);
}
div#box4 {
  background-color: var(--color-blue-200);
  border: var(--border-thick) solid var(--color-blue-200);
}
div#box5 {
  background-color: var(--color-purple-200);
  border: var(--border-thick) solid var(--color-purple-200);
}

@keyframes box0_animation {
    0% {
    border:        var(--border-thick) solid transparent;
  }
   25% {
    border-top:    var(--border-thick) solid var(--color-gray-500);
    border-right:  var(--border-thick) solid transparent;
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   50% {
    border-top:    var(--border-thick) solid var(--color-gray-500);
    border-right:  var(--border-thick) solid var(--color-gray-900);
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   75% {
    border-top:    var(--border-thick) solid var(--color-gray-500);
    border-right:  var(--border-thick) solid var(--color-gray-900);
    border-bottom: var(--border-thick) solid var(--color-gray-900);
    border-left:   var(--border-thick) solid transparent;
  }
  100% {
    border:        var(--border-thick) solid var(--color-gray-500);
  }  
}

@keyframes box1_animation {
    0% {
    border:        var(--border-thick) solid transparent;
  }
   25% {
    border-top:    var(--border-thick) solid var(--color-orange-500);
    border-right:  var(--border-thick) solid transparent;
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   50% {
    border-top:    var(--border-thick) solid var(--color-orange-500);
    border-right:  var(--border-thick) solid var(--color-orange-900);
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   75% {
    border-top:    var(--border-thick) solid var(--color-orange-500);
    border-right:  var(--border-thick) solid var(--color-orange-900);
    border-bottom: var(--border-thick) solid var(--color-orange-900);
    border-left:   var(--border-thick) solid transparent;
  }
  100% {
    border:        var(--border-thick) solid var(--color-orange-500);
  }  
}

@keyframes box2_animation {
    0% {
    border:        var(--border-thick) solid transparent;
  }
   25% {
    border-top:    var(--border-thick) solid var(--color-yellow-500);
    border-right:  var(--border-thick) solid transparent;
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   50% {
    border-top:    var(--border-thick) solid var(--color-yellow-500);
    border-right:  var(--border-thick) solid var(--color-yellow-900);
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   75% {
    border-top:    var(--border-thick) solid var(--color-yellow-500);
    border-right:  var(--border-thick) solid var(--color-yellow-900);
    border-bottom: var(--border-thick) solid var(--color-yellow-900);
    border-left:   var(--border-thick) solid transparent;
  }
  100% {
    border:        var(--border-thick) solid var(--color-yellow-500);
  }  
}

@keyframes box3_animation {
    0% {
    border:        var(--border-thick) solid transparent;
  }
   25% {
    border-top:    var(--border-thick) solid var(--color-green-500);
    border-right:  var(--border-thick) solid transparent;
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   50% {
    border-top:    var(--border-thick) solid var(--color-green-500);
    border-right:  var(--border-thick) solid var(--color-green-900);
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   75% {
    border-top:    var(--border-thick) solid var(--color-green-500);
    border-right:  var(--border-thick) solid var(--color-green-900);
    border-bottom: var(--border-thick) solid var(--color-green-900);
    border-left:   var(--border-thick) solid transparent;
  }
  100% {
    border:        var(--border-thick) solid var(--color-green-500);
  }  
}

@keyframes box4_animation {
    0% {
    border:        var(--border-thick) solid transparent;
  }
   25% {
    border-top:    var(--border-thick) solid var(--color-blue-500);
    border-right:  var(--border-thick) solid transparent;
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   50% {
    border-top:    var(--border-thick) solid var(--color-blue-500);
    border-right:  var(--border-thick) solid var(--color-blue-900);
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   75% {
    border-top:    var(--border-thick) solid var(--color-blue-500);
    border-right:  var(--border-thick) solid var(--color-blue-900);
    border-bottom: var(--border-thick) solid var(--color-blue-900);
    border-left:   var(--border-thick) solid transparent;
  }
  100% {
    border:        var(--border-thick) solid var(--color-blue-500);
  }  
}

@keyframes box5_animation {
    0% {
    border:        var(--border-thick) solid transparent;
  }
   25% {
    border-top:    var(--border-thick) solid var(--color-purple-500);
    border-right:  var(--border-thick) solid transparent;
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   50% {
    border-top:    var(--border-thick) solid var(--color-purple-500);
    border-right:  var(--border-thick) solid var(--color-purple-900);
    border-bottom: var(--border-thick) solid transparent;
    border-left:   var(--border-thick) solid transparent;
  }
   75% {
    border-top:    var(--border-thick) solid var(--color-purple-500);
    border-right:  var(--border-thick) solid var(--color-purple-900);
    border-bottom: var(--border-thick) solid var(--color-purple-900);
    border-left:   var(--border-thick) solid transparent;
  }
  100% {
    border:        var(--border-thick) solid var(--color-purple-500);
  }  
}

div#box0.active {
  animation: box0_animation var(--animation-infinite-alternate);
  background-color: var(--color-gray-100);
}
div#box1.active {
  animation: box1_animation var(--animation-infinite-alternate);
  background-color: var(--color-orange-100);
}
div#box2.active {
  animation: box2_animation var(--animation-infinite-alternate);
  background-color: var(--color-yellow-100);
}
div#box3.active {
  animation: box3_animation var(--animation-infinite-alternate);
  background-color: var(--color-green-100);
}
div#box4.active {
  animation: box4_animation var(--animation-infinite-alternate);
  background-color: var(--color-blue-100);
}
div#box5.active {
  animation: box5_animation var(--animation-infinite-alternate);
  background-color: var(--color-purple-100);
}

div#box0,
div#box1,
div#box2,
div#box3,
div#box4,
div#box5 {
  transition: var(--transition);
}

div#box0:hover,
div#box1:hover,
div#box2:hover,
div#box3:hover,
div#box4:hover,
div#box5:hover,
div#box0.active,
div#box1.active,
div#box2.active,
div#box3.active,
div#box4.active,
div#box5.active {
  transform-origin: center left;
  transform: var(--transform-coloured-boxes);
}

div#box0:hover {
  background-color:    var(--color-gray-100);
  border-top-color:    var(--color-gray-500);
  border-left-color:   var(--color-gray-500);
  border-right-color:  var(--color-gray-900); 
  border-bottom-color: var(--color-gray-900); 
}
div#box1:hover {
  background-color:    var(--color-orange-100);
  border-top-color:    var(--color-orange-500);
  border-left-color:   var(--color-orange-500);
  border-right-color:  var(--color-orange-900);
  border-bottom-color: var(--color-orange-900);
}
div#box2:hover {
  background-color:    var(--color-yellow-100);
  border-top-color:    var(--color-yellow-500);
  border-left-color:   var(--color-yellow-500);
  border-right-color:  var(--color-yellow-900);
  border-bottom-color: var(--color-yellow-900);
}
div#box3:hover {
  background-color:    var(--color-green-100);
  border-top-color:    var(--color-green-500);
  border-left-color:   var(--color-green-500);
  border-right-color:  var(--color-green-900);
  border-bottom-color: var(--color-green-900);
}
div#box4:hover {
  background-color:    var(--color-blue-100);
  border-top-color:    var(--color-blue-500);
  border-left-color:   var(--color-blue-500);
  border-right-color:  var(--color-blue-900);
  border-bottom-color: var(--color-blue-900);
}
div#box5:hover {
  background-color:    var(--color-purple-100);
  border-top-color:    var(--color-purple-500);
  border-left-color:   var(--color-purple-500);
  border-right-color:  var(--color-purple-900);
  border-bottom-color: var(--color-purple-900);
}

.box {
  padding: var(--padding);
}

.box-social {
  /* width: 11ch; */
  width: 6rem;
}

.box-social-left {
  text-align: left;
}

.box-social-center-or-left {
  text-align: center;
}

.box-month {
  width: 6rem;
  text-align: center;
}

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: var(--line-height);
}

.breadcrumb-item {
  display: inline;
}

.breadcrumb-item + .breadcrumb-item::before {
  /*content: " → ";*/ /* \2192 : arrow too thin */
  content: " ▶ "; /* \25B6 : Black Right-Pointing Triangle */
}

li.breadcrumb-item.active {
  -webkit-user-select: all;
  user-select: all;
}

ol.list li, 
ul.list li {
  line-height: var(--line-height);
}

div.container:has(> ol.list),
div.container:has(> ul.list) {
  padding-left: 1rem;
  padding-right: 1rem;
}

hr {
  border: var(--border-light);
}

li  a,
p   a, 
h2  a, 
div a {
  transition: var(--transition);
}

li  a:hover,
p   a:hover, 
h2  a:hover, 
div a:hover {
  background-color: var(--color-yellow-500);
  color: black;
}

#logofooter_link:hover,
#output_a:hover,
div.logotop a:hover,
div.stats-box a:hover,
div.rss a:hover {
  background-color: transparent;
}

div.footer {
  text-align: center;
}

td.td {
  padding: var(--padding);
  border: var(--border-light);
}

code {
  /* background-color: var(--color-gray-300); */
  /* color: black; */
  background-color: #2d2d2d;;
  color: #cccccc;
  display: inline-block;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-bottom: 0.2rem;
  /* text-wrap: wrap; */ /* not for now */
  font-size: 1rem;
  
  -webkit-user-select: all;
  user-select: all;
}

p, 
li ol.list, 
li ul.list,
dl,
details {
  line-height: var(--line-height);
}

dl {
  padding: var(--padding);
}

dt {
  margin: 0;
}

dd {
  margin-top: 0;
  margin-bottom: 2rem;
  margin-right: 1rem;
}

.container_cse {
  background-color: var(--color-gray-300);
}

.container_buy {
  border: var(--border-light);
  border-left:  var(--border-thick) solid var(--color-green-900);
  border-right: var(--border-thick) solid var(--color-green-900);
  padding-top: var(--padding);
  padding-bottom: var(--padding);
  padding-left: var(--percent-body-left-right);
  padding-right: var(--percent-body-left-right);
}

div.container_contents {
  margin-left: 1rem;
  margin-right: 1rem;
  box-shadow: var(--box-shadow-light);
  border-left: var(--border-thick) solid var(--color-blue-900);
}

details details {
  padding-left: 1rem; /* Quick access */
}

mark {
  background-color: var(--color-yellow-300);
  color: black;
}

.container-flag a:hover {
  background-color: transparent;
}

#___gcse_0 {
  padding: 0;
  padding-left:  var(--percent-gcse-padding-left-right);
  padding-right: var(--percent-gcse-padding-left-right);
  text-align: center;
}

.bbcode_box {
  text-align: center;
}

.button_speak {
  color: darkgreen;
  font-family: monospace;
  /*width: 75%;*/
  margin-left: 0.75rem;
  text-align: left;
}

.button_speak_interesting {
  /*
  font-style: italic;
  font-weight: bold;
  text-transform: uppercase;
  */
  text-decoration: underline overline;
}

/* calendar */
/* ======== */
.this_year,
.this_month {
  border: 3px solid var(--color-green-900); /* special */
  border-radius: 1rem;
  padding: 0.5rem;
  display: inline-block;
  margin: var(--padding);
}

span[id^="month"] {
  font-family: monospace;
  font-size: 1rem;
  white-space: pre;
}

.event {
  color: var(--color-blue-900);
}

.cuti_sekolah {
  background-color: var(--color-yellow-500);
  color: black;  
}

.today {
  border: 3px solid var(--color-green-900); /* special */
  border-radius: 2ch;
  padding: var(--padding);
}

/* common classes */
/* ============== */
.balance {
  text-wrap: balance;
}

.ofa {
  overflow: auto;
}

.wwbw {
  word-wrap: break-word;
}

.c {
  text-align: center;
}

.l {
  text-align: left;
}

.hero {
  font-size: var(--hero-font-size);
  font-weight: bold;
  padding: var(--padding);
}

@keyframes new_light {
    0% {
    border: var(--border-new-tran);
  }
   25% {
    border-top: var(--border-new-light);
    border-right: var(--border-new-tran);
    border-bottom: var(--border-new-tran);
    border-left: var(--border-new-tran);
  }
   50% {
    border-top: var(--border-new-light);
    border-right: var(--border-new-light);
    border-bottom: var(--border-new-tran);
    border-left: var(--border-new-tran);
  }
   75% {
    border-top: var(--border-new-light);
    border-right: var(--border-new-light);
    border-bottom: var(--border-new-light);
    border-left: var(--border-new-tran);
  }
  100% {
    border: var(--border-new-light);
  }  
}

@keyframes new_dark {
    0% {
    border: var(--border-new-tran);
  }
   25% {
    border-top: var(--border-new-dark);
    border-right: var(--border-new-tran);
    border-bottom: var(--border-new-tran);
    border-left: var(--border-new-tran);
  }
   50% {
    border-top: var(--border-new-dark);
    border-right: var(--border-new-dark);
    border-bottom: var(--border-new-tran);
    border-left: var(--border-new-tran);
  }
   75% {
    border-top: var(--border-new-dark);
    border-right: var(--border-new-dark);
    border-bottom: var(--border-new-dark);
    border-left: var(--border-new-tran);
  }
  100% {
    border: var(--border-new-dark);
  }  
}

.new {
  font-weight: bold;
  display: inline-block;
  margin-top: var(--margin-top);
  margin-bottom: var(--margin-bottom);
  padding: var(--padding);
  animation: new_light var(--animation-infinite-alternate);
}

/* NEO: Android TV and above */
/* ========================= */
@media (min-width: 960px) {
  :root {
    --ws-font-size: 3.5rem;
    --hero-font-size: 5rem;
    --big-emoji-font-size: 30rem;
    
    /* fed-up on iPad */
    --percent-gcse-padding-left-right: 16.7%;
  }

  body {
    padding-left: var(--percent-body-left-right);
    padding-right: var(--percent-body-left-right);
  }
  
  .logotop {
    display: inline-block;
  }
  
  .wau {
    position: relative;
    top: -0.45rem;
  }
  
  div.container_contents {
    margin-left: var(--percent-body-left-right);
    margin-right: var(--percent-body-left-right);
  }
  
  #img_flagcounter {
    width: 700px;
  }
}

/* responsive section */
/* ================== */

/* NEO: handphone potrait */
#smiley {
  margin-bottom: 15rem;
}

/* NEO: handphone landscape */
/* NEO: tablet potrait */
@media (min-width: 712px) {
  .box-social-center-or-left {
    text-align: left;
  }

  #month-boxes {
    width: 20rem;
    margin-left: auto;
    margin-right: auto;
  }
  
  #smiley {
    margin-bottom: 0;
  }
}

/* NEO: tablet landscape */
@media (min-width: 1024px) {  
  .box-social-center-or-left {
    text-align: center;
  }
  
  div#logotop_charts,
  div.dtu_logotop {
    /* width: 67%; */
    margin-left: auto;
    margin-right: auto;
  }
}

/* NEO: laptop landscape */
@media (min-width: 1368px) {
}

/* dark mode */
/* ========= */
/* FORCEDARKMODE */
/* @media (prefers-color-scheme:dark) { */
  :root {
    background-color: black;
    color: var(--text-color-dark);
  }
  
  a {
    color: var(--color-blue-200);
  }
  
  hr {
    border: var(--border-dark);
  }

  h1,  
  div.container, 
  nav, 
  fieldset,
  dd,
  div#page-title {
    box-shadow: none; /* no shadow in dark */
    border: var(--border-dark);
    background-color: var(--background-color-dark);
  }

  h1,
  div#page-title {
    background: linear-gradient(orange, yellow, orange);
    background-clip: text;
    color: transparent;
    
    border-style: solid;
    border-width: var(--border-thick);
    border-color: yellow;
    border-image: linear-gradient(yellow, orange) 30;
  }

  td.td {
    border: var(--border-dark);
  }
  
  .container_cse {
    background-color: var(--background-color-dark);
  }

  div.container_contents {
    box-shadow: none;
    border-left: var(--border-thick) solid var(--color-blue-200);
  }
  
  #footer:target {
    background: linear-gradient(to left, var(--background-color-dark) 99%, var(--color-green-300) 1%);
    color: var(--text-color-dark);
  }
  
  #footer:target a {
    color: var(--color-blue-200);
    transition: var(--transition);
  }
  
  #footer:target a:hover {
    background-color: var(--color-yellow-300);
    color: black;
  }
  
  #footer:target #logofooter_link:hover {
    background-color: transparent;
  }
  
  .container_buy {
    border: var(--border-dark);
    border-left:  var(--border-thick) solid var(--color-green-200);
    border-right: var(--border-thick) solid var(--color-green-200);
  }
  
  .new {
    animation: new_dark var(--animation-infinite-alternate);
  }
  
  .this_year,
  .this_month {
    border-color: var(--color-green-200);
  }
  
  .event {
    color: var(--color-blue-200);
  }
  
  .today {
    border-color: var(--color-green-200);
  }
  
  .button_speak {
    background-image: none;
    background-color: black;
    color: lightgreen;
    border-color: lightgreen;
  }
/* } */