@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Poppins:wght@400;600&display=swap');

body {
    background-color: ivory;
    background-image: url('/assets/images/impression 1.jpg'); /* Assuming /assets resolves to public */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed; /* Optional: keeps background fixed during scroll */
    backdrop-filter: blur(5px); /* эффект размытия */

    font-family: PlayfairDisplay;
    /*font-family: 'Inter','Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
    /* font-style: italic;   'Verdana', 'Inter', 'Poppins',*/
    font-size: 32px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* Ensure body takes full height */
}

h1 {
    color:  gold;/*#5C4033; !* Dark brown *!*/
    margin-top: 90px;
    margin-bottom: 10px;
    /*font-family: PlayfairDisplay;*/
}

.content {
    flex-grow: 1; /* Allow content to grow */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/*
.castle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1; !* Allow container to take available space *!
    width: 80%; !* Limit SVG width *!
    max-width: 600px; !* Max width for SVG container *!
}
*/

/*
#castle-svg {
    width: 100%;
    height: auto; !* Maintain aspect ratio *!
}

.hexagon {
    cursor: pointer;
    transition:  filter 0.1s ease-in-out;   !*transform 0.1s ease-in-out,*!
    !*box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.5);*!
}
*/

/*
.hexagon:hover {
   !* Optional: add subtle hover effect, e.g., slightly change filter or scale *!
   !* filter: brightness(1.1); *!
    transform: translateY(5px);
    box-shadow: inset 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}
*/

.hexagon-pressed {
    /*transform-origin: center; */
   /*transform: scale(0.95);*/ /* Effect of being pressed*/
/*     Adjust filter slightly to enhance the pressed effect*/
    filter: url(#emboss) brightness(0.9);
}
/*
.hexagon-pressed {
   !* transform: translateY(5px);*!
    box-shadow: inset 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}
*/



/* Styling for section pages (optional, basic) */
.section-content {
    padding: 20px;
    text-align: center;
}

/*#star-button-container {
    position: absolute; !* or fixed, depending on desired scroll behavior *!
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; !* Adjust as needed *!
    height: 100px; !* Adjust as needed *!
    background-image: url('/assets/images/dreamcompas.jpg');
    background-size: contain; !* Or cover, depending on how you want the image to fit *!
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
    z-index: 10; !* Ensure it's above the background image *!
}*/