body {
	margin: 0;
    min-height: 100vh;
	background-color: #efefef;
    background: linear-gradient(
        to bottom,
        #eef4fb 0%,
        #f7f9fc 40%,
        #ffffff 100%
    );
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Page
--------*/

	#page {
		padding: 0 20px 20px 20px;
	}

	@media screen and (min-width: 1025px) {
		#page {
			width: 1024px;
			height: 639px;
			overflow: auto;
			outline: 1px solid #ccc;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

/* Header
----------*/

	header {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		display: grid;
		grid-template-columns: 30px 1fr 30px;
		margin-top: 20px;
	}

	.header--btn {
		background-color: rgba(255,255,255,0.5);
		border-radius: 5px;
	}

	header .mdi {
		color: #454545;
		font-size: 18px;
	}

/* Layout
----------*/

	.layout {
		display: grid;
		grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
		grid-gap: 20px;
		margin-top: 15px;
	}

	@media screen and (max-width: 480px) {
		.layout {
			grid-template-columns: minmax(0,1fr);
		}
	}