/* General Colors */
    body { 
     		background: linear-gradient(-135deg, rgba(141, 164, 178, 0.20) 20%, transparent), repeating-linear-gradient(45deg, rgba(141, 164, 178, 1.00) 0%, rgba(141, 164, 178, 0.60) 10%, transparent 10%, transparent 20%), repeating-linear-gradient(-45deg, rgba(141, 164, 178, 0.40) 0%, rgba(0, 0, 0, 0.50) 10%, transparent 10%, transparent 20%); background-color: rgba(141, 164, 178, 0.25);; 
     			background-color: #8da4b2;	
        color: #303030; 
        min-height: 100vh;
		background-attachment: fixed; /* This keeps the gradient fixed during scrolling */
		background-repeat: no-repeat; /* Prevent the background from repeating */
		min-height: 100%; /* Ensure the body is at least as tall as the viewport */
		height: 100%; /* Full height of the page */
		transition: background 2s ease; /* Smooth transition for background */

    }
    a, a:active { 
        color: #000000; 
    }
    a:hover { 
        color: #8da4b2; 
    }
    h1, h2, h3, h4, h5, h6 { 
        color: #101d2d; 
    }

    /* Header Styles */
    header { 
        background-color: #101d2d; 
        color: #8da4b2; 
    }
    
    .header-top-area, .add-html {
        background: linear-gradient(to right, transparent, rgba(230, 230, 230, 0.40), transparent);
    }
    
   .footer-top-area {
        background: linear-gradient(to right, transparent, rgba(127, 148, 160, 0.40), transparent);
    }
    
    .image-grid-item, .image-overlay {
        background: linear-gradient(to right, transparent, rgba(127, 148, 160, 0.70), transparent);
    }
    
    .header-title h1, .header-title h1 a, .header-title h1 a:hover, .header-title h1 a:visited {
		text-shadow: 2px 2px 4px rgba(204, 204, 204, 0.70);
		color: #ffffff;
	}
    
    header {
    border-bottom: 1px solid rgba(230, 230, 230, 0.40);
	}
    
    header p { 
        color: #8da4b2; 
    }
    header a { 
        color: #e8e8e8; 
    }
    header a:hover { 
        color: #8da4b2; 
    }
    
    header h1, header h2, header h3, header h4, header h5, header h6 { 
        color: #8da4b2; 
    }

    /* Footer Styles */
    footer { 
        background-color: #101d2d; 
        color: #8da4b2; 
         border-top: 1px solid rgba(127, 148, 160, 0.40);
    }
    footer p, footer span, footer a, footer li { 
        color: #8da4b2; 
    }
    footer a { 
        color: #e8e8e8; 
    }
    footer a:hover { 
        color: #8da4b2; 
    }
    
    .button-block {
    background-color: #101d2d;
    color: #ffffff; 
    border-radius: 0.6rem;
    }

    /* Block Styles */
    
    
		main .page-container {gap: 30px}
		main .page-container section {
		    width: 100%;
			max-width: 1070px;
			min-width: 320px;  /* Minimum width for very small screens */
			margin: 0 auto;
		}
		
		
		.page-container section:first-of-type {
			margin-top: 30px;  
		}
		
		.page-container section:last-of-type {
			margin-bottom: 30px;  
		}
		
		@media (max-width: 768px) {
		.page-container {padding: 0px 12px}
		
		 main .page-container {gap: 12px}
		 
		 .page-container section:first-of-type {
			margin-top: 12px;  
		}
		
		.page-container section:last-of-type {
			margin-bottom: 12px;  
		}
		
		}
		
		
		
        
		section {
		box-shadow: rgba(213, 213, 203, 0.17) 0px -23px 25px 0px inset, rgba(213, 213, 203, 0.17) 0px -36px 30px 0px inset, rgba(213, 213, 203, 0.10) 0px -79px 40px 0px inset, rgba(213, 213, 203, 0.06) 0px 2px 1px, rgba(213, 213, 203, 0.09) 0px 4px 2px, rgba(213, 213, 203, 0.09) 0px 8px 4px, rgba(213, 213, 203, 0.09) 0px 16px 8px, rgba(213, 213, 203, 0.09) 0px 32px 16px;;
		background-color: #edede1; 
		}
		
		
    
    
    section, .nice-image-wrapper { 
		border-radius: 0.5rem;
		text-align: left;
    }
    
    /* Typography Styles */
    body {
        font-family: 'Montserrat', sans-serif;
        font-size: 18px;
        line-height: 1.6;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Oswald', sans-serif;
        text-align:center;
    }
    
   h1 {
        font-size: 240%;
        line-height: 180%;
    }
    
    h2 {
        font-size: 180%;
        line-height: 180%;
    }
    
    h3 {
        font-size: 140.4%;
        line-height: 180%;
    }
    
    h4 {
        font-size: 120%;
        line-height: 180%;
    }
    
    h5 {
        font-size: 99.6%;
        line-height: 180%;
    }
    
    h6 {
        font-size: 80.4%;
        line-height: 180%;
    }
    
   .page-container section .inner, .header-container, .footer-container {
    width: 100%;
    max-width: 1070px;
    min-width: 320px;  /* Minimum width for very small screens */
    margin: 0 auto;
    }
    
    
    /* grid */
    .image-grid-item {
            flex: 1 1 20%;
    }
    
   
     .image-grid-menu  {
     gap: 20px;
     }   
     
     
     .nice-image-logo {
     background-image: url(https://www.sammlungen-verkaufen.de/wp-content/uploads/2025/04/partnership-symbol.png);

                
     }
     
     section.top-image {
     box-shadow: none;
     }
     
     section.top-image img {
     box-shadow: rgba(213, 213, 203, 0.17) 0px -23px 25px 0px inset, rgba(213, 213, 203, 0.17) 0px -36px 30px 0px inset, rgba(213, 213, 203, 0.10) 0px -79px 40px 0px inset, rgba(213, 213, 203, 0.06) 0px 2px 1px, rgba(213, 213, 203, 0.09) 0px 4px 2px, rgba(213, 213, 203, 0.09) 0px 8px 4px, rgba(213, 213, 203, 0.09) 0px 16px 8px, rgba(213, 213, 203, 0.09) 0px 32px 16px;;
     border-radius: 0.5rem;
     }
     
     .nice-image-alt-text h3, .image-grid-item h3, section.top-image h2.page-heading {
     color: #ffffff;
     text-shadow: 2px 2px 4px rgba(204, 204, 204, 0.70);
     }
     
     .nice-image-wrapper {
     background-color: #101d2d;
	}
     

    /* Mobile Typography */
    @media (max-width: 768px) {
        body {
            font-size: 15px;
            line-height: 1.7;
        }
         
    
   h1 {
        font-size: 200%;
        line-height: 180%;
    }
    
    h2 {
        font-size: 150%;
        line-height: 135%;
    }
    
    h3 {
        font-size: 117%;
        line-height: 105.3%;
    }
    
    h4 {
        font-size: 100%;
        line-height: 90%;
    }
    
    h5 {
        font-size: 83%;
        line-height: 74.7%;
    }
    
    h6 {
        font-size: 67%;
        line-height: 60.3%;
    }
    
  
        
     
			main .page-container section {width: 100%; }
		   
     
     
     
    
    } /* eol mobile */
    
    
/* Make it responsive: When screen width is small, adjust to 2 or 1 column */
@media (max-width: 768px) {
    .image-grid-item {
        flex: 1 1 50%; /* Two items per row */
    }
}

@media (max-width: 480px) {
    .image-grid-item {
        flex: 1 1 100%; /* One item per row */
    }
}