/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

html {
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

body {
	--primary-text-color: hsl(205,54%, 12%);
	--busy-red-color: hsl(0, 90%, 51%);
	--free-green-color: hsl(126, 48%, 48%);
	--semi-transparent: hsla(0, 0%, 100%, .92);
	--body-font: 'Noto Sans JP', sans-serif;

	--headline-font: 'Raleway', sans-serif;

}

body {
	text-align: center;
	font-family: var(--body-font);
	color: var(--primary-text-color);
	min-height: 100vh;
}

h1 {
	font-family: var(--headline-font);
	font-size: 1.5rem;
}

.schedule {
	display: grid;
	gap: 1px;
	text-align: center;
	margin: 0 auto;
	max-width: 600px;
	padding: 0 2rem;
	list-style: none;
}

.today {
	font-size: 2rem;
}

.tomorrow {
	font-size: 1.4rem;
	margin-bottom: 3px;
}

.day {
	background-color: var(--free-green-color);
	padding: 1rem 3rem;
}

.day_inner {
	background-color: var(--semi-transparent);
	padding: .5rem;
	display: block;
	text-decoration: none;
}

a, a:active, a:visited {
	color: var(--primary-text-color);
}

.day.busy {
	background-color: var(--busy-red-color);
}