@charset "UTF-8";

:root {
  --color-teal-light: #88dffc;
  --color-teal-med: #00a4db;
	--color-teal-dark: #03759c;
	--color-teal-darkest: #07303d;
	--font-size-xs: .75rem;
	--font-size-sm: .875rem;
	--font-size-default: 16px;
	--font-size-lg: 1.25rem;
	--font-size-xl: 2rem;
	--font-size-2xl: 2.5rem;
	--font-size-4xl: 3.25rem;
}

html {
	font-size: var(--font-size-default);
}

body.toybox {
	background-color: var(--color-teal-dark);
	font-family: "Tahoma", "Arial", sans-serif;
	color: white;
	margin: auto;
  text-align: center;
}

p.title {
	width: 100%;
  font-size: clamp(var(--font-size-lg), 10vw, var(--font-size-4xl));
  font-weight: bold;
	text-shadow: 4px 4px 6px black;
}

.text {
  font-size: var(--font-size-default);

	&.title {
  	font-size: var(--font-size-2xl);
  	font-weight: bold;
		text-shadow: 4px 4px 4px black;
	}
	&.italic { font-style: italic; }
	&.shadow { text-shadow: 2px 2px 2px black; }
	&.color-teal-light 	{ color: var(--color-teal-light); }
	&.font-size-small 	{ font-size: var(--font-size-sm); }
	&.font-size-4xl 		{ font-size: var(--font-size-4xl); }
}

.button {
	margin: 1px;
  width: 150px; height: 30px;
	color: white;
	font-size: var(--font-size-sm);
	background-color: var(--color-teal-med);
	border: 1px solid black;
	border-radius: .4rem;
	opacity: 1.0;
  cursor: pointer;

	&:hover {
		background-color: var(--color-teal-light);
    color: black;
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
	}
	&:active {
		background-color: var(--color-teal-darkest);
		color: white;
    transform: scale(0.98);
    transition: transform 0.05s ease;
  }
}