body {
    background-color: rgb(0, 58, 0);
    margin: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    overflow-x: hidden;
}

audio {
    display: none;
}

header {
    background-color: rgb(0, 28, 0);
    height: fit-content;
}

header h1 {
    margin: 0;
    text-align: center;
    color: cornflowerblue;
}

.buttons {
    display: flex;
    width: 80%;
    margin: auto;
    padding-top: 1%;
    padding-bottom: 20px;
    gap: 20px;
}

button {
    flex: 1;
    height: 50px;
    border-radius: 100px;
    background-color: yellow;
    color: hotpink;
}

.buttons a {
    flex: 1;
    height: 50px;
    border-radius: 100px;
    background-color: yellow;
    color: hotpink;
    text-align: center;
    align-content: center;
    text-decoration: none;
    font-size: 15px;
    border: 2px solid grey
}

.buttons a:hover {
    padding: 20px;
    font-size: 40px;
    background-color: white;
}


h2 {
    color: white;
    text-align: center;
    font-size: 5rem;
    font-family: cursive;
}
.char-container {
    width: 85%;
    height: 500px;
    border: 1px solid lime;
    margin: 8rem auto;
    display: flex;
}

.char-container img {
    height: 100%;
}

.text-container {
    color: white;
}

.text-container h3 {
    font-size: 4rem;
}

.text-container p {
    font-size: 2rem;
}

/* Cener */

 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.cena-container {
  background-color: transparent;
  width: 500px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.cena-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.cena-container:hover .cena-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.cena-front, .cena-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.cena-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.cena-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
} 


/* Set initial state of the image, it is positioned off-screen */
.cena-peek {
    position: fixed;
    bottom: -800px; /* Start from below the screen */
    left: 75%;
    transition: all 1s ease;
    z-index: 9999;
}

.cena-peek img {
    width: 400px;
}

/* When the animation is triggered, the image moves up */
.cena-peek.show {
    bottom: -400px; /* Move the image up */
    opacity: 1;
}

/* After the image shows, it will move back down after 1 second */
.cena-peek.hide {
    bottom: -800px; /* Move the image down */
    transition: all 1s ease 0.5s; /* Delay the movement back */
}

footer {
    background-color: darkred;
    height: 200px;
}