/* Body styles with back.gif as background */
body {
    background: url('back.gif') repeat; /* Page background */
    
    font-family: Georgia, serif;
}

.container {
	width:80%;
	margin:0 auto;
	background-color:#000;
}

.yule {
	float:left;
	max-width:50%;
	font-size:1.3em;
	color:#c0c0c0;
}

.winterblues {
	float:right;
	max-width:45%;
	color: #c0c0c0;
	font-size:1.2em;
}

.bottom {
	width:100%;
	background-color:#fff;
}

a {
	color:yellow;
	text-decoration:none;
	font-family: 'Courier New';
}

a:hover {
	color:orange;
}

h1, p {
  margin: 0 0 1em 0;
}

h1 {
	color:orange;
	font-size:24pt;
	text-decoration:underline;
	letter-spacing:2px;
}

h2 {
	color:#ffee7f;
	font-size:20pt;
	letter-spacing:2px;
}

h3 {
	color:#c37fff;
	font-size:18pt;
	letter-spacing:2px;
}

h4 {
	color:#fff;
	font-size:16pt;
	font-style:italic;
	letter-spacing:2px;
}

/* Responsive layout for mobile screens */
@media (max-width: 960px) {
.container {
        flex-direction: column; /* Stack items vertically */
    }

    .yule {
        order: 1; /* Show first */
        width: 100%;
        font-size: 1.3em;
        padding-bottom: 5px;
    }

    .winterblues {
        order: 2; /* Show second */
        width: 100%;
        color: #c0c0c0;
        font-size: 1.2em;
        padding-bottom: 5px;
    }

.bottom {
	width:100%;
	background-color:#fff;
}

}