body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
 background-color: #f5f5f5;
 color: #333;
 transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
 background-color: #333;
 color: #f5f5f5;
}

.header {
 display: flex;
 justify-content: space-between;
 padding: 10px;
}

.history-back,
.toggle-mode {
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 font-size: 16px;
 margin: 5px;
}

.history-back {
 background-color: #007bff;
 color: #fff;
 border-radius: 5px;
}

.toggle-mode {
 background-color: #28a745;
 color: #fff;
 border-radius: 5px;
}

h1 {
 text-align: center;
}

.secretMessage {
 /* text-align: center; */
 margin-bottom: -20px;
 margin-left: 2px;
 font-size: 2px;
}

.container {
 position: relative;
 margin-bottom: 44vh;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 padding: 20px;
}

.card {
 background-color: #fff;
 border: 1px solid #ddd;
 border-radius: 5px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 margin: 10px;
 padding: 20px;
 text-align: center;
 width: 200px;
 transition: background-color 0.3s, color 0.3s;
}

.card img {
 max-width: 100%;
 border-radius: 5px;
}

.card button {
 padding: 10px 20px;
 border: none;
 background-color: #007bff;
 color: #fff;
 cursor: pointer;
 border-radius: 5px;
 margin-top: 10px;
}

.card button:hover {
 background-color: #0056b3;
}

.dark-mode .card {
 background-color: #444;
 color: #ddd;
}

.dark-mode .card button {
 background-color: #28a745;
 color: #fff;
}

.dark-mode .card button:hover {
 background-color: #1e7e34;
}