/* DEFAULT COLOR, SIZE and TITLE SETTINGS AS PER W3 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  --max-width-media: 600px; /* SET THE SAME AS MEDIA QUERY BELOW */

  --ahacol: var(--color2);
  --ahahover: #6940e6;
  --ahgrid: rgb(232, 227, 247);
  --ahgtext: #06065d;
  --ahlink: var(--color5);
  --color1: red;
  --color2: white;
  --color10: #555;
  --color11: #292727;
  --color4: green;
  --color5: blue;
  --color7: rgb(170, 170, 252);

  /* grid cell border */
  --color8: white;
  --color9: rgb(14, 13, 13);
  --colrule: rgb(167, 160, 160);
  --dmode: none;
  --gridbg: hsl(340 80% 50%);
  --gridtx: hsl(253, 80%, 70%);
  --hbbot: #4caf50;
  --hbhov: #ffc107;
  --hbmid: #2196f3;
  --hbtop: #ff5733;
  --hover-color: #10d254;
  --link-color: #0071ff;
  --navbg: rgba(180, 188, 192, 0.5);
  --nmode: block;
  --overlay: rgba(0, 0, 0, 0.5);
  --secondary-color: #42e4d1;
  --starscol: gold;
  --tbg: #f8fafa;
  --tborder: 1px solid #ddd;
  --text-color: #06065d;
  --nav-text: #000;
  --thoverbg: #91a89a;
  --trowaltbg: #cfd1de;
  --trowbg: #eef6f2;
  --background-color: white;
  --paneblur: rgba(68, 52, 193, 0);
  --bodycol1: #afaebd;
  --bodycol2: #b1d0e4;
  --bodycol3: #d4f8d6;
  --bodycol4: #d5c4bd;
  --ext-link-col: var(--color5);
  --ext-link-bg: var(--hbhov);
  --ext-link-hov: rgb(13, 12, 12);
}

.night-mode {
  --ahacol: var(--color2);
  --ahahover: var(--ahgtext);
  --ahgrid: rgb(46, 50, 46);
  --ahgtext: var(--color8);
  --ahlink: #e9e90f;
  --background-color: #000;
  --colrule: rgb(71, 65, 65);
  --color11: #292727;
  --color2: black;
  --color4: green;
  --color5: blue;
  --color7: rgb(253, 251, 251);
  --color8: white;
  --color9: rgb(14, 13, 13);
  --colrule: rgb(167, 160, 160);
  --dmode: block;
  --gridbg: hsl(340 80% 50%);
  --gridtx: hsl(253, 80%, 70%);
  --hbbot: #4caf50;
  --hbhov: #ffc107;
  --hbmid: #2196f3;
  --hbtop: #ff5733;
  --hover-color: #10d254;
  --link-color: #e9e90f;
  --navbg: rgba(33, 42, 55, 0.6);
  --nav-text: #fff;
  --nmode: none;
  --overlay: rgba(0, 0, 0, 0.5);
  --secondary-color: #f03838;
  --starscol: gold;
  --tbg: #2b2e2e;
  --tborder: 1px solid #ddd;
  --thoverbg: #91a89a;
  --trowaltbg: var(--color5);
  --trowbg: var(--color11);
  --text-color: white;
  --background-color: white;
  --paneblur: rgba(255, 255, 255, 0.95);
  --bodycol1: #0a044d;
  --bodycol2: #05385a;
  --bodycol3: #033706;
  --bodycol4: #40302a;
  --ext-link-col: var(--ahlink);
  --ext-link-bg: var(--hbhov);
}

body {
  font-size: 1.5em;
  line-height: 1.5;
  font-family: "Poppins", "Segoe UI", "Helvetica Neue", sans-serif;
  color: var(--text-color);
  background: linear-gradient(
    180deg,
    var(--bodycol1) 20%,
    var(--bodycol2) 40%,
    var(--bodycol3) 60%,
    var(--bodycol4) 80%
  );
}

h1 {
  font-size: 2em; /* 32px */
  margin: 0.67em 0;
  line-height: 1.2;
}

h2 {
  font-size: 1.5em; /* 24px */
  margin: 0.75em 0;
  line-height: 1.3;
}

h3 {
  font-size: 1.17em; /* 18.72px */
  margin: 0.83em 0;
  line-height: 1.4;
}

h4 {
  font-size: 1em; /* 16px */
  margin: 1.12em 0;
  line-height: 1.5;
}

h5 {
  font-size: 0.83em; /* 13.28px */
  margin: 1.5em 0;
  line-height: 1.6;
}

h6 {
  font-size: 0.67em; /* 10.72px */
  margin: 1.67em 0;
  line-height: 1.7;
}