*{
	font-family: 'Times New Roman', Times, serif;
}

.quiet-desert {
	--background: #e9d0a6;
	--pop_up_background: #f6c490fe;
	--text_color: #753F27;
	--hover: #bd6b00;
	--tasks_background: #c2975798;
	--shadow: #101010;
	--input_background:#D9D9D9;
	--check: #753F27;
	--ring_back: #d49e13;
	--ring: #753F27;
	--outermost_circule: #e9d0a6c5;
	--logo_background: #753F27;
}

.steady-growth {
	--background: #78ab66;
	--pop_up_background: #6a9149ed;
	--text_color: #fffb86;
	--hover: #aef63a;
	--tasks_background: #4b794e8b;
	--shadow: #20392e;
	--input_background:#fffab1;
	--check: #176a0c;
	--ring_back: #78ab66;
	--ring: #215317ff;
	--outermost_circule: #4e9235a1;
	--logo_background:#78ab66;
}

.tranquility-night {
	--background: #08103a;
	--pop_up_background: #325cb0;
	--text_color: #fbfaeb;
	--hover: #a2b7ca;
	--tasks_background: #2816cdc1;
	--shadow: #101010;
	--input_background:#D9D9D9;
	--check: #070f36;
	--ring_back: #6181f6;
	--ring: #3e3cb2;
	--outermost_circule: #091241c0;
	--logo_background:#08103a;
}

body {
	background-color: var(--background)
}

main{
	position: relative;
	top:0px;
	width: 300px;
  height: 500px;
  margin: 40px auto;
  text-align: center;
  border-radius: 1px;
  padding: 20px;
	margin-bottom: 5px;
}

h2{
	text-align: center;
	font-size: 38px;
	font-weight: 500;
	margin-bottom: 20px;
	background: none;
}

button {
  border: none;
  background: none;
  outline: none;
  color: var(--text_color);
	font-size: 20px;
}

button:hover {
  color: var(--hover);
	cursor: pointer;
}

.close-btn{
	margin-top: 30px;
	width: 100px;
	padding: 10px 0;
	background:var(--text_color);
	color: var(--pop_up_background);
	border: 0;
	outline: none;
	font-size: 18px;
	border-radius: 30px;
	box-shadow: 0 5px 5px var(--shadow);
	align-self: center;
}

/*logo*/
#logo {
	width: 120px; 
	height: 120px; 
	position: absolute;
	left: 30px;
	background-color: var(--logo_background);
	border-radius: 0px 0px 10px 10px;
}

/*navigation bar*/
.nav-bar {
	position: relative;
	display:flex;
	justify-content:center;
}

.btn{
	padding:2%;
	font-size: 20px;
	top: 5px;
  letter-spacing: 1px;
}

/*Burger*/
#burger-img {
	position: absolute;
	display: flex;
	left: 80vw;
	padding: 10px 5px;
	display: none;
	width: 40px;
	border-radius: 50%;
	background-color: var(--logo_background);
	cursor: pointer;
}

.burger-container {
	display: flex;
	flex-direction: column;
}

/* About, Details and Burger*/
.about, .details, .burger, .themes {
	display: flex;
	flex-direction: column;
	text-align: center;
	width: fit-content;
	background: var(--pop_up_background);
	border-radius: 30px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.1);
	padding: 20px 30px 30px;
	color:var(--text_color) ;
	visibility: hidden;
	transition: transform 0.4s, top 0.4s;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 10);
}

/*Details*/
.details img{
	width: 130px;
	height: 130px;
	margin-top: -90px;
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 10);
	transition: transform 0.3s;
}

.details a:hover img {
	transform: scale(1.07); 
}

.about p, .details p {
	font-size: larger;
	line-height: 1.5;
}

/*Themes*/

.themes-container {
	display: flex;
}

.themes-container div{
	margin: 5px;
}

.themes-container img {
	width:300px;
	border-radius: 10px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 10);
	cursor: pointer;
}

/* open is for all the pop ups*/

.open {
	visibility: visible;
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
	z-index: 8;
}

/*Pomodore Title*/
#pomo {
	align-self: center;
	padding: 10px;
	font-size: 40px;
	color: var(--text_color);
}

/* tasks */
.tasks {
	background: var(--tasks_background);
	border-radius: 20px;
	position:absolute;
	top: 4vw;
	left: 35vw;
	width: 220px;
	padding:10px 30px 30px;
	color: var(--text_color);
	margin-top: 20px;
}

#task-input{
	background: var(--input_background);
	color: var(--check);
	margin-top: 5px;
	border-radius: 50px;
	padding: 1rem 2rem;
	overflow: hidden;
	text-align: left;
}

#add {
	background: var(--tasks_background);
	color: var(--text_color);
	border-radius: 15px;
	height: 30px;
	position: absolute;
	right: 50px;
	top: 24px;
}

.all-the-tasks {
	max-height: 300px;
	overflow-y: auto;
	overflow-x:hidden;
}

.field-group {
	display: flex;
	flex-direction: column;
  margin-top: 6px;
}

.checkbox-field{
	opacity: 0;
}

/*check mark not the label*/
.checkbox-label{
	position:relative;
	align-self:baseline;
	padding-left: 50px;
	font-size: 1.5em;
	line-height: 1em;
	color: var(--text_color);
	cursor: pointer;
	margin-left: 1px;
	text-align: left;
}

.checkbox-label::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background: var(--input_background);
}

.checkbox-label::after{
	content: '';
	position: absolute;
	left: 10px;
	top: 4px;
	width: 5px;
	height: 12px;
	border: solid var(--check);
	border-width: 0 6px 6px 0;
	transition: 0.2s ease;
}

.checkbox-field:not(:checked) + .checkbox-label::after {
	transform: scale(0);
	opacity: 0;
}

.checkbox-field:checked + .checkbox-label::after {
	transform:rotate(35deg) scale(1);
	opacity: 1;
}

.tasks .field-group input[type="checkbox"] {
  order: 2;
}

/*Circule*/
.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-container {
	position: relative;
	top: 150px;
}

.circle-container {
	position: absolute;
	border-radius: 50%;
	width: 400px;
	height: 400px;
	background-color: var(--ring_back);
	position: absolute;
	overflow: hidden;
	z-index: 1;
}

.semicircle {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: right center;
}

.semicircle:nth-child(1) {
	background-color: var(--ring);
	z-index: 2;
}

.semicircle:nth-child(2) {
	background-color: var(--ring);
	z-index: 3;
}

.semicircle:nth-child(3) {
	background-color: var(--ring_back);
	z-index: 4;
	display: none;
}

.outermost-circle {
	width: 390px;
	height: 390px;
	background-color: var(--outermost_circule);
	border-radius: 50%;
	z-index: 5;
}

/*timer*/
.countdown {
	display: flex;
	z-index: 1;
}

.countdown div {
	position: relative;
	font-size: 100px;
	color: var(--text_color);
}

/*controls*/
.controls {
	position: relative;
	top:150px;
	padding-bottom: 20px;
	letter-spacing: 30px;
	z-index: 7;
}

/*footer*/
footer {
display:flex;
justify-content: center;
color: var(--text_color);
}

/*Responsivnes*/
@media (max-width: 1020px) {
	main {
		margin-top: 0px;
	}

	.tasks {
	top: auto; 
	left: 50%; 
	transform: translate(-50%); 
	margin-top: 410px;
	} 

	footer {
	width: 100%;
	text-align: center; 
	padding: 40px 0; 
	}

	.all-the-tasks {
	max-height: 50px;
	}

	.themes-container {
		flex-direction: column;
	}
	.finished_rapper {
		flex-direction: column;
	}
	.stats-rapper {
		flex-direction: column;
	}
}

@media (max-width: 887px) {
	.nav-bar {
	margin-left:140px;
	}
}

@media (max-width:701px) {
	#logo {
	width: 90px; 
	height: 90px;
	}
	#pomo {
		font-size: 35px;
		padding: 10px 10px 10px 50px;
	}
	.nav-bar {
	display: none;
	}

	#burger-img {
	display: flex;
	right: auto;
	}

	.task_container {
	flex-direction: column;
	}
	}
	
@media (max-width:375px){
	#logo {
	width: 70px; 
	height: 70px;
	}
	#pomo {
		font-size: 35px;
		padding: 10px 10px 10px 30px;
	}

	.about, .details {
		width: 300px;
		height: 300px;
	}

	.themes {
		width: 300px;
		height: 600px;
	}

	#close-themes {
		margin-top: 0px;
	}

	.circle-container {
		width:360px;
		height: 360px;
	}
	footer {
		padding-bottom: 1px;
	}
}