@import "navbar.css";

html, body{
	height: 100%;
	background-color: rgba(228,107,107, 0.2)
}


/* ATIVIDADES */
.container {
	margin-top: 20px; 
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr minmax(400px, auto);
	grid-gap: 10px;
}

.div1 {
	grid-column-start: 1;
	grid-column-end: 2;
	border-radius: 3px;
	padding: 7px;
	display: flex;
	justify-content: center;
	color: white;
	background-color: rgba(228,107,107)
}

.div2 {
	grid-column-start: 1;
	grid-column-end: 2;
	background-color: rgba(255, 255, 255, 0.6);
	padding: 30px;
}

.div3 {
	grid-column-start: 2;
	grid-column-end: 3;
}

.plus:hover{
	color: white;
	background: red;
	transition: all 1s;
}

.plus{
	padding: 10px 25px 10px 25px;
	background: #F05B5B;
	color: white;

}

/* MODAL */
.container-form{
	display: grid;
	grid-template-areas: "task-title-form task-pomodoro-form"
						 "task-description-form task-description-form"
						 "btn_add btn_add";
	grid-template-columns: 1fr 1fr;
	grid-gap: 4px;
}

.task-description-form{
	grid-area: task-description-form;
}

.task-title-form{
	grid-area: task-title-form;
}

.task-pomodoro-form{
	grid-area: task-pomodoro-form;
}

.btn_add {
	grid-area: btn_add;
	display: flex;
	justify-content: flex-end;
}

.btn_add_task{
	border: 1px solid #75B680;
}
.btn_add_task:hover{
	background-color: #75B680;
	color: white;
	transition: all 0.3;
}

.task-item {
	border: 1px solid #75B680;
	margin: 4px;
	padding: 4px;
	color: #F05B5B;
	border-radius: 2px;
}

.task-item:hover{
	color: white;
	background: #75B680;
	transition: all .3s;

}
.play_button{
	cursor: pointer;
}

/* TIMER */
.modal-body-timer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 13px;
}

/* LOADER */
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #75B680; /* green */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
 }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.modal-body-loader {
	display: flex;
	justify-content: center;
	align-items: center;
}

 .hide-loader{
        display:none;
}


/* BREAKPOINTS */
@media only screen and (max-width: 780px) {
	.container {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "div1 div1"
							 "div3 div3"
							 "div2 div2";		
		grid-template-rows: 1fr 1fr minmax(400px, auto);
	}

	.div3{
		grid-area: div3;
		display: flex;
		justify-content: center;
		
	}
	.div2{
		grid-area: div2;
	}

	.div1{
		grid-area: div1;
	}

	.container-form{
		display: grid;
		grid-template-areas: "task-title-form" 
							" task-pomodoro-form"
							 "task-description-form";
		grid-template-columns: 1fr;
	}

}