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


	.modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        opacity: 0;
		backdrop-filter: blur(5px);
        visibility: hidden;
		transform: scale(1.7);
        transition: visibility 0s linear 0.75s, opacity 0.75s 0s, transform 0.75s;
   /*     transform: scale(1.1);
        transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; */
		z-index: 100; /* This keeps modal above auto-scrolling navigation bar */
    }
	
	.show-modal {
        opacity: 1;
        visibility: visible;
        transform: scale(1.0);
		transition: visibility 0s linear 0s, opacity 0.75s 0s, transform 0.75s;
	/*	transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.5s; */
    }

	.modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
		font-family: sans-serif;
		color: black;
        background-color: white;
     	background-repeat: no-repeat;
		background-position: center;
		padding:  32px 32px 24px;
        width: 590px;
		height: 434px;
        border-radius: 16px;
		border: 2px solid darkgray;
		box-shadow: 3px 7px 9px 5px rgba(0,0,0,0.5);
    }
/*	
	.modal-content .bigTodayDateNumber {
		position: absolute;
		index: 4;
		top: 110px;
		right: 140px;
		font-size: 72px;
		color: red;
	}
*/	
	
	#sideGraphicContainer {
		position: relative;
		top: 75px;
		left: 205px;
		width: 300px;
		height: 250px;
/*		border: 1px solid black; */
	}
/*	
	#balloonsGraphic {
		position: relative;
		top: 20px;
		left: 80px;
	} */
	
	.dateClicked {
		position: absolute;
		top: 60px;
		left: 120px;
	}
	
	.wordTodayModalMemo {
		position: absolute;
		top: 135px;
		left: 140px;
		font-size: 30px;
		font-weight: bold;
		color: red;
	}

	.bigDateNumber {
		position: absolute;
	/*	color: #333; */
		top: 110px;
		right: 140px;
		font-size: 72px;
	}
	
	#theDayCounter {
		position: absolute;
		index: 10;
		bottom: 110px;
		left: 120px;
		font-size: 16px;
		color: red;
	}
	
	.numbers {
		line-height: 30px;
		font-weight: bold;
	}
	
	#leapYearModalSentence {
		font-size: 14px;
	}
	
	#leapYearModalWords {
		font-weight: bold;
	}
	
	#happyBirthday {
		color: green;
		font-weight: bold;
	}
	
	.nameOfMoonPhase {
		position: absolute;
		index: 10;
		bottom: 115px;
		left: 120px;
		color: #000000;
		font-size: 20px;
	}
	
	.moonPhaseTime {
		font-size: 16px;
	}
	
	.moonPhaseTimeZone {
		font-size: 14px;
	}
	

	/*
	@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {   This style controls lineheight on single line break <br /> tag for Chrome only */
/*		.seasonsChangeText {
			line-height: 20px;
		} 
	}
*/
	.dateModalInfoHolder {
		position: absolute;
	/*	bottom: 110px; */
		bottom: 120px;
		left: 120px;
		font-size: 16px;
		line-height: 25px;
	}

	.close-X {
		float: right;
		margin-right: 20px;
		margin-top: 20px;
		cursor: pointer;
		color: #696969;
		font-family: sans-serif;
		font-size: 60px;
		transition: color 0.7s ease;
	}
	
	.close-X:hover {
		color: #ffffff;
	}
	
	.htmlCloseButton {
		position: absolute;
		left: 575px;
		bottom: 40px;
		background-color: lightgray;
		font-size: 12px;
		padding: 6px 12px;
		border: 1px solid darkgray;
		border-radius: 4px;
		float: right;
		transition: background-color 0.5s ease;
	}
	
	.htmlCloseButton:hover {
		background-color: darkgray;
	}