/* Basic styling for the layout */
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f4f4f4;         /* blackish #333;*/
}

header {
    background: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}

p {
    margin: 5px 0; /* Reduces spacing but keeps readability */
}

h1 {
    margin-top: 10px; /* Slight space above*/
    margin-bottom: 0; /* No space below*/
}

h2 {
    margin-top: 8px; /* Slight space above*/
    margin-bottom: 0; /* No space below*/
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.5rem; /* Add padding if not already set */
  gap: 0.5rem; /* Reduce space between items */
  flex-wrap: wrap; /* Allow wrapping if needed on small screens */
}

.header-container h1{
    font-size: 64px; /* Adjust as needed */
    color : red;
}

.title-item {    /*Topic and Utilities*/
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    display: block; /* Ensures it spans the full width */
}

.title-item a{    
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    display: block; /* Ensures it spans the full width */
}



/* AI-Story-page Adjustments */
.stories-container {
    display: flex; /* Enables side-by-side layout */
    flex-wrap: wrap; /* Forces items to wrap onto new rows */
    gap: 20px; /* Adds space between stories */
    justify-content: center; /* Centers the stories */
}

.story-container {
    flex: 1 1 calc(50% - 20px); /* Ensures two per row */
    max-width: 600px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

body.AI-Story-page {
    font-family: Arial, sans-serif;
    margin: 40px;
    background-color: #f4f4f4;
    color: #333;
}

body.AI-Story-page h1 {
    text-align: center;
}

body.AI-Story-page .highlight {
    font-weight: bold;
    color: #0044cc;
}



/* AI Introspection Adjustments */

	.category {
            font-size: 28px;
            font-weight: bold;
            margin-top: 10px;
            color: #d35400;
        }
	.sign {
            font-size: 30px;
            font-weight: bold;
            margin-top: 10px;
            margin-left: 0;
            align-items: left;

        }

        .horoscope-container {
            display: flex;
            align-items: left;
            margin-left: 0;
            max-width: 800px;
            margin: 5px auto;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }
	.sign-box {
            display: flex;
            flex-direction: column; /* Arrange Sign and Text side-by-side */
            align-items: center; /* Align items vertically */
            gap: 5px; /* Adds spacing between Sign and Text */
            font-size: 24px;
            width: 320px; /* Adjust width as needed */
	}

        .emoji {
            font-size: 30px;
            margin-top: 5px;
        }
        .description {
            flex-grow: 1;
            font-size: 18px;
            margin-left: 20px;
            align-text: center;

        }



/*
.emoji {
            font-size: 20px;
        }
.description {
            font-size: 18px;
            max-width: 600px;
            margin: 10px auto;
            text-align: left;
        }
*/


.signup-section a {
    display: inline-block;
    padding: 2px 20px; /* Button size */
    background: #444; /* Default background color */
    color: blue;
    text-decoration: none;/* Optional: Remove underline */
    font-weight: bold;
    border: 2px solid #444; /* Border matches background initially */
    border-radius: 5px; /* Slightly rounded corners */
    text-align: center;
    transition: all 0.3s ease-in-out; /* Smooth transition effect */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow effect */

}

/* Hover effect for signup buttons */
.signup-section a:hover {
    background: #555; /* Hover background color */
    border-color: white; /* Change border color on hover */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); /* Larger and darker shadow on hover */
    color: white; /* Keep the text color consistent */
}


.signup-section {
    list-style: none;
    text-align: center;
    font-weight: bold;
}




/* Navigation bar and button styling */
nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-bottom: 20px;/* Adding spacing between sections */

}

nav ul li {
    margin: 0 15px; /* Space between buttons */
    color:blue;
}

nav ul li a {
    display: inline-block;
    padding: 10px 20px; /* Button size */
    background: #444; /* Default background color */
    color: blue;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #444; /* Border matches background initially */
    border-radius: 5px; /* Slightly rounded corners */
    text-align: center;
    transition: all 0.3s ease-in-out; /* Smooth transition effect */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow effect */
}

/* Hover effect for buttons */
nav ul li a:hover {
    background: #555; /* Hover background color */
    border-color: white; /* Change border color on hover */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); /* Larger and darker shadow on hover */
    color: white; /* Keep the text color consistent */
}


/* Social media styling */
.social-icons {
    display: flex;
    align-items: center; /* Vertically centers the text and images */
    gap: 25px; /* Adds spacing between elements */
}

.social-icons img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%; /* Optional: Make the images circular */
    transition: transform 0.3s;
}

.social-icons img:hover {
    transform: scale(1.1); /* Optional: Slight zoom effect on hover */
}

.social-text {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    font-family: Arial, sans-serif;
    line-height: 30px; /* Matches icon height for better alignment */
}


div.social-icons {
	padding-top: 5px;
	padding-bottom: 5px;
}



/* Iframe styling */
iframe {
    flex-grow: 1; /* Makes the iframe take up all remaining space */

    border: 5px; /* Border*/
    border-radius: 10px; /* Rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* Adds a shadow */

    width: 100%;
}



@media (max-width: 768px) {
    body {

  height: 100%;
  margin: 0;
  padding: 0;

        flex-direction: column; /* Stack elements vertically */
	overflow-x: hidden; /* Prevent horizontal scroll */
    }

    header {
        padding: 0.3rem; /* Reduce padding */
        font-size: 0.9rem; /* Smaller header text */
    }


  .header-container h1 {
        font-size: 6vw; /* Scales with screen width */
    }

   nav ul {
        flex-direction: column; /* Stack navigation items */
        align-items: center; /* Center items */
    }

    nav ul li {
        margin: 8px 0; /* Increase spacing between links */
    }

    nav ul li a {
        padding: 6px 12px; /* Make buttons smaller */
        font-size: 0.9rem; /* Adjust text size */
    }

    iframe {
        height: 310px; /* Limit iframe height for mobile */
    }

    .social-icons {

    flex-wrap: wrap;
    padding: 5px 0;


        justify-content: center; /* Center the icons */
        gap: 5px; /* Smaller gap between icons */
    }

    .social-icons img {
        width: 20px; /* Make icons smaller */
        height: 20px;
    }
}