@import url(//db.onlinewebfonts.com/c/2206d6cc490084998d531e8c1b2cbb4a?family=Druk+Wide+Bold);
@font-face {font-family: "Druk Wide Bold";
  src: url("../font/@font-face/2206d6cc490084998d531e8c1b2cbb4a.eot"); /* IE9*/
  src: url("../font/@font-face/2206d6cc490084998d531e8c1b2cbb4a.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("../font/@font-face/2206d6cc490084998d531e8c1b2cbb4a.woff2") format("woff2"), /* chrome、firefox */
  url("../font/@font-face/2206d6cc490084998d531e8c1b2cbb4a.woff") format("woff"), /* chrome、firefox */
  url("../font/@font-face/2206d6cc490084998d531e8c1b2cbb4a.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("../font/@font-face/2206d6cc490084998d531e8c1b2cbb4a.svg#Druk Wide Bold") format("svg"); /* iOS 4.1- */
}

h1{
    font-family:"Druk Wide Bold" !important;
    font-size:30px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

P{
	font-family: 'Space Mono', monospace;
	font-size: 20px;
}

a {
	text-decoration: none;
	color: #FF4789;
}

svg {
	width:  60vw;
	height:  899px; 
}

.week {
	margin: auto;
	margin-top: 50px;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 20px;
}

.day {
	font-family: 'Space Mono', monospace;
	font-size: 20px;
	color: black;
	padding-left: 5.25%;
	padding-right: 5.25%;
}

.container {
	display: flex;
	margin: auto;
	width: 90%;
	height: 700px;
	border: 4px solid black;
}

.row {
	margin: auto;
	display: flex;
	width: 90%;
	height:calc(700px / 4);
}

.topline {
	margin: auto;
	width: 90%;
	height: 5px;
	border: 4px solid black;
	border-top-style: none;
	border-left-style: none;
	border-right-style: none;
}

.boxleft {
	width: calc(90% / 6);
	height: calc(700px / 4);
	border: 4px solid black;
	border-top-style: none;
}

.box {
	width: calc(90% / 6);
	height: calc(700px / 4);
	border: 4px solid black;
	border-left-style: none;
	border-top-style: none;
}

.boxright {
	width: calc(90% / 6);
	height: calc(700px / 4);
	border: 4px solid black;
	border-left-style: none;
	border-top-style: none;
}

.daynum {
	padding-left: 20px;
}

.one:hover {
	background-color: #C4D4FB;
	border: 4px solid black;
	border-left-style: none;
}
.two:hover {
	background-color: #A2E5FC;
	border: 4px solid black;
	border-left-style: none;
}
.three:hover {
	background-color: #BAFCD3;
	border: 4px solid black;
	border-left-style: none;
}
.four:hover {
	background-color: #D9FFC8;
	border: 4px solid black;
	border-left-style: none;
}
.five:hover {
	background-color: #D9FFC8;
	border: 4px solid black;
	border-left-style: none;
}
.six:hover {
	background-color: #BAFCD3;
	border: 4px solid black;
}
.seven:hover {
	background-color: #A1F9EB;
	border: 4px solid black;
	border-left-style: none;
}
.eight:hover {
	background-color: #DBC9FB;
	border: 4px solid black;
	border-left-style: none;
}
.nine:hover {
	background-color: #DBC9FB;
	border: 4px solid black;
	border-left-style: none;
}
.ten:hover {
	background-color: #C4D4FB;
	border: 4px solid black;
	border-left-style: none;
}

.colors {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	padding: 20px;
}

/* media query for mobile*/
@media only screen and (max-width:  800px) {

	h1{
		font-size: 14px;
	}
	p {
		font-size: 12px;
		line-height: 1;
	}
	svg {
		width:  90vw;
	}

	.day {
		font-size: 12px;
		padding-left: 3.5%;
		padding-right: 3.5%;
	}
	.daynum {
		color: black;
	}
	.one {
		background-color: #C4D4FB;
		border: 4px solid black;
		border-left-style: none;
		}
	.two {
		background-color: #A2E5FC;
		border: 4px solid black;
		border-left-style: none;
	}
	.three {
		background-color: #BAFCD3;
		border: 4px solid black;
		border-left-style: none;
	}
	.four {
		background-color: #D9FFC8;
		border: 4px solid black;
		border-left-style: none;
	}
	.five {
		background-color: #D9FFC8;
		border: 4px solid black;
		border-left-style: none;
	}
	.six {
		background-color: #BAFCD3;
		border: 4px solid black;
	}
	.seven {
		background-color: #A1F9EB;
		border: 4px solid black;
		border-left-style: none;
	}
	.eight {
		background-color: #DBC9FB;
		border: 4px solid black;
		border-left-style: none;
	}
	.nine {
		background-color: #DBC9FB;
		border: 4px solid black;
		border-left-style: none;
	}
	.extra {
		background-color: white;
		border: 4px solid black;
		border-left-style: none;
	}


	.container {
		height: 500px;
	}

	.row {
		height:calc(500px / 4);
	}

	.boxleft {
		height: calc(500px / 4);
	}

	.box {
		height: calc(500px / 4);
	}

	.boxright {
		height: calc(500px / 4);
	}

	.colors {
		width: 90%;
	}
}