/* this is also a comment */
/* comments describe code without getting in the way */

/* in CSS, one can customise the style of body tags,  */
body {
  margin: 0; /* removes margins */
  font-family: sans-serif; /* changes font */
  background-color: palevioletred; /* color of background */
  height: 100vh; /* body occupies total height of the screen (otherwise it just takes what the text covers) */
  display: flex; /* all items will fit in a flexy way */
  flex-direction: column; /* the order is left-to-right first, top-to-bottom second */
}

h1 {
  color: white;
  font-family: monospace;
  text-align: center;
  font-size: 3em;
  margin: 20px 0;
}
h2 {
  font-family: monospace;
}

/* we can also assign style to class'd objects like grid or grid-item. Just put a dot before the class name. */
.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.grid-item {
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid black;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}

/* css allows you to do some magic, like customising your list's dots */
li::marker {
  content: "🦆 "; /* or any emoji */
}

/* you can refer to a double class tag like "grid-item buttons" by writing them together */
.grid-item.buttons {
  display: grid; /* makes the container itself a grid */
  grid-template-columns: repeat(3, 1fr); /* 3 buttons per row */
  gap: 10px; /* spacing between buttons */
  justify-items: center; /* center buttons inside their cell */
  align-items: center;
}

/* aaand <button> or other interactive elements can be styled too */
.grid-item button   {
  border: 2px solid #333;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 16px;
  color: #333;
  background-color: cornsilk;
  cursor: pointer;
  width: 100px;
  height: 100px;
}

/* and their behaviour */
.grid-item button:hover   {
  background-color: orange;
}

.code-container {
  border: 4px dotted magenta;
  padding: 1em;
  background: white;
}

/* you can even overwrite custom css for mobile browsers */
@media (max-width: 1000px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: repeat(3,1fr); /* rows adjust automatically */
  }

  html{font-size:16px}
  
}