@import url(theme.css);
/* page style */

/* computer */
.container {
	padding: 48px 48px 12px;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: var(--color-surface-container);
	border-radius: 12px;
	margin: 12px;
}

.container footer {
    background: none;
}

h1 {
	margin: 0;
	font-style: var(--md-sys-typescale-headline-large-font-family-style);
	font-weight: var(--md-sys-typescale-headline-large-font-weight);
	font-size: var(--md-sys-typescale-headline-large-font-size);
	letter-spacing: var(--md-sys-typescale-headline-large-tracking);
	line-height: var(--md-sys-typescale-headline-large-height);
	text-transform: var(--md-sys-typescale-headline-large-text-transform);
	text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
}

h5 {
	margin: 0;
	color: var(--color-primary);
}

/* tablet */
@media screen and (max-width: 768px) {
}

/* phone */
@media screen and (max-width: 480px) {
	.container {
		padding: 48px 24px 0;
		background: var(--color-background);
		border-radius: 0;
		margin: 0;
	}
    
	h1 {
		font-style: var(--md-sys-typescale-headline-medium-font-family-style);
		font-weight: var(--md-sys-typescale-headline-medium-font-weight);
		font-size: var(--md-sys-typescale-headline-medium-font-size);
		letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
		line-height: var(--md-sys-typescale-headline-medium-height);
		text-transform: var(--md-sys-typescale-headline-medium-text-transform);
		text-decoration: var(
			--md-sys-typescale-headline-medium-text-decoration
		);
	}
}