:root {
	--bgColor: #E0DCDC;
	--lightGray: #C4C4C4;
	--darkGrey: #5A4E4E;
	--black: #000000;
	--white: #FFFFFF;
	--iconDistance: 24px;
	--iconInterval: 38px;
}

@font-face {
    font-family: "Special Elite";
    src: url("fonts/Special_Elite/SpecialElite-Regular.ttf");
}

body {
	background-color: var(--bgColor);
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Special Elite', cursive;
}

.hidden {
	display: none !important;
}

.settingsWrapper, .backupWrapper, .importWrapper, .overViewWrapper, .infoButton {
	position: absolute;
	top: 24px;
	right: 24px;
	font-size: 24px;
	color: var(--black);
	cursor: pointer;
}

.backupWrapper {
	right: calc(var(--iconDistance) + var(--iconInterval));
}

.importWrapper {
	right: calc(var(--iconDistance) + 2 * var(--iconInterval));
}

.overViewWrapper {
	right: calc(var(--iconDistance) + 3 * var(--iconInterval));
}

.infoButton {
	right: calc(var(--iconDistance) + 4 * var(--iconInterval));
}

.pomodoroWrapper.blurred {
	filter: blur(5px);
}

.settingsInputWrapper, .fileImportWrapper, .overViewListWrapper, .taskColorChangerWrapper, .editTaskWrapper, .infoWrapper{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	background-color: var(--darkGrey);
	color: var(--white);
	padding: 30px;
	border-radius: 20px;
	width: 30%;
}

.settingsInputWrapper label, .settingsInputWrapper input, .fileImportWrapper label, .fileImportWrapper input, .taskColorChangerWrapper label, .taskColorChanger input, .editTaskWrapper label, .editTaskWrapper input {
	font-size: 30px;
	margin-bottom: 20px;
	width: 100%;
	padding-top: 7px;
}

.infoWrapper li {
	font-size: 25px;
	margin-bottom: 20px;
}

#selectedTask {
	display: none;
}

.fileImportWrapper label, .fileImportWrapper input {
	font-size: 20px;
}

.title {
	font-size: 40px;
	text-align: center;
	border-radius: 20px;
	max-width: 50%;
	background-color: var(--lightGray);
	margin: 10px auto;
	/* change this, only for visual purposes */
	margin-bottom: 50px;
	padding-top: 8px;
}

.close-x {
	position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
	cursor: pointer;
}

.startSign, .pauseSign, .resetSign {
	cursor: pointer;
}

.startSign {
	/* clip-path: polygon(15% 0, 15% 100%, 85% 50%);
	display: inline-block;
	position: relative;
	background-color: var(--lightGray);
	width: 60px;
	height: 60px; */
	box-sizing: border-box;
	margin-right: 7.5px;
}

.startSign svg {
	max-width: 70px;
}

.pauseBlock {
	display: inline-block;
	background-color: var(--lightGray);
	height: 70px;
	width: 15px;
	border: solid var(--black) 5px;
}

.resetSign svg {
	/* font-size: 50px; */
	/* color: var(--lightGray); */
	/* transform: rotate(-225deg); */
	max-width: 80px;
	margin-left: 7.5px;
}

.topWrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 50px 10px;
}

.topLeftWrapper, .centerWrapper {
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.topLeftWrapper, .centerWrapper, .topRightWrapper {
	width: 33%;
	text-align: center;
}

.topLeftWrapper, .topRightWrapper {
	background-color: var(--black);
	border-radius: 20px;
	padding: 10px;
}

.clockWrapper {
	background-color: var(--white);
	border-radius: 20px;
	font-size: 115px;
	margin: 2px;
	/* change this, only for visual purposes */
	padding-top: 25px;
}

.colon {
	color: var(--white);
	font-size: 75px;
}

.categoryWrapper {
	background-color: var(--white);
	border-radius: 20px;
	font-size: 35px;
	margin: 10px;
	/* change this, only for visual purposes */
	padding-top: 6px;
	cursor: pointer;
}

.categoryWrapper.active {
	background-color: var(--darkGrey);
	color: var(--white);
}

form, form input {
	font: inherit;
}

form h3 {
	color: var(--white);
}

form button {
	background-color: var(--lightGray);
    font-size: 25px !important;
    font: inherit;
    padding: 8px 5px;
	cursor: pointer;
}

.pomodoroWrapper {
	margin: auto;
	margin-top: 100px;
	max-width: 1600px;
}

.tasksWrapper {
	margin: 20px auto;
	width: 60%;
	text-align: center;
}

.tasksWrapper input {
	font-size: 30px;
	margin-bottom: 20px;
	padding-top: 7px;
	width: 80%;
}

.tasksWrapper form button i {
	font-size: 28px;
}

.tasksWrapper form button {
	margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
	margin-left: 5px;
}

.grid-stack-item-content {
	background-color: var(--black);
	color: var(--white);
	border-radius: 20px;
	cursor: pointer;
	padding: 20px;
	font-size: 22px;
}

.taskList .grid-stack-item > .ui-resizable-se {
	right: 25px !important;
	bottom: 25px !important;
}

.grid-stack-item i {
	position: absolute;
	bottom: 15px;
	left: 15px;
	opacity: 0;
	transition: opacity 0.2s;
}

.grid-stack-item .ui-resizable-handle {
	opacity: 0;
	transition: opacity 0.2s;
}

.grid-stack-item i.fa-trash-alt {
	z-index: 3;
}


.grid-stack-item i.fa-archive {
	z-index: 3;
	left: 45px;
}

.grid-stack-item i.fa-palette {
	z-index: 3;
	left: 75px;
}

.grid-stack-item i.fa-edit {
	z-index: 3;
	left: 105px;
}

.grid-stack-item:hover i, .grid-stack-item:hover .ui-resizable-handle {
	opacity: 1;
}

.tasksWrapper form i.fa {
	font-size: 25px;
    margin-right: 5px;
	cursor: pointer;
}

.grid-stack-item .archived {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 2;
	background-color: #808080ed;
    filter: blur(20px);

}

#taskId {
	display: none;
}

.overViewListWrapper li {
	font-size: 25px;
}

body.touchUser .grid-stack-item i, body.touchUser .ui-resizable-handle {
	opacity: 1;
}



/* Responsive Part */

@media screen and (max-width: 1400px) {
	.tasksWrapper {
		width: 100%;
	}
	.settingsInputWrapper, .fileImportWrapper, .overViewListWrapper, .taskColorChangerWrapper, .editTaskWrapper, .infoWrapper{
		width: 50%;
	}
}

@media (max-width: 1023px) {
	.startSign svg {
		max-width: 50px;
	}
	.resetSign svg {
		max-width: 60px;
	}
	.pauseBlock {
		height: 50px;
		width: 12px;
		border: solid var(--black) 3px;
	}
	.clockWrapper {
		font-size: 80px;
	}
	.categoryWrapper {
		font-size: 25px;
	}
}

@media (max-width: 768px) {
	.grid-stack-item-content {
		font-size: 25px;
	}
	.tasksWrapper form {
		margin: 10px;
	}
	.tasksWrapper input {
		font-size: 24px;
	}
	.settingsInputWrapper, .fileImportWrapper, .overViewListWrapper, .taskColorChangerWrapper, .editTaskWrapper, .infoWrapper {
		width: 80%;
	}
}

@media (max-width: 720px) {
	.grid-stack-item-content {
		font-size: 20px;
	}
	.categoryWrapper {
		font-size: 16px;
	}
	.clockWrapper {
		font-size: 50px;
	}
	.title {
		font-size: 32px;
		max-width: 100%;
		margin: 10px 10px 50px 10px;
	}
	/* .startSign {
		height: 50px;
		width: 50px;
	}
	.resetSign i {
		font-size: 40px;
	} */
	.infoWrapper li {
		font-size: 20px;
	}
	.fileImportWrapper input {
		font-size: 18px;
	}	
}

@media (max-width: 500px) {
	.topWrapper {
		flex-direction: column;
		align-items: center;
		margin: 50px 20px;
	}
	.topWrapper > * {
		width: 100%;
		margin-bottom: 20px;
	}
	.clockWrapper {
		font-size: 70px;
	}
	.categoryWrapper {
		font-size: 30px;
	}
	.fileImportWrapper input {
		font-size: 16px;
	}
}

@media (max-width: 370px) {
	.categoryWrapper {
		font-size: 25px;
	}
	.clockWrapper {
		font-size: 60px;
	}
	.title {
		font-size: 28px;
	}
	/* .startSign {
		height: 40px;
		width: 40px;
	}
	.resetSign i {
		font-size: 35px;
	} */
	.tasksWrapper form i.fa {
		margin-bottom: 20px;
	}
	.infoWrapper li {
		font-size: 16px;
	}
	.fileImportWrapper input {
		font-size: 14px;
	}	
}

@media (max-width: 300px) {
	.fileImportWrapper input {
		font-size: 12px;
	}
}