/* styles.css */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

h1 {
  color: silver;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(hg/1.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.background01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(hg/1.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.background02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(hg/2.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.background03 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(hg/3.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.background04 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(hg/4.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.background05 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(hg/5.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.background06 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(hg/6.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.background07 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(hg/7.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.background08 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(hg/8.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.background09 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(hg/9.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Hintergrund mit 70% Transparenz */
}

.content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.page img {
  width: 64px;
  height: 64px;
  transition: transform 0.5s ease;
}

.page img:hover {
  transform: rotate(360deg);
}

.page img.clicked {
  border: 2px solid white;
}