$color-black: #111;
$color-red: #cc4b48;
$color-red2: #e4572e;
$color-vermilion: #f4442e;
$color-vermilion2: #d05b58;
$color-pink: #efb8ba;
$color-pink2: #e79598;
$color-pink3: #db6165;

@mixin text-shadow() {
	text-shadow: 2px 1px 0 #fbfae8, 5px 4px 0 coral;
}

* {
	box-sizing: border-box;
}

body {
	background: #222;
	font-family: "Gochi Hand", sans-serif;
	color: #333;
}

aside.context {
	text-align: center;
	color: #fff;
	line-height: 1.7;
	font-size: 20px;
	letter-spacing: .5px;
	a {
		text-decoration: none;
		color: #fff;
		padding: 3px 0;
		border-bottom: 1px dashed;
		&:hover {
			border-bottom: 1px solid;
		}
	}
	.explanation {
		max-width: 700px;
		margin: 4em auto 0;
	}
}

footer {
	text-align: center;
	margin: 4em auto;
	width: 100%;
	a {
		text-decoration: none;
		display: inline-block;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: transparent;
		border: 1px dashed #fff;
		color: #fff;
		margin: 5px;
		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}
		.icons {
			margin-top: 12px;
			display: inline-block;
			font-size: 20px;
		}
	}
}

.main-content {
	margin: 5em auto;
}

.notebook {
	max-width: 800px;
	min-width: 550px;
	min-height: 570px;
	margin: auto;
	border-radius: 16px;
	background: $color-red;
	padding: 2px 4px 2.5px;
	&__inner {
		width: 100%;
		height: 100%;
		position: relative;
		border-radius: 16px;
		background: linear-gradient(90deg, #fbfae8 15px, transparent 1%) center,
			linear-gradient(#fbfae8 15px, transparent 1%) center, #ccc;
		background-size: 16px 16px;
		display: grid;
		padding: 30px 20px 25px;
		grid-template-areas:
			"title expenses picture"
			"days expenses picture"
			"days expenses picture"
			"days goals quote"
			"notes tracker tracker";
		grid-template-columns: 50% 30% 20%;
		grid-template-rows: 18% auto auto 30% 25%;
		&:after {
			content: "";
			width: 100px;
			height: 100%;
			top: 0;
			margin: auto;
			left: 0;
			right: 0;
			position: absolute;
			background: linear-gradient(
				to right,
				transparent 10%,
				rgba(153, 153, 153, 0.05) 50%,
				rgba(153, 153, 153, 0.4) 51%,
				rgba(153, 153, 153, 0.15) 51.5%,
				transparent 90%
			);
		}
	}
}

.title {
	grid-area: title;
	text-align: center;
	h1 {
		font: 50px/1 "Lobster", cursive;
		@include text-shadow();
		margin: 0;
	}
	h3 {
		font: 13px/1.2 "Rock Salt", cursive;
		margin: 8px;
	}
}

.days {
	grid-area: days;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 15px;
	margin-right: 22px;
	&__item {
		border: 2px solid $color-black;
		position: relative;
		&:nth-child(1) {
			box-shadow: 3px 3px 0 0 rgba($color-vermilion2,0.4);
		}
		&:nth-child(2) {
			box-shadow: 3px 3px 0 0 rgba($color-vermilion,0.5);
		}
		&:nth-child(3) {
			box-shadow: 3px 3px 0 0 rgba($color-pink,0.6);
		}
		&:nth-child(4) {
			box-shadow: 3px 3px 0 0 rgba($color-red,0.7);
		}
		&:nth-child(5) {
			box-shadow: 3px 3px 0 0 rgba($color-pink2,0.7);
		}
		&:nth-child(6) {
			box-shadow: 3px 3px 0 0 rgba($color-red2,0.5);
		}
	}
	&__day {
		padding: 5px 5px 2px;
		font: 14px/1.5 "Special Elite", cursive;
		border-bottom: 2px solid $color-black;
	}
	&__list {
		padding: 8px;
		font-size: 14px;
		line-height: .9;
	}
	p {
		padding-left: 8px;
		position: relative;
		margin: 5px 0;
		&:after {
			content: '-';
			top: 0;
			position: absolute;
			left: 0;
		}
	}
	.highlighted {
		position: absolute;
		width: 100%;
		bottom: 0;
		padding: 8px;
		left: 0;
		text-align: center;
		.text {
			margin-top: 5px;
			position: relative;
			span {
				position: relative;
				z-index: 2;
			}
			&:after {
				content: '';
				background: rgba($color-pink,0.3);
				width: 95%;
				height: 100%;
				position: absolute;
				left: 2px;
				top: 0;
				z-index: 1;
				transform: rotate(-3deg);
			}
		}
	}
}

.notes {
	grid-area: notes;
	border: 2px solid $color-black;
	border-width: 0 2px 2px;
	margin: 35px 20px 0 0;
	position: relative;
	span {
		display: block;
		margin: -25px 22px;
		font: 32px "Lobster", cursive;
		@include text-shadow;
		&:before {
			content: "";
			position: absolute;
			width: 100%;
			height: 2px;
			top: 0;
			left: 0;
			background: #111;
			background: linear-gradient(
				to right,
				#111 15px,
				transparent 15px,
				transparent 95px,
				#111 95px
			);
		}
	}
	&__list {
		margin-top: 24px;
		padding: 10px;
		line-height: 1.2;
	}
}

.expenses {
	grid-area: expenses;
	margin: 0 0 20px 20px;
	display: grid;
	grid-gap: 6px 10px;
	align-items: center;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(6, auto);
	h4 {
		text-align: center;
		margin: 0 0 10px;
		font: 16px/1 "Rock Salt", cursive;
		&:first-of-type {
			grid-column: 1 / span 4;
		}
	}
	&__box {
		border: 2px solid $color-black;
		grid-column: span 2;
		padding: 7px 7px 5px;
	}
	&__title {
		font: 4px;
	}
	&__amount {
		font: 19px 'Gochi Hand', cursive;
		display: inline-block;
		margin-left: 10px;
	}
	.savings {
		position: relative;
		grid-column: 1 / span 4;
		width: 99%;
		padding: 10px 10px 5px;
		background: rgba($color-pink, 0.4);
		box-shadow: 3px 3px 0 0 rgba($color-pink2, 0.7);
		font: 16px/1 "Rock Salt", cursive;
	}
}

.picture {
	grid-area: picture;
	margin-left: 20px;
	&__border {
		width: 100%;
		background: #f9f9f9;
		padding: 20px 10px 50px;
		height: 95%;
		transform: rotate(5deg);
		position: relative;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
		&:after {
			content: "";
			width: 55%;
			height: 20px;
			top: -10px;
			z-index: 5;
			left: 25%;
			transform: rotate(-2deg);
			position: absolute;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			background: rgba(220, 220, 220, 0.4);
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		figcaption {
			margin: 10px 0;
			text-align: center;
			display: block;
			font: 14px/1 "Gochi Hand", cursive;
			color: $color-vermilion;
		}
	}
}

.goals {
	grid-area: goals;
	margin: 25px 0 0 20px;
	border: 2px solid $color-black;
	border-width: 0 2px 2px;
	position: relative;
	&__item {
		padding: 3px 12px;
		&__checkbox {
			border: 2px solid $color-black;
			width: 20px;
			height: 20px;
			display: inline-block;
			margin-right: 5px;
			position: relative;
			span {
				font-size: 26px;
				display: inline-block;
				position: absolute;
				top: -4px;
				color: $color-pink3;
			}
		}
		&__desc {
			display: inline-block;
			font: 18px "Gochi Hand", cursive;
			vertical-align: top;
		}
	}
	> span:nth-child(1) {
		position: absolute;
		text-transform: uppercase;
		font: 700 9px "Rock Salt", cursive;
		top: -30px;
		transform: rotate(-15deg);
	}
	> span:nth-child(2) {
		display: block;
		margin: -25px 22px;
		font: 32px "Lobster", cursive;
		@include text-shadow;
		&:before {
			content: "";
			position: absolute;
			width: 100%;
			height: 2px;
			top: 0;
			left: 0;
			background: #111;
			background: linear-gradient(
				to right,
				#111 15px,
				transparent 15px,
				transparent 95px,
				#111 95px
			);
		}
	}
	&__inner {
		margin-top: 40px;
	}
}

.music {
	grid-area: quote;
	margin: 25px 0 10px 20px;
	position: relative;
	&__title {
		font: 22px "Special Elite", cursive;
	}
	&__artist {
		color: $color-red2;
		margin: 15px 0;
		transform: rotate(-10deg);
		max-width: 50px;
		font: 24px/.8 'Gochi Hand', cursive;
	}
	svg {
		width: 65px;
		position: absolute;
		bottom: 0px;
		right: -10px;
	}
}

.tracker {
	grid-area: tracker;
	display: grid;
	margin: 20px 0 0 20px;
	grid-template-rows: repeat(4, 28px);
	grid-template-columns: max-content repeat(7, 1fr);
	align-items: center;
	font: 18px/1 "Gochi Hand", cursive;
	grid-auto-flow: row;
	text-align: center;
	&__title {
		grid-column: 1;
		text-align: left;
		padding-right: 15px;
	}
	&__day {
		text-align: center;
		&:nth-child(1) {
			grid-column-start: 2;
		}
	}
	&__bubble {
		border: 1.5px dashed;
		margin: auto;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		&:nth-child(10),&:nth-child(12),&:nth-child(13) {
			background: rgba($color-vermilion,0.5);
		}
		&:nth-child(17),&:nth-child(18),&:nth-child(19),&:nth-child(22), &:nth-child(23) {
			background: rgba($color-pink,0.5);
		}
		&:nth-child(27),&:nth-child(29),&:nth-child(30) {
			background: rgba(coral,0.5);
		}
	}
}

/* Responsive here
@media screen and (max-width: 768px) {
	.main-content {
		padding: 1em;
	}
	.notebook__inner {
		grid-template-columns: 40% 25% 35%;
		grid-template-rows: auto;
		grid-template-areas: 
			"title title title" 
			"days days days" 
			"notes notes notes" 
			"expenses expenses expenses"
			"goals quote picture"
			"tracker tracker picture";
		> div {
			margin: 30px 20px;
		}
		&:after {
			width: 100%;
			height: 100px;
			bottom: 0;
			background: linear-gradient(
				to bottom,
				transparent 10%,
				rgba(153, 153, 153, 0.05) 50%,
				rgba(153, 153, 153, 0.4) 51%,
				rgba(153, 153, 153, 0.15) 51.5%,
				transparent 90%
			);
		}
	}
}
*/