:root {
  --background: white;
  --foreground: black;
  --primary-color: #074327;
  --background-image: url("public/wallpaper.png");
}

body.dark-mode {
  --background: #042814;
  --foreground: #e0d8bd;
  --primary-color: #89c192;
  --background-image: url("public/wallpaper.png");
}

body {
  font-family: "Open Sans", Helvetica, sans-serif;
  color: var(--foreground);
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: var(--background);
  background-image: var(--background-image);
  background-repeat: repeat;
  background-size: 30vw;
  background-attachment: scroll;
}

h1 {
  margin: 20px;
  font-style: italic;
  text-align: center;
  font-size: 36px;
  color: var(--primary-color);
}

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

.toggle-button {
  text-align: center;
  color: white;
  border: none;
  background: none;
  cursor: pointer;
  font-size: inherit;
}

.toggle-button:hover {
  opacity: 0.8;
}

img.u-photo {
  border-radius: 50%;
}
ul {
  padding: 0;
  list-style: none;
}



.content-before-loading
{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Adjust based on your layout */
  overflow: hidden;
  width: 100vw;
}

.sub-block {
 display: flex;
  justify-content: center;
  overflow: hidden;
  gap: 20px; /* Adds space between the images */
  width: 100vw;
}

.imgtxt {
  width: fit-content;
  height: fit-content;
  line-height: 1.6;
  padding: 2em;

}


.rotate:hover img,
.rotate:focus img {
  transform: rotate(3deg);
}

.rotateleft:hover img,
.rotateleft:focus img {
  transform: rotate(-4deg);
}

.rotate:hover .text,
a:focus .text {
  opacity: 1;
}

a,
a:hover,
a:focus {
  color: transparent;
  background: transparent;
}
.link {
  color: teal;
}
.link:hover,
.link:focus {
  background-color: teal;
  color: white;
}