@charset "utf-8";

.container-buttons-dashboard-margin {
	margin-right: 10%;
	margin-left: 10%;
	margin-top: 5%;
	height: 50vh;
}

.container-buttons-dashboard {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 48% 48%;
	grid-auto-rows: 48% 48%;
  	grid-row: auto auto;
	grid-column-gap: 2%;
}

.button-dashboard {
	width: 100%;
	height: 100%;
	font-weight: bold;
	font-size: x-large;
	border: transparent;
	border-radius: .5em;
	transition: color .2s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
}

.button-dashboard:hover {
	color: var(--white);
}

.dashboard-list {
	background-color: var(--bg-primary-mast);
	color: white;
}

.dashboard-list:hover {
	background-color: var(--bg-primary-mast-hover);
}

.dashboard-add {
	background-color: var(--bg-secondary-mast);
	color: var(--white);
}

.dashboard-add:hover {
	background-color: var(--bg-secondary-mast-hover);
}

@media(orientation: portrait) {
	.container-buttons-dashboard-margin {
		margin-top: 10%;
	}

	.container-buttons-dashboard {
		grid-template-columns: 100%;
		grid-auto-rows: 30%;
		grid-row-gap: 5%;
	}

	.button-dashboard {
		font-size: 3.5rem;
	}
}