/*
Theme Name: Cancer Checker App
Theme URI: https://harmonicdesign.ca
Author: Harmonic Design
Author URI: https://harmonicdesign.ca
Description: This is a JOKE app meant to demonstrate the importance of statistics. 
             This website should not, and cannot, be used as medical advice. 
             This app does not in any way show you medical information.
*/

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	padding: 0;
	font-size: 22px;
	line-height: 1.6;
	color: #2d2d2d;
	font-family: sans-serif;
	background: #fefefe;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
	text-decoration-style: dashed;
}

a:active {
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

main {
	aspect-ratio: 9 / 16;
	width: calc(100% - 4rem);
	max-width: 800px;
	max-height: calc(100vh - 8rem);
	margin: 4rem auto;
	border-radius: 50px;
	background: linear-gradient(0deg, rgb(91, 22, 81) 0%, rgb(252, 70, 107) 100%);
	box-shadow: 14px 14px 28px #bebebe, -14px -14px 28px #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

footer {
	margin: 10vh auto 0 auto;
	width: calc(100% - 4rem);
	max-width: 800px;
}

#test {
	box-shadow: none;
	border: none;
	background: #ffc3c3;
	color: #222;
	font-weight: bold;
	font-size: 22px;
	display: flex;
	width: calc(100% - 4rem);
	aspect-ratio: 1/1;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	max-width: 200px;
	box-shadow: 14px 14px 28px rgb(91, 22, 81), -14px -14px 28px rgb(252, 70, 107);
	transition: all ease-in-out 350ms;
	cursor: pointer;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

#test:hover {
	box-shadow: 14px 14px 28px rgb(252, 70, 107), -14px -14px 28px rgb(91, 22, 81);
}

#test::before {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0%;
	background-color: #fff;
	z-index: -1;
	border-radius: 50%;
	transition: all ease-in-out 2s;
}

#test.active::before {
	height: 100%;
}

#status {
	text-align: center;
	color: white;
	opacity: 0;
	pointer-events: none;
	height: 0px;
	transition: opacity ease-in-out 1s;
}

#status.active {
	opacity: 1;
	pointer-events: 1;
	height: initial;
}