/* light theme colors */
html{
  --bg: #FCFCFC;
  --bg-panel: #EEEEEE;/*box container*/
  --color-headings: #00ADB5;/*heading*/
  --color-text: #393e46;/*paragraph*/
  height:100%;
  display:grid;
  align-items:center;
  justify-content:center;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
/* dark theme colors */
html[data-theme='dark']{
  --bg: #232931;
  --bg-panel: #393E46;
  --color-headings: #00ADB5;
  --color-text: #B5B5B5;
}
body{
  font-family: 'Montserrat', sans-serif;
  background-color: var(--bg);
}
/* box container */
.box{
  display:grid;
  grid-template-rows: auto auto;
  border-radius: 15px;
  padding:30px;
  width:60vw;
  background-color: var(--bg-panel);
  letter-spacing: 0.05rem;
}
h2{
  font-size: 2.18rem;/*35px*/
  margin: 20px 0;
  color:var(--color-headings);
}
div h2 span{
  float: right;
}
div p{
  font-size: 1.25rem;/*20px*/
  margin-top: 5px;
  margin-bottom: 20px;
  color: var(--color-text);
}
form{  
  margin-top: 0.7rem;
}
/* checkbox toggler */
input[type=checkbox]{
	height: 0;
  width: 0;
	visibility: hidden;
}
label {
	cursor: pointer;
	text-indent: -9999px;
	width: 52px;
	height: 27px;
	background: grey;
	float: right;
	border-radius: 100px;
	position: relative;
}
label:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 90px;
	transition: 0.3s;
}
input:checked + label {
	background: var(--color-headings);
}
input:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}
label:active:after {
	width: 45px;
}
/* transition */
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: all 750ms !important;
  transition-delay: 0 !important;
}