body { 



	margin:0; 



	font-family:'Segoe UI', sans-serif; 



	background:linear-gradient(135deg,#f9c74f,#90be6d); 



	color:#333; 



	text-align:center; 



}







header { 

    background: #2f3e46; 

    color: white; 

    padding: 30px 20px; 

}



.logo { 

    font-size: 42px; 

    font-weight: bold; 

    letter-spacing: 2px;

    

    /* The Magic Sauce */

    display: flex;

    align-items: center;    /* Vertically centers image and text */

    justify-content: center; /* Keeps everything centered in the header */

    gap: 15px;              /* Adds space between the logo and the text */

    margin-bottom: 10px;    /* Adds space before the tagline */

	z-index:10;



}



.logo-img {

    height: 150px;           

    width: 225px;            

    

    /* 

    background: #f9c74f;     /* Matches your bright yellow page gradient */

    border-radius: 8px;     /* Smooths out the edges of the square image block */

    padding: 2px;           /* Gives the sign a tiny bit of breathing room */

}





.tagline { 



	font-size:18px; 



	opacity:0.8; 



}







.container { 



	max-width:700px; 



	margin:40px auto; 



	background:white; 



	padding:30px; 



	border-radius:12px; 



	box-shadow:0 10px 25px rgba(0,0,0,0.2); 



}







button { 



	background:#2f3e46; 



	color:white; 



	border:none; 



	padding:12px 20px; 



	margin:10px 5px; 



	border-radius:8px; 



	font-size:16px; 



	cursor:pointer; 



	transition:0.3s;



}







button:hover { 



	background:#3a5a40; 



	transform:scale(1.05); 



}







.joke { 



	font-size:20px; 



	margin:20px 0; 



	min-height:60px; 



}







.rating button { background:#f4a261; }







footer { margin-top:50px; padding:20px; background:#344e41; color:white; font-size:14px; }



/* Modal (popup) styles */

.modal {

  display: none; 

  position: fixed; 

  z-index: 1; 

  left: 0; top: 0;

  width: 100%; height: 100%;

  background-color: rgba(0, 0, 0, 0.5); 

}



.modal-content {

  background-color: #fefefe;

  margin: 15% auto;

  padding: 20px;

  border: 1px solid #888;

  width: 80%;

  max-width: 600px;

  border-radius: 12px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.2);

  max-height: 80%; /* Make it not exceed 80% of the window height */

  overflow-y: auto; /* Add scroll if content exceeds max-height */

}



.close {

  color: #aaa;

  float: right;

  font-size: 28px;

  font-weight: bold;

}



.close:hover,

.close:focus {

  color: black;

  text-decoration: none;

  cursor: pointer;

}



.sale-banner {
    max-width: 900px;
    margin: 30px auto 10px;
    padding: 18px;
    text-align: center;
    background: linear-gradient(135deg,#ffde59,#ffb300);
    color: #222;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

.sale-banner a {
    color: #0056b3;
    font-weight: bold;
    text-decoration: none;
}

.sale-banner a:hover {
    text-decoration: underline;
}