/* 1. THE GRID CONTAINER */
.grid-container {
    /* --- 1. Grid Activation and Definition --- */
    display: grid; 
    
    /* --- 2. Dynamic Column Definition (The magic!) --- */
    /* This creates a fluid, responsive number of columns: */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 

    /* Explanation: 
       - repeat(auto-fit, ...) tells the browser to create as many columns as possible.
       - minmax(250px, 1fr) ensures each column is at least 250px wide, but can stretch 
         up to 1 fraction (1fr) of the available space. When the screen shrinks 
         and a column can no longer maintain 250px, it wraps to the next line.
    */
    
    /* --- 3. Spacing --- */
    gap: 20px;          /* Space between the grid items (both rows and columns) */
    padding: 10px;      /* Space around the outside of the whole grid */
	padding-left: 200px;
}

/* 2. THE INDIVIDUAL CELL DIV */
.celica {
    /* --- 1. Visual Styling --- */
    border: 1px solid #ddd; /* Light border around each cell */
    border-radius: 8px;     /* Rounded corners for a modern look */
    padding: 5px;          /* Space inside the cell, between border and content */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */

    /* --- 2. Inner Content Alignment --- */
    display: flex;         /* Activates Flexbox inside the cell */
    flex-direction: column; /* Stacks all child elements vertically (checkbox, img, p) */
    align-items: center;    /* Centers all child elements (image, text) horizontally */
    text-align: center;     /* Ensures any block-level text is centered */
}


.simbol {	/* PNG slika simbola v mreži */
    height: 50px;
    width: auto; 
    margin-top: 10px; 
    display: block; 
}

.ime_simbola {
    /* --- Font & Text Properties --- */
    font-family: 'Georgia', serif; /* Use a distinguished serif font */
    font-size: 1.0em;              /* Larger text size (1.5 times the base font size) */
    color: #ff0000;                /* Dark gray color */
    font-weight: bold;             /* Make the text bold */
    text-transform: uppercase;     /* Convert text to all uppercase */

    /* --- Spacing (Margin) --- */
    /* Use margin to separate it from the image above and the meaning below */
    margin-top: 10px;              /* Space above (optional, but good if image margin ends) */
    margin-bottom: 5px;            /* Small space below to tuck the meaning close */
    
    /* Remove padding if present, as it's not needed for a standard paragraph */
    padding: 0;
}

.pomen {
    /* --- Font & Text Properties --- */
    font-family: 'Verdana', sans-serif; /* Clean, highly readable font */
    font-size: 0.9em;                     /* Standard size */
    color: #555555;                     /* A bright color to make the list stand out */
    font-weight: 800;                   /* Semi-bold (if font supports it) or use 'bold' */
    line-height: 1.4;                   /* Increase line spacing for better readability */

    /* --- Spacing (Margin) --- */
    margin-top: 1px;                   /* Space above the list */
    margin-bottom: 0;                   /* No space below */
    padding-top: 0px;                     /* Add a small vertical padding */ padding-bottom: 7px;
}

.lastnost {
    /* --- Font & Text Properties --- */
    font-family: 'Arial', sans-serif; /* Use a clean sans-serif font */
    font-size: 0.9em;                 /* Slightly smaller than the base size */
    color: #666666;                   /* Medium gray color */
    font-style: italic;               /* Make the text italic for emphasis */
    font-weight: normal;              /* Ensure it is not bold */

    /* --- Spacing (Margin) --- */
    margin-top: 0;                    /* No space above (to keep it close to the title) */
    margin-bottom: 15px;              /* More space below to separate it from the list of properties */
    padding: 0;
}

.naslov_bloka {
	font-family: "Droid Serif", serif;
	width: 100%;
	height: 20px;
	font-size: 24px;
    color: #000000; 
    font-weight: 400;
	Letter-Spacing: 2px;
	display: flex;
	padding-top: 0px;       /* Control the top distance here */
    box-sizing: border-box;  /* Ensures the 20px doesn't add to the 100px height */
}