body {
	font-family: "Verdana", Verdana, monospace;
	font-size: 1.2rem;
	letter-spacing: .099rem;
	margin: 8%;
	max-width: 580px;
}
h1 {
	font-size: 1.5em;
}
h2 {
	font-size: 1.2em;
}
h3{
	font-size: 1.1em;
	font-weight: lighter;
}
ul {
	list-style-type: none;
}

:root {
	--square-size: 50px;
	--square-gap: 5px;
	--week-width:  calc(var(--square-size) + var(--square-gap));
}

.months { grid-area: months; }
.days { grid-area: days; }
.squares { grid-area: squares; }

.hobby-page {
	display: grid;
	grid-template-columns: 580px 250px;
	grid-template-rows: 300px 300px;
}
.posts {
	grid-row-start: 2;
}
.tags{
	grid-column-start: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}

.contribution-grid {
	display: inline-grid;
	grid-gap: 1px;
	grid-template-areas:  "months" "squares";
	grid-template-columns: auto 1fr;
}

.months {
  display: grid;
  grid-template-columns: repeat(7, calc(var(--square-size) + var(--square-gap)));
  justify-items: center;

}

.squares {
	display: grid;
	grid-gap: var(--square-gap);
	grid-template-rows: repeat(5, var(--square-size));
}

.squares {
	grid-auto-flow: column;
	grid-auto-columns: var(--square-size);
}







.day {
  border-radius: 5px;
  padding: 1px;
}


.month {
  color: #fff;
}
.day {
	background-color: gray;
}

.green {
	background-color: green;
}