/* Reset CSS */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Page layout */
body {
  font-family: sans-serif;
  background-image: url("plazma.png");
  background-repeat: repeat;
}

main {
  max-width: 1024px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "text image"
    "menu menu";
  grid-gap: 20px;
  background-color: rgba(0, 0 , 0, 0.7);
  padding: 20px;
}

/* Header */
header {
  grid-area: header;
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #ffffff;
}

/* Text */
.text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
}

p {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Image */
.image {
  grid-area: image;
  background-image: url("jaszczur.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
}

/* Buttons */
button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 16px;
  color: #ffffff;
  background-color: #007BFF;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

button:active {
  background-color: #003680;
}