/* PREVIEW 1 */
.body1 {
 background: #f5f5f5;
 color: #222;
 font-family: Arial, sans-serif;
 transition: background 0.3s, color 0.3s;
 min-height: 40vh;
}

.body1 button {
 margin: 1rem;
 padding: 0.5rem 1rem;
 cursor: pointer;
}

.body1.dark1 {
 background: #121212;
 color: #e0e0e0;
}


/* PREVIEW 2 */

.body2 {
 background: #f0f0f0;
 color: #111;
 font-family: Arial, sans-serif;
 transition: background 0.3s, color 0.3s;
 min-height: 40vh;
 padding: 1rem;
}

.body2 button {
 padding: 0.6rem 1.2rem;
 font-size: 1rem;
 border-radius: 5px;
 cursor: pointer;
 margin-left: 1rem;
 transition: background 0.3s, color 0.3s;
}

.body2 .buttons2 button {
 border: none;
}

.body2 .saturated2 {
 background-color: #ff00ff;
 color: white;
}

.body2 .desaturated2 {
 background-color: #c472b5;
 color: white;
}

.body2.dark2 {
 background-color: #121212;
 color: #e0e0e0;
}

.body2.dark2 .saturated2 {
 background-color: #ff00ff;
 color: black;
}

.body2.dark2 .desaturated2 {
 background-color: #925f88;
 color: white;
}


/* PREVIEW 3 */

.body3 {
 background: #f0f0f0;
 color: #111;
 font-family: Arial, sans-serif;
 padding: 1rem;
 transition: background 0.3s, color 0.3s;
 min-height: 40vh;
}

.body3 button {
 padding: 0.5rem 1rem;
 margin-bottom: 1rem;
 cursor: pointer; 
}

.body3 .dark-mode-examples3 {
 display: flex;
 gap: 2rem;
 flex-wrap: wrap;
}

.body3 .box3 {
 padding: 1rem;
 border-radius: 8px;
 width: 300px;
 transition: background 0.3s, color 0.3s;
}

.body3 .box3 {
 background-color: #ffffff;
 color: #111;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.body3.dark3 .box3.harsh-dark3 {
 background-color: #000000;
 color: #ffffff;
}

.body3.dark3 .box3.soft-dark3 {
 background-color: #1e1e1e;
 color: #cccccc;
}

.body3.dark3 {
 background-color: #121212;
 color: #e0e0e0;
}