css
/* why-cant-i-just-leave-the-house.css */
body {
font-family: 'Bungee 60';
}
h1 {
color: #FF0000; /* Bright red */
text-shadow: 0px 2px 0px #000000;
font-weight: bold;
text-align: center;
margin-top: 50px;
margin-bottom: 20px;
border-bottom: 4px solid #000000;
width: 80%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
h2 {
color: #00FF00; /* Bright green */
text-shadow: 0px 2px 0px #000000;
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
border-top: 2px solid #000000;
width: 60%;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
p {
color: #000000;
text-align: center;
font-size: 24px;
line-height: 1.2;
margin-bottom: 40px;
width: 80%;
left: 50%;
transform: translateX(-50%);
text-shadow: 0px 2px 0px #000000;
}
a {
color: #0000FF; /* Blue */
text-decoration: none;
border-bottom: 4px solid #000000;
width: 80%;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
}
a:hover {
color: #0000FF; /* Blue */
text-decoration: none;
border-bottom: 8px solid #000000;
width: 80%;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
body {
background-image: url('https://example.com/no-where-to-go.jpg');
background-size: 100%;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-clip: border-box;
}
body:after {
content: "";
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://example.com/lockdown.jpg');
background-size: 100% 50px;
background-position: bottom left;
background-attachment: bottom;
background-repeat: no-repeat;
background-clip: padding-box;
}
/* Links to subpages */
Subpage 1: The Siren Song of Social Media
Subpage 2: The Great Outdoors... Indoors