body {
    transition: background-color 0.3s, color 0.3s;
	background-image: url("/images/darkbg.jpg");
    color: white; /* Dark mode text */
   	align-content: center;
	font-size: 24px;
	text-align: center;
	display: grid;
	width: auto;
}

.dark-mode {
	background-image: url("/images/lightbg.jpg");
    color: black; /* Light mode text */
}

.dark-mode h1 {
    color: black; /* Light mode text */
}
	
.dark-mode h2 {
    color: black; /* Light mode text */
}
	


button {
    padding: 5px 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.5s;
	background-color: #e2e2e2;
	font-weight: bold;
	border: 3px solid #8fd3ed;
}

button:hover {
    background-color: #fff3c3;
}

.dark-mode button:hover {
    background-color: #646464;
}

.container {
	width: 1000px;
	padding: 0px 0px 0px 0px;
    margin: auto; /* Center the entire block */
	text-align: center;
}



h1 {
	color: white;
	text-align: center;
	font-size: 36px;   
}

h2 {
	color: white;
	text-align: center;
	font-size: 27px;   
	padding-bottom: 1px
}




@media screen and (min-width: 600px) {
    .mobile-break { display: none; }
    }
    




  .link1 {
            position: relative; /* Create a positioning context */
            text-decoration: none; /* Remove default underline */
            color: yellow; /* Link color */
            overflow: hidden; /* Prevent overflow of the pseudo-element */
        }

        .link1::after {
            content: ''; /* Create a pseudo-element */
            position: absolute; /* Position it absolutely */
            left: 50%; /* Center it horizontally */
            bottom: 0; /* Align to the bottom */
            width: 100%; /* Full width */
            height: 1px; /* Underline thickness */
            background: #8fd3ed; /* Underline color */
            transform: translateX(-50%) scaleX(0); /* Initially hidden */
            transition: transform 0.3s ease; /* Smooth transition */
        }

        .link1:hover::after {
            transform: translateX(-50%) scaleX(1); /* Expand out from the center on hover */
        }
		
		.link1:hover {
	color: #8fd3ed;

}

.link1:visited {
	color: #8fd3ed;
	text-decoration: none; 
}

#home {
	text-decoration: none; 
}

.hb {
	padding-left: 100px;
}
		
.tb {
	padding-right: 100px;
	
}

#home-button {
	float: left;
}	

#toggle-button {
	float: right;
}