body {
    background-color: #004d00; /* Dark green color; adjust the hex code as needed */
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
p {
  color: navy;
  text-indent: 30px;
  text-transform: uppercase;
}

	a:link, a:visited {
  color: white;
  text-decoration: underline;
  cursor: auto;
}

a:link:active, a:visited:active {
  color: white;
}

#card-container {
    position: relative;
    width: 100%;
    height: 600px;
}

.card {
    position: absolute;
    width: 180px;  /* Width of the image */
    height: 244px; /* Height of the image */
    border: 1px solid black;
	background-color: white; /* Set the background to white */
    background-size: cover; /* Ensures the image covers the card */
    cursor: pointer;
    user-select: none;
    border-radius: 10px; /* Adjust as needed for desired roundness */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6); /* Adds shadow for depth */
    transition: box-shadow 0.3s; /* Smooth transition for shadow effects */
}
.card.back {
    background-image: url('back.png'); /* Path to your back image */
    background-blend-mode: multiply;
}

.card.face {
    /* Initially empty, will be set by JavaScript */
}

.card:hover {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.8); /* Slightly larger shadow on hover for more depth */
}