/* Define custom properties for width, height, and colors */
  :root {
    --box-width: 50px;
    --box-height: 20px;
    --box-background: #282828;
    --box-text-color: white;
  }

  h1 {
  display: inline-block;
  margin-right: 10px;
  padding: var(--box-height) var(--box-width);
  border: 2px solid #333;
  border-radius: 5px;
  color: var(--box-text-color);
  background-color: var(--box-background);
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 20px;
}


  h1:hover {
    background-color: black;
    color: grey;
  }

  body {
    background-color: black;
  }
  
  @media screen and (max-width: 220px) {
    h1 {
      display: block;
      margin-bottom: 10px; /*line i think between h1 elements */
    }
  }