body {
	background-color: black;
	color: #00FF00; /* Hacker green color */
    font-family: 'Aptos', sans-serif; /* Apply Aptos font */
    margin-left: calc(7vw + 10px); /* Adjust the spacing here */
	margin-right: calc(7vw + 10px); /* Adjust the spacing here */

}


/*Main header elements and properties */

.header_element {
	display: flex;
	align-content: center;
	margin-bottom: 0.5vh; /* Adds a small space below the header */

}

#main_cweo_box {
    cursor: pointer; /* Changes cursor to a pointer to indicate it’s clickable */
	margin: 0;
	padding: 0.1vh 0.1vw; /* Adds padding relative to viewport size */
	border: 2px solid #00FF00; /* Green border around the header */
	border-radius: 5px; /* Optional: slightly rounds the corners of the border */
	display: inline-block;
	background: none;
	color: inherit;
	font: inherit;
	outline: inherit;
	text-align: center;
	font-size: clamp(2em, 2vw, 1em);
}

#main_cweo_box:hover {
	color:black;
	background-color: white;
}


.tab_elements {
	cursor: pointer;
	padding: 0.5vh 0.5vw;
	font-size: clamp(1em, 4vw, 2em);
	margin: 0;
	display: flex;
	align-items: center;
	background: none;
	color: inherit;
	outline: inherit;
	border: none; /* Green border around the header */

}
.tab_elements:hover {
	color:black;
	background-color: white;
}

#below_header_line {

	border-bottom: 1px solid #00FF00; /* Green line beneath the header */

}


.search_bar_container {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end; /* Pushes search bar to the right */
}

#search_bar {
    padding: 5px;
    font-size: 16px;
    border: 2px solid #00FF00; /* Green border */
    border-radius: 5px;
    width: 100%; /* Start with full width of container */
    max-width: 250px; /* Sets maximum width */
    min-width: 150px; /* Sets minimum width */
    background-color: inherit; /* Match page background */
    color: inherit; /* Match text color */
}

#search_button {
	justify-content: flex-end;
	background: none;
	color: inherit;
	font: inherit;
	outline: inherit;
	border: 2px solid #00FF00;
	/*transition: all 0.01s ease; !* Smooth transition for visual changes *!*/
}
#search_button:active {
	border: 2px solid #00AA00; /* Darker border when pressed */
	transform: translateY(2px);  /* Move the button down to simulate depression */
}

/*header properties end here*/

.main_contents{
	display: flex;
    gap: 20px;
}



.contents_box {
    flex-grow: 1; /* Take up the remaining space */
    border: 2px solid #00FF00;
    border-radius: 5px;
    padding: 20px;
    margin-right: auto; /* Push it to the left */
	width: 100%; /* Fill available horizontal space */
    height: auto; /* Allow height to adjust based on content */
	min-height: 900px;
    /*max-height: 700px; !* Constrain maximum height *!*/
}


.calendar_n_timetable_col{
	display:flex;
	flex-direction: column; /* Stack items in a column */
	gap: 20px;
}

/*Calendar section begins here*/

#calendar {
	width: 30vw;   /* 50% of the viewport width */
	height: 30vh;  /* 50% of the viewport height */
	max-width: 400px;   /* Maximum width of 800px */
    max-height: 500px;  /* Maximum height of 600px */
    border: 2px solid #00FF00;
    border-radius: 5px;
    overflow: hidden;
	color: inherit;
	margin-left: auto;

}

#calendar_name{
	display: flex;
	font-size: 1.4em;
	justify-content: center;
}

.current_time_space {
    display: flex;
    align-items: center;
	/*padding-top: 5px;*/
}

#current_time_title {
    background-color: inherit;
	font-size: 1.3em;
	padding-left: 10px;

}

#current_time{
	background-color: inherit;
	font-size: 1.2em;
	color : inherit;
	padding-left: 10px;

}

#location {
	font-size: 1em;
	margin-left: auto;
	padding-right: 10px;
	white-space: nowrap;
}

.calendar_header {
    display: flex;
    justify-content: space-between; /* Pushes elements to opposite sides */
    align-items: center;            /* Centers items vertically */
    /*padding-bottom: -10 px;*/
    background-color: inherit;

}

#month{
	background-color: inherit;
	color: inherit;
	font-size: 1.2em;

}
#year{
	background-color: inherit;
	color: inherit;
	font-size: 1.2em;

}

#prev_month {
	background-color: inherit;
	color: inherit;
	outline: inherit;
	border: 2px solid #00FF00;

}
#next_month {
	background-color: inherit;
	color: inherit;
	outline: inherit;
	border: 2px solid #00FF00;

}

#next_month:active {
	border: 2px solid #00AA00; /* Darker border when pressed */
	transform: translateY(2px);  /* Move the button down to simulate depression */
}
#prev_month:active {
	border: 2px solid #00AA00; /* Darker border when pressed */
	transform: translateY(2px);  /* Move the button down to simulate depression */
}


/* Weekday labels */
.calendar_weekdays {
    display: flex;
    background-color: inherit;
    font-weight: bold;
    color: inherit;
    /*padding: 5px 0;*/

}

.calendar_weekdays span {
    flex: 1;
    text-align: center;
}

/* Calendar days */
.calendar_days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 10px;
}

.calendar_days div {
    text-align: center;
    padding: 2px;
    cursor: pointer;
    border-radius: 5px;
}

.calendar_days div:hover {
    background-color: grey;
}

.other_month_day {

	color : #005e00;
}


.current_day {
	color:black;
	background-color: white;

}
/*calendar section ends here*/

/* right side update section starts here*/
.right_side_update_column{
	max-width: 400px;   /* Maximum width of 800px */
    max-height: 500px;  /* Maximum height of 600px */
	padding-top: 10px;
    border: 2px solid #00FF00;
    border-radius: 5px;
    overflow: hidden;
	color: inherit;


}
#current_timetable {
	 margin: 0;           /* Remove any default margin */
    flex-grow: 1;        /* Allow h2 to take up available space */
    text-align: center;  /* Center text inside h2 */

}



@media (max-width: 1000px) {
    .main_contents {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center the content if needed */
    }

    .contents_box {
        width: 90%; /* Adjust width for a smaller screen */
        max-width: 100%; /* Remove max width constraint */
		align-items: center; /* Center the content if needed */
		flex-grow: 1;
    }
 	#calendar{
	 width: 90%; /* Adjust width for a smaller screen */
		max-width: 100%; /* Remove max width constraint */

 	}
    .calendar_n_timetable_col {
        width: 90%;
        max-width: 100%;
		align-items: center; /* Center the content if needed */

    }
}
 /*nothing much here yet*/