/*
 * 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.
 *


 */

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

:root {
	font-size: 62.5%;
}

body {
	font-family: Times, ‘Times New Roman’, serif;
background-color: #ffffff;
background-image: url(/images/Subtle-Prism.svg);
background-attachment: fixed;
background-size: cover;
}

h1 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 2.4rem;
	text-align: center;
	margin-bottom: 1em;
}

.outside {
	width: 90%;
	margin: 0 auto;
	max-width: 960px;
}
.wrapper {
	display: flex;
	justify-content: center;
}

.set, .textarea_wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-right: 1rem;
}

.dice {
	width: 60px;
	height: 60px;
	background-color: white;
	color: black;
	font-size: 5.8rem;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 6rem;
	margin-bottom: .3rem;
}

.blackdice {
	margin-bottom: .1rem;
	background-color: black;
	color: white;
}

.number {
	padding-top: .5rem;
}
.blackdice {
	background-color: black;
}
.doubledigit {
	letter-spacing: -0.02rem;
}

.scratchpad {
	height: 100%;
	font-size: 2rem;
	margin: 1em auto;
	width: 100%;
}

@media (min-width: 400px) {
	.wrapper {
		flex-direction: column;
	}

	.set, .textarea_wrapper {
		flex-direction: row;
		margin-bottom: 1rem;

	}
	.dice + .dice {
		margin-left: .3rem;
	}

	.blackdice + .blackdice {
		margin-left: .1rem;
	}

.scratchpad {
	max-width: 400px;
	height: 100%;
	font-size: 2rem;
	margin: .5em auto;
}

}