@charset "utf-8";
/* CSS Document */

@media print
{
	.HomeButton
	{
		height: 20cm;
		width: 20cm;
		margin-top: -10cm;
		margin-left: -10cm;
	}
	
	#settings { display: none !important;}

	.short:before, .short:after { font-size: 48mm; }
	.full { border-radius: 8mm; }
	.full:before, .full:after { font-size: 16mm; line-height: 32mm; margin-top: calc(-64mm + 5%); }
	
	.BnW .petal-color { border: 0.5mm solid black; }
	.BnW .pistil { border: 0.5mm solid black; }
	.BnW.logo { border: 1mm solid black; }

}

@media screen and (orientation:portrait)
{
	.HomeButton
	{
		height: 50vw;
		width: 50vw;
		margin-top: calc((50vw/2)*-1);
		margin-left: calc((50vw/2)*-1);
	}

	.short:before, .short:after { font-size: 12vw; }
	.full { border-radius: 2vw; }
	.full:before, .full:after { font-size: 4vw; line-height: 8vw; margin-top: calc(-16vw + 5%); }
	
	.BnW .petal-color { border: 0.2vw solid black; }
	.BnW .pistil { border: 0.2vw solid black; }
	.BnW.logo { border: 0.4vw solid black; }

}

@media screen and (orientation:landscape)
{
	.HomeButton
	{
		height: 50vh;
		width: 50vh;
		margin-top: calc((50vh/2)*-1);
		margin-left: calc((50vh/2)*-1);;
	}

	.short:before, .short:after { font-size: 12vh; }
	.full { border-radius: 2vh; }
	.full:before, .full:after { font-size: 4vh; line-height: 8vh; margin-top: calc(-16vh + 5%); }
	
	.BnW .petal-color { border: 0.2vh solid black; }
	.BnW .pistil { border: 0.2vh solid black; }
	.BnW.logo { border: 0.4vh solid black; }
}

@keyframes LogoAppears
{
	0% { background-color: rgba(173,216,230,0); }
	100% { background-color: rgba(173,216,230,1); }
}

@keyframes GrowPetals
{
	0% { height: 0%; width: 0%; left: 0%; transform: rotate(0deg); }
	50% { width: 0%;  left: 0%; transform: rotate(0deg); }
	100% { height: 60%; width: 40%; left: -20%; }
}

@keyframes GrowPistil
{
	0% { height: 0%; width: 0%; top: 0; left: 0; background-color: gold; }
	50% { background-color: gold; }
	100% { height: 30%; width: 30%; top:-15%; left: -15%; }
}

@keyframes GrowPistilColor
{
	0% { background-color: gold; }
	50% { background-color: gold; }
}

@keyframes GrowPollen
{
	0% { height: 100%; width: 100%; top: -50%; left: -50%; }
	100% { height: 40%; width: 40%; top:-20%; left: -20%; }
}

@keyframes GrowStamen
{
	0% { height: 200%; width: 0%; margin-top: -100%; margin-left: 0%; }
	100% { height: 100%; width: 20%; margin-top:-50%; margin-left: -10%; }
}

.HomeButton
{
	position: relative;
	display: inline-block;
}

.logo
{
	position: relative;
	background-color: lightblue;
	display: inline-block;
	width: 100%;
	animation-name: LogoAppears;
	animation-fill-mode: backwards;
	animation-duration: 2s;
	animation-delay: 1s;
}

.simple
{
	border-radius: 100%;
	height: 100%;
}

.short
{
	border-radius: 10%;
	height: 100%;
}

.short::after, .short::before
{
	content: "wec";
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	line-height: 0;
}

.short::before
{
	top: 85.5%;
	left: 0.5%;
	width: 100%;
	color: lightslategrey;
}

.short::after
{
	top: 85%;
	left: 0%;
	width: 100%;
	height: 30%;
	color: white;
}

.full { height: 50%; }

.full::after, .full::before
{
	content: "windflower \A ecological \A community";
	position: absolute;
	text-align: Left;
	text-transform: capitalize;
	overflow: hidden;
	width: 45%;
}

.full::before
{
	top: 55.5%;
	left: 50.5%;
	color: lightslategrey;
}

.full::after
{
	top: 55%;
	left: 50%;
	color: white;
}

.flower
{
	position: relative;
	height: 65%;
	width: 65%;
	top: 50%;
	left: 50%;
}

.short .flower
{
	height: 50%;
	width: 50%;
	top: 40%;
	left: 50%;
}

.full .flower
{
	height: 70%;
	width: 35%;
	top: 50%;
	left: 25%;
}

.petal
{
	height: 60%;
	width: 40%;
	transform-origin: top center;
	position: absolute;
	left: -20%;
	animation-name: GrowPetals;
	animation-duration: 3s;
	animation-fill-mode: backwards;
}

.petal-color
{
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: white;
    border-radius: 100% 100% 75% 75%;
}

.petal-shadow
{
	top: 5%;
	left: 5%;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: lightslategrey;
    border-radius: 100% 100% 75% 75%;
}

.pistil
{
	height: 30%;
	width: 30%;
	top: -15%;
	left: -15%;
	background-color: yellowgreen;
	overflow: hidden;
	border-radius: 100%;
	position: absolute;
	animation-name: GrowPistil;
	animation-duration: 2s;
	animation-fill-mode: backwards;
}

.pistil-highlight
{
	height: 100%;
	width: 100%;
	background-color: greenyellow;
	transform: translate(5%, -5%);
	border-radius: 100%;
	position: absolute;
	animation-name: GrowPistilColor;
	animation-duration: 2s;
	animation-fill-mode: backwards;
}

.pollen
{
	height: 40%;
	width: 40%;
	top: -20%;
	left: -20%;
	border-radius: 100%;
	position: absolute;
	animation-name: GrowPollen;
	animation-duration: 3s;
	animation-fill-mode: backwards;
}

.stamen
{
	height: 100%;
	width: 20%;
	position: absolute;
	transform-origin: center;
	background-color: gold;
	border-radius: 100%;
	margin-top: -50%;
	margin-left: -10%;
	animation-name: GrowStamen;
	animation-duration: 3s;
	animation-fill-mode: backwards;
}

#LogoBnW
{
	border: 1px solid gray;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	background: repeating-linear-gradient( -45deg, black, black 2%, white 2%, white 4%);
	display: inline-block;
	vertical-align: bottom;
	cursor: pointer;
}

.BnW .petal-color { box-sizing: border-box; }
.BnW .petal-shadow { background-color: black; }
.BnW .pistil-highlight { visibility: hidden !important; }
.BnW .pistil { background: repeating-linear-gradient( -45deg, black, black 2%, white 2%, white 4%); box-sizing: border-box; }
.BnW .stamen { background-color: black; }
.BnW.logo { background-color: white; box-sizing: border-box; }
.BnW.short::after, .BnW.full::after { color: black; }
.BnW.short::before, .BnW.full::before { visibility: hidden !important; }

#settings
{
	position: absolute;
	text-align: center;
	width: 340px;
	height: 240px;
	margin-left: -170px;
	top: -220px;
	left: 50%;
	background-color: lightgray;
	border-radius: 0px 0px 10px 10px;
	box-shadow: 0px 5px 0px gray;
	padding: 20px;
	box-sizing: border-box;
	transition: all 0.5s ease;
}

#settings::after
{
	content: "▼";
	width: 100%;
	text-align: center;
	position: absolute;
	cursor: pointer;
	bottom: 0%;
	left: 0%;
	color: gray;
}

#settings:hover { top: 0% !important; }

#settings:hover::after { content: "▲"; }

.color
{
	width: 20px;
	height: 20px;
	padding: 0px;
	margin: 0px 5px 0px 0px;
	border-radius: 100%;
	color: transparent !important;
	border: 1px solid gray;
	cursor: pointer;
}