/*CSS variables*/
:root {
  --bg-color01: rgb(27, 27, 50); /*for nav bc*/
  --bg-color02: rgb(223, 223, 226); /*for nav bc when hover*/
  --bg-color03: rgb(226, 228, 233); /*for code bc*/
  --bg-color04: rgb(245, 246, 247); /*for main bc*/
  --text-color01: blue; /*for html element tag*/
  --text-color02: rgb(221, 124, 34); /*for html attributes*/
  --text-color03: black; /*for text inside html element*/
  --text-color04: rgb(209, 35, 44);
  --text-color05: green; /* for css selector*/
}

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

/* Override default style and set padding and margin to nothing */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 16px;
  font-family: Manrope, Arial;
}

body {
  color: black;
}

/* Make all link text black with no text decoration */
a {
  color: white;
  text-decoration: none;
}

/* large screen */
@media (min-width: 1200.1px) {
  body {
    margin-left: 300px;
    color: black;
  }

  html {
    font-size: 16px;
  }
}

/* Tablet screen */
@media (max-width: 768px) {
  body {
    color: black;
  }

  html {
    font-size: 15px;
  }
}

/* Mobile screen */
@media (max-width: 580px) {
  body {
    color: black;
  }

  html {
    font-size: 14px;
  }
}