a {
	color: #ffffff;
	font-family: Verdana;
	text-decoration: none;
}

body {
	margin: 0px;
	background-color: #323232;
	font-size: 11px;
	font-family: Verdana;
	color: #FFFFFF;
}

#homeContainer,
#homeContainerIndex,
#homeContainerRegister,
#homeContainerBottom {
	background-image: url('./IMG/cc_home.jpg');
	background-repeat: no-repeat;
	margin: auto;
	width: 900px;
}

#homeContainer {
	height: 193px;
	margin-top: 20px;
	padding-top: 192px;
}

#homeContainerIndex,
#homeContainerRegister {
	height: 213px;
	margin-top: 20px;
	padding-top: 172px;
}

#homeContainerBottom {
	height: 164px;
}

#homelink,
#loginlink,
#registerlink {
	float: left;
	margin-top: 11px;
	height: 38px;
}

#homelink {
	margin-left: 270px;
	width: 105px;
}

#loginlink {
	width: 99px;
}

#registerlink {
	width: 110px;
}

input,
select {
	background-color: #373737;
	color: #ffffff;
	border: 1px dotted #010101;
	font-size: 11px;
	font-family: Verdana;
}

/* Media query for mobile devices */
@media only screen and (max-width: 600px) {
	body {
		font-size: 14px; /* Adjust the font size for better readability on mobile */
	}

	#homeContainer,
	#homeContainerIndex,
	#homeContainerRegister,
	#homeContainerBottom {
		width: 100%; /* Make the containers occupy the full width of the screen */
		height: auto; /* Let the height adjust automatically based on content */
		padding-top: 0; /* Remove the top padding */
	}

	#homelink,
	#loginlink,
	#registerlink {
		float: none; /* Remove the float property to stack the links vertically */
		margin: 5px auto; /* Center align the links and add some spacing */
	}

	#homelink,
	#loginlink,
	#registerlink,
	input,
	select {
		width: 100%; /* Make the links and form elements occupy the full width */
	}
}
/* Default styles for desktop */
.sidebar-left, .sidebar-right {
    width: 200px;
    float: left; /* or float: right for right sidebar */
    height: 100vh;
    overflow-y: auto;
}

.main-content {
    margin-left: 200px; /* Adjust if you have a right sidebar too */
    padding: 20px;
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
    .sidebar-left, .sidebar-right {
        width: 100%;
        float: none;
        height: auto;
        position: relative;
    }

    .sidebar-left {
        order: 1;
    }

    .sidebar-right {
        order: 3;
    }

    .main-content {
        margin: 0;
        padding: 10px;
    }

    /* Hide the sidebars initially */
    .sidebar-left, .sidebar-right {
        display: none;
    }

    /* Style for a button to toggle the sidebar */
    .sidebar-toggle {
        display: block;
        padding: 10px;
        background-color: #333;
        color: #fff;
        text-align: center;
        cursor: pointer;
    }
}