body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "hd hd hd hd hd" "lt cn cn cn rt" "ft ft ft ft ft";
  gap: 1em;

  background-color: #fcfcfc;
  background-image: url("img/136.png");
  background-repeat: repeat;

  font-family: Arial, sans-serif;
}

.main-title {
  text-align: center;
  color: black;
  -webkit-text-stroke: 1px white;
  font-size: 48px;
  text-shadow: 1px 1px 1px black;
  font-weight: bold;
  justify-content: space-between;
}

.header {
  grid-area: hd;
  text-align: center;
}

.left {
  grid-area: lt;
}

.center {
  grid-area: cn;
}

.right {
  grid-area: rt;
}

.footer {
  grid-area: ft;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.footer a {
  display: inline;
}

.footer * {
  margin: auto;
}

div {
  /* background-image: url(img/136.png); */
  background-color: rgba(255, 255, 255, 0.4);
  padding: 1em;
  border-radius: 1em;
  border: solid 2px black;
  overflow: scroll;

}

h1,
h2,
p {
  margin: 10px 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

ul li {
  margin: 5px 0;
}

a {
  color: #007BFF;
  text-decoration: underline;
}

a:hover {
  font-weight: bold;
}

.spring:hover {
  animation: spring 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

@keyframes spring { 
  0% { transform: scale(1) translateY(0); }
  10% { transform: scale(1.2, 0.6); }
  30% { transform: scale(0.8, 1.1) translateY(-50px); }
  50% { transform: scale(1) translateY(0); }
  100% { transform: translateY(0); }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    background-image: url("img/145.png");
    color: #e0e0e0;
  }

  div {
    background-color: rgba(0, 0, 0, 0.5);
    border: solid 2px #e0e0e0;
  }

  .main-title {
    color: #e0e0e0;
    -webkit-text-stroke: 1px black;
    text-shadow: 1px 1px 1px white;
  }

  a {
    color: #bb86fc;
    text-decoration: underline;
  }

  a:hover {
    font-weight: bold;
  }
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "hd" "cn" "lt" "rt" "ft";
  }

}