		<style>
		
		html {
			background-color: #FFFFF0;
		}
		
		
		title {
			font-size: 2em;
			color: white;
		}
		
        body {
        		font-family: Trebuchet MS, Arial, sans-serif;
            background-color: #FFFFF0;
            margin: 0;
            padding: 0;
            display: flex;
    			flex-direction: column;
    			align-items: center;
        }

        header {
            background-color: #F47174;
            padding: 1em 0;
            color: #FFF;
            text-align: center;
            font-size: 3em;
            font-family: Georgia, Times New Roman, serif;
            font-weight: bold;
            text-shadow: 2px 2px 4px black;
            width: 100%;
        }


        nav {
            background-color: #F4B071;
            padding: 10px 0;
    			width: 100%;
        }
        
        .nav {
            background-color: #F4B071;
            padding: 2px 0;
    			text-align: center;
            font-size: 1em;
            font-weight: bold;
            text-shadow: 2px 2px 4px black;
            width: 100%;
        }

        nav a {
            color: white;
            padding: 0 15px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        nav a:hover {
            background-color: #558daa;
        }

        .content {
            
            margin: 2em auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
            gap: 20px;
        }
        
        .observation-content {
            margin: 2em auto;
            padding: 0 20px;
            display: grid;
            gap: 20px;
            width: 100%;
        }

        .panel {
            background-color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            overflow: hidden;
        }

        .panel img {
            width: 100%;
            max-height: 200px;
            object-fit: cover;
        }

        .panel-content {
            padding: 10px;
        }
        
        main {
		    display: flex;
		    flex-direction: column;
		    align-items: center; /* Centers children horizontally in the flex container */
		    justify-content: center; /* Centers children vertically in the flex container */
		    min-height: 100vh; /* Optional: Makes the main container at least the height of the viewport */
		    padding: 20px; /* Optional: Adds some space around the content */
			 width: 100%;
			 overflow: auto;
			}

input[type="date"] {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    background-color: #f3f3f3;
    transition: background-color 0.3s ease;
}

input[type="date"]:focus {
    background-color: #e8e8e8;
    outline: none;
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    background-color: #4CAF50;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

.zodiac-dropdown select {
    padding: 5px;
    margin-left: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

 .planet-line {
    opacity: 0;
    transition: opacity 2s ease-out;
 >}

/* General Style */
.zodiac-overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

        .zodiac-overview img {
            width: 100%;
            max-height: 200px;
            object-fit: cover;
        }

        .zodiac-overview-content {
            padding: 20px;
            font-size:17px;
            -webkit-font-smoothing: antialiased;
        }

.planet-symbol {
    font-family: 'Noto Sans Symbols2', sans-serif;
    font-weight: bold;    /* making it bold */
    font-size: 35px;      /* increasing font size */
    text-shadow: 1px 1px 2px black;
}

.observation-panel {
	 align-self: center;
    display: flex;
    width: 100%;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    border-radius: 10%; /* Circular */
    cursor: pointer;
    border-style: double;
    border-color: white;
    border-width: 0.5em;
}

.explanation-text, .input-and-button, .hint-text {
    width: 100%; /* Ensures these elements don't overflow */
}

input[type="date"], button {
    max-width: 100%; /* Ensures input and button don't overflow their container */
}

/* Additional responsive adjustments */
@media (max-width: 480px) {
    .observation-panel {
        flex-direction: column; /* Stacks content vertically on very small screens */
    }
    .observation-panel-left, .observation-panel-right {
        width: 100%; /* Full width to utilize small screen space */
    }
}

.planet-inputs {
    display: flex;
    align-items: center; /* Aligns items vertically */
    flex-wrap: wrap; /* Allow items to wrap onto the next line */
    gap: 5px; /* Reduce the gap between items for less empty space */
    margin-top: 10px; /* Adjust top margin as needed */
    padding: 0; /* Ensure no extra padding is adding unnecessary space */
    font-size: 20px;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .planet-inputs {
        flex-direction: column;
        align-items: stretch; /* Makes children fill the container width */
    }

    .planet-inputs p {
        justify-content: center; /* Centers content on small screens */
    }
}

input[type="text"] {
    width: 50px; /* Fixed width for the inputs */
    text-align: left; /* Align text to the left within input fields */
    font-size: 20px;
}

.zodiac-dropdown select {
    padding: 5px;
    margin-left: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 20px;
}

/* Ephemeris container styles */
#ephemerisContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

/* SVG styles */
#zodiacChart, #ephemerisChart {
    max-width: 100%; /* Set a maximum width to maintain aspect ratio */
    height: auto; /* Adjust height automatically */
    margin: auto; /* This will center the SVG within the container */
}

.observation-panel-left {
    flex: 1;
    padding: 20px;
    text-align: center; /* Center content in the left panel */
}

.observation-panel-image {
    max-width: 250px;
    height: auto;
    border-radius: 10%; /* Circular image */
    border-style: solid;
    border-color: white;
    border-width: 0.15em;
}

.observation-panel-name {
	 font-size: 2.25em;
    margin-top: 10px;
    font-weight: bolder;
}

.observation-panel-description {
    margin-top: 10px;
    font-size: 1.5em;
    font-weight: light;
}

.observation-panel-right {
    flex: 3;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.observation-panel-title {
    font-size: 2em; /* Adjust title size for better scaling */
    font-weight: bold;
    margin-bottom: 10px;
}

.observation-panel-text {
    font-size: 1.2em; /* Adjust text size for better scaling */
    overflow-wrap: break-word;
}

/* Media queries for different breakpoints */
@media (max-width: 768px) {
    /* Adjust sizes for tablets */
    .observation-panel-name,
    .observation-panel-description,
    .observation-panel-title,
    .observation-panel-text {
        font-size: 1.5em;
    }
}

@media (max-width: 480px) {
    /* Adjust sizes for smaller mobile devices */
    .observation-panel-name,
    .observation-panel-description,
    .observation-panel-title,
    .observation-panel-text {
        font-size: 1.2em;
    }
}

@media (max-width: 360px) {
    .observation-panel-right {
        padding: 15px; /* Reduce padding for very small screens */
    }

    .observation-panel-name,
    .observation-panel-description,
    .observation-panel-title,
    .observation-panel-text {
        font-size: 1em; /* Further reduce font size for very small screens */
    }
}


.deity-background{
	background-color: #BA55D3;
}

.deity-background:hover{
	background-color: #9370DB;
}

.event-background{
	background-color: #8FBC8F;
}

.event-background:hover{
	background-color: #556B2F;
	cursor: pointer;
}

.flower-background{
	background-color: #F0E68C;
}

.flower-background:hover{
	background-color: #DAA520;
}

.stone-background{
	background-color: #696969;
}

.stone-background:hover{
	background-color: #2F4F4F;
}

.kabbalah-background{
	background-color: #FFFF;
	border-color: #2F4F4F;
}

.kabbalah-background:hover{
	border-color: #000;
}

.observation-background{
	background-color: #FFFF;
}

.observation-background:hover{
	background-color: #FFFF;
	border-color: #2F4F4F;
}

/* Responsive design for smaller screens*/
@media (max-width: 600px) {
    .observation-panel {
        flex-direction: column;
    }

    .observation-panel-left, .observation-panel-right {
        flex: none;
        width: 100%;
    }
}

.fade-in {
    animation: fadeInAnimation 10s forwards; /* 1s is the duration */
    opacity: 0; /* Start fully transparent */
}

@keyframes fadeInAnimation {
    to {
        opacity: 1;
    }
}

.dropdown-content {
            display: none;
            position: absolute;
            background-color: #F47174;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
            z-index: 1;
            
        }
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .dropdown-content a {
            color: white;
            padding: 12px 16px;
            display: block;
            min-width: 200px; /* Ensures adequate width for longer texts */
            white-space: nowrap; /* Prevents text from wrapping */
            font-size: 1.0em;
            text-align: left;
        }
        .dropdown-content a:hover {
            background-color: #F47174;
        }

			#SUNGroup, #MOONGroup, #MERCURYGroup, #VENUSGroup, #MARSGroup, #JUPITERGroup, #SATURNGroup {
			    display: none; /* Initially hide all planet groups */
			}

			/* Flex container for the inputs and button */
			.input-container {
		    display: flex;
		    flex-wrap: wrap;
		    align-items: center;
		    justify-content: center;
		    gap: 10px; /* Adjust the spacing between items */
		}

		/* Style adjustments for smaller screens */
			@media (max-width: 600px) {
    		.input-container {
        	flex-direction: column;
        	align-items: center;
    	}

    /* Other responsive styles if needed */
}

.disclaimer {
    text-align: center;
    color: black;
    font-size: 1.2em; /* Adjust the font size as needed */
    padding: 10px;
    background-color: #f8f8f8; /* Light background to ensure visibility */
    border-radius: 8px; /* Optional: adds rounded corners */
    margin: 20px auto; /* Centers the disclaimer and provides some spacing */
    width: 80%; /* Adjust width as per your layout needs */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds subtle shadow for depth */
}

svg {
    width: 100%;
    height: auto;
    display: block; /* This can remove extra space around inline elements */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: inherit;
}

</style>