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

:root {
  --color1: red;
  --color2: white;
  --color3: yellow;
  --color4: green;
  --color5: blue;
  --color6: #c1e1e3;
  --color7: rgb(170, 170, 252);
  --color8: white;
  --color9: rgb(14, 13, 13);
  --color10: gray;
  --color11: #292727;
}

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

  --ahgtext: #06065d;
  --ahlink: var(--color5);

  /* Buttons*/
  --button-text: var(--color11);
  --button-hover-text: var(--color2);
  --button-color: var(--color7);
  --button-hover-color: var(--color5);
  --shadow1: rgba(0, 0, 0, 0.5);
  --button-shadow: var(--shadow1) 0.33rem 0.33rem 0.6rem;
  --button-shadow-hover: var(--shadow1) 0.15rem 0.15rem 0.4rem;
  --button-shadow-active: inset var(--shadow1) 0.15rem 0.15rem 0.4rem;

  /* Boxes */
  --box-shadow-col: var(--shadow1);
  --box-border: transparent;
  --box-bg: var(--color1);
  --filter-drop-shadow: drop-shadow(22px 22px 18px var(--box-shadow-col));
  --accent-strong: var(--color5);
  --darkgrey: var(--color10);
  --dmode: none;
  --hbbot: #4caf50;
  --hbhov: #ffc107;
  --hbmid: #2196f3;
  --hbtop: #ff5733;
  --hover-color: #3312f1;
  --link-color: #0071ff;
  --lightblue: var(--color7);
  --navbg: rgba(110, 159, 183, 0.6);
  --nmode: block;
  --off-white: rgb(83, 42, 231);
  --overlay: var(--shadow1);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --text-color: #06065d;
  --nav-text: #000;
  --background-color: white;
  --bodycol1: #afaebd;
  --bodycol2: #b1d0e4;
  --bodycol3: #d4f8d6;
  --bodycol4: #d5c4bd;
  --glass-bg: rgba(255, 255, 255, 0.2);
}

.night-mode {
  --ahgtext: var(--color8);
  --ahlink: #e9e90f;

  /* Buttons*/
  --button-text: var(--color11);
  --button-hover-text: var(--color2);
  --button-color: var(--color7);
  --button-hover-color: var(--color5);
  --shadow1: rgba(255, 255, 255, 0.5);
  --button-shadow: var(--shadow1) 0.33rem 0.33rem 0.6rem;
  --button-shadow-hover: var(--shadow1) 0.15rem 0.15rem 0.4rem;
  --button-shadow-active: inset var(--shadow1) 0.15rem 0.15rem 0.4rem;

  /*  Boxes */
  /* Box Background Color */
  --box-bg: var(--color2);

  /* Box Border Color */
  --box-border: transparent;
  --box-shadow-col: var(--color9);

  --colrule: rgb(167, 160, 160);
  --dmode: block;
  --hbbot: #4caf50;
  --hbhov: #ffc107;
  --hbmid: #2196f3;
  --hbtop: #ff5733;
  --hover-color: #e49f0c;
  --link-color: #e9e90f;
  --navbg: rgba(33, 42, 55, 0.6);
  --nav-text: #fff;
  --background-color: #000;
  --nmode: none;
  --overlay: var(--shadow1);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --text-color: white;
  --accent-strong: var(--color5);
  --paneblur: rgba(255, 255, 255, 0.95);
  --bodycol1: #0a044d;
  --bodycol2: #05385a;
  --bodycol3: #033706;
  --bodycol4: #40302a;
}

body {
  font-size: 1rem;
  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%
  );
}