* {
    box-sizing: border-box; /* This will include padding and borders in the element's total width and height */
}
body.dark-mode {
	filter: invert(1)hue-rotate(180deg);
	margin:0;
	padding:0;
	overflow-x: hidden;
	font-family: 'Bank Gothic Medium BT', 'Bank Gothic', 'Arial', sans-serif;
	background-color: #000000;
}

/*Setting all to be 0 until told otherwise*/
body{
	margin:0;
	padding:0;
	overflow-x: hidden;
	font-family: 'Bank Gothic Medium BT', 'Bank Gothic', 'Arial', sans-serif;
	background-color: #ffffff;
}

/*Banner on the top*/
.header{
	width: 100vw;
    background-color: #EDEDED;
    padding-top: 3vh;
    padding-bottom: 3vh;
    padding-left: 2vw;
}
/*Title in banner*/
.header p, .header a{
	color:#6d6666;
	font-size:5vh;
	text-decoration:none ;
	display:inline;
}

/*content box containing everything except banner*/
#content1{
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
	background-color:#ffffff;
	height:90vh;
}
/*image of the stopwatch*/
#stopwatch img{
	width:40vw;
}

/*A box storing buttons and inputs*/

#button_box{
	padding:3vw;
	background-color:#EDEDED;
	border-radius: 10px;
	border: 2px solid #000000;
	display:flex;
	flex-direction: column;
	align-items: center;
}

#buttons, #loginForm, #hashForm{
	display:flex;
	align-items: center;
	flex-direction: column;
}

#buttons a, #loginForm button, #hashForm button{
	padding-left: 3vw;
	padding-right: 3vw;
	background-color:#E4E4E4;
	padding-bottom:2vh;
	padding-top:2vh;
	text-align: center;
	margin:1.5vw;
	width:20vw;
	border-radius: 10px;
	font-size:2vw;
	border: 2px solid #000000;
	text-decoration: none;
	color: #000000;
}

#buttons a:hover, #loginForm button:hover, #hashForm button:hover, #BackButton a:hover{
	background-color:#cacaca;

}


#loginForm input, #hashForm input{
	width:20vw;
	padding-bottom:2vh;
	padding-top:2vh;
	text-align:center;
	margin:1.5vw;
	border: 2px solid #000000;
	border-radius:10px;
	font-size:2vw;


}

#box{
	display:flex;
	flex-direction: column;
	align-items: center;


}

#cookie-status{
	font-size: 4vh;
	text-align: center;
	margin-top: 3vh;
}




#calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
	margin-top: 20px;
}
.calendar-day {
	border: 1px solid #ccc;
	padding: 5px;
	min-height: 60px;
	background-color: #f9f9f9;
	position: relative;
	font-size: 0.8em;
	border-radius: 10px;
}
.event {
	margin-bottom: 10px;
	padding: 5px;
	border: 1px solid #ccc;
	background-color: #e0f7fa;
}
.empty {
	background-color: #f0f0f0;
}
  #calendar-title {
	font-size: 1.2em;
	margin-top: 3vh;
}
  #event-list {
	margin-top: 20px;
}
  #month-buttons {
	margin-top: 4vh;
	

}
  #month-buttons button {
	padding-left:1.25vw;
	padding-right:1.25vw;
	padding-top:1vh;
	padding-bottom:1vh;
	font-size:1.5vw;
	border-radius:10px;
	margin-right:2vw;
}
  .event-item {
	display: flex;
	align-items: center;
	margin-bottom: 10px;

}
.event-item button {
	margin-left: 10px;
	padding: 5px 10px;
	border-radius: 10px;
}
.event-item div{
	font-size:1vw;

}

#content2{
	display:flex;
	justify-content: space-between;
	align-items: center;
	height:100vh;
}


#stopwatch1 img{
	width:40vw;
	margin-left:5vw;
}

#box1{
	display:flex;
	justify-content: space-around;
	flex-direction: column;
	align-items: center;
	height:100vh;
	justify-content: space-evenly;
	padding-right:7.5vw;
	background-color: #E4E4E4;
	padding-left:7.5vw;
}


#title1 p{
	color:#6d6666;
	font-size:3vw;
	text-decoration:none ;
	display:inline;


}
#loading-message {
	display: none; /* Hidden by default */
	color: #000000; /* Loading message color */
	font-weight: bold;
}
#error-message {
	color: rgb(255,0,0); /* Error message color */
	margin-top: 10px; /* Space above error message */
}


#content3{
	display:flex;
	width:95vw;
    flex-direction: column;
    margin-left: 2.5vw;
	margin-top: 5vh;
}


#BackButton a{

	padding-left: 2vw;
	padding-right: 2vw;
	background-color:#f0f0f0f0;
	padding-bottom:1vh;
	padding-top:1vh;
	text-align: center;
	border-radius: 10px;
	font-size:1.5vw;
	border: 2px solid #000000;
	text-decoration: none;
	color: #000000;
	margin-top: 3vh;
	
}

#event-form, #task-form{
	display: flex;
    flex-direction: column;
    width: 50vw;
}


#date p, #event-form label, #task-form label, #accountSettingsForm label{
	margin-top:2vh;
	font-size: 3vh;

}

#event-form input, #task-form input, #accountSettingsForm input{
	margin-top:2vh;
	font-size:2vh;
	border-radius: 10px;
	padding-top: 1vh;
    padding-bottom: 1vh;


}

#event-form textarea{
	font-size: 2vh;
	margin-top: 2vh;
	border-radius: 10px;
	resize: none;

}

#event-form button, #task-form button, #darkModeButtonContainer button, #accountSettingsForm button{
	font-size: 3vh;
    background-color: #E4E4E4;
    padding-top: 1vh;
    padding-bottom: 1vh;
    margin-top: 3vh;
	border-radius: 10px;
	margin-bottom:3vh;
    width: 20vw;


}

#tasks-list {
	margin-top: 20px;
  }
.task-item {
	background-color: #E4E4E4;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}
.task-date {
	font-size: 0.9em;
	color: #555;
}
.task-actions {
	margin-top: 10px;
}
button {
	margin-right: 5px;
	padding: 5px;
	cursor: pointer;
}

#accountSettingsForm{
	display: flex;
    flex-direction: column;
    width: 20vw;
}

#SettingButton{
	width:20vw;
	border-radius:10px;

}


#SettingButtons button{
	padding-left: 3vw;
	padding-right: 3vw;
	background-color:#E4E4E4;
	padding-bottom:2vh;
	padding-top:2vh;
	text-align: center;
	width:20vw;
	border-radius: 10px;
	font-size:2vw;
	border: 2px solid #000000;
	text-decoration: none;
	color: #000000;
	margin-top: 3vh;
	margin-bottom:3vh;
}

#content3 button:hover{
	background-color: #cacaca;


}

#SettingButtons{
	display:flex;
	flex-direction:column;
}