/*
  These are some base styles so that our tutorial looks good.
*/

:root {
  // the palette
  --green: #05f937;
  --black: #272727;
  --gray: #aaaaaa;
  --ltgray: #f0f0f0;
  --yellow: #ffff00;
  --my-gradient: linear-gradient(val(--black),val(--ltgray));
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: cursive;
  font-weight: 400;
  font-size: 16px;
  color: var(--black);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}



/* Light mode */
@media (prefers-color-scheme: light) {
  body {
    background: var(--ltgray);
    color: var(--black);
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--black);
    color: var(--green);
  }
}





/*
  WHAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100vh;
  background: var(--yellow);
  background: linear-gradient(110deg,#ffff00, #05f937);
  background: linear-gradient(--my-gradient);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 5px 0;
}









/* Each item in our grid will contain numbers */

.item {
  /* We center the contents of these items. You can also do this with flexbox too! */
  display: grid;
  place-content: center center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow);
  /* best colour */
}

.item p {
  margin: 0 0 5px 0;
}