* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

html {
  height: 100%;
	scroll-behavior: smooth;
}

:root {
	--accent-color: #ffe1ff;
	--shadow--color: rgba(100, 100, 111, 0.2);
  --bg-header: color(xyz calc(3.5 - 1.5) calc(3.5 - 2.1) calc(1.5) / calc(1.5 - .5));
  --txt-header: color(xyz-d50 0 none none);
	--bg: white;
	/* various color syntax for the same color */
	--color-0: rebeccapurple;
	--color-1: #639;
	--color-2: #639f;
	--color-3: #663399;
	--color-4: #663399ff;
	--color-5: rgb(102, 51, 153);
	--color-6: rgba(102 51 153 / 1);
	--color-7: rgba(102, 51, 153, 100%);
	--color-8: rgb(40%, 20%, 60%);
	--color-9: rgba(40%, 20%, 60%, 100%);
	--color-10: hsl(270 50% 40%);
	--color-11: hsl(270deg 50% 40%);
	--color-12: hsla(270 50% 40% / 100%);
	--color-13: hwb(270 20% 40%);
	--color-14: hwb(270deg 20% 40%);
	--color-15: hwb(4.712rad 20% 40%);
	--color-16: hwb(300grad 20% 40%);
	--color-17: hwb(0.75turn 20% 40%);
	--color-18: lab(32.39 38.43 -47.69);
  --color-19: lab(32.39% 38.43 -47.69 / 1);
  --color-20: oklab(0.44135 0.08877 -0.13495);
  --color-21: oklab(44% 0.09 -0.13);
  --color-22: lch(32.39 61.25 308.86);
  --color-23: oklch(0.44 0.16 303.38);
  --color-24: oklch(44% 0.16 303.38);
  --color-25: color(prophoto-rgb 0.32 0.19 0.49);
  --color-26: color(rec2020 0.305 0.168 0.53);
  --color-27: color(xyz 0.1238 0.0749 0.310);
  --color-28: color(xyz-d50 0.1168 0.07368 0.23305);
  --color-29: color(xyz-d65 0.127 0.077 0.31);
	--color-30: color(a98-rgb 0.3575 0.212 0.585);
  --color-31: color(srgb 0.4 0.2 0.6);
  --color-32: color(srgb-linear 0.132 0.033 0.32);
  --color-33: color(display-p3 0.375 0.21 0.58);
}

body {
  display: grid;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
  min-height: 100vh;
  grid-auto-flow: row;
  grid-template-rows: 4rem 1fr 1rem;
  gap: 4px;
}

header {
	text-align: center;
	font-size: 1.5rem;
	background-color: var(--bg-header);
	color: var(--txt-header);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-inline: 1rem;
}

main {
  display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	align-content: center;
	justify-items: center;
	gap: 0.5rem;
}

div {
	height: 15vh;
	width: clamp(15rem, 50% + 1rem, 30rem);
	display: grid;
	justify-items: center;
	align-content: center;
	border-radius: 1rem;
	box-sizing: border-box;
  border: 1px solid transparent;
	box-shadow: var(--shadow--color) 0 0.5rem 1.75rem 0;
  background-clip: padding-box;
	background-color: var(--accent-color);
	font-size: clamp(1.5rem, -0.575rem + 2.35vw, 2.5rem);
	color: var(--accent-color);
  margin-inline: 0.25rem;
}

footer {
	font-size: 1.5rem;
	background-color: var(--bg);
	margin-inline: 0.5rem;
}

em {
	font-size: 1.25rem;
  word-spacing: 1ch;
}

.btn {
  background-color: #ea4c89;
  border-radius: 0.5rem;
  border-style: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  transition: color 100ms;
  user-select: none;
  touch-action: manipulation;
}

.btn:hover,
.btn:focus {
  background-color: #F082AC;
}


/* switch */
.switch {
  position: relative;
  display: inline-block;
  width: 4rem;
  height: 1.7rem;
	margin-top: 3px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.5rem;
  width: 1.5rem;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(2.1rem);
}

.slider.round {
  border-radius: 2rem;
}

.slider.round:before {
  border-radius: 50%;
}