.periodic-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr) 10px repeat(16, 1fr); /* Use fractional units for responsiveness */
    grid-template-rows: repeat(7, auto) 10px repeat(2, auto);
    gap: 2px;
	background-color: black;
	padding: 20px;
}

.merged-cell {
    grid-column: 1 / 3; /* This will cover the first two columns */
    grid-row: 9 / 11; /* This will cover the ninth and tenth rows */
    display: flex; /* For alignment purposes, optional */
    align-items: center; /* Centers content vertically, optional */
    justify-content: center; /* Centers content horizontally, optional */
    border: 0px solid #000; /* Provides border to visualize the cell, adjust as needed */
}

.merged-cell-right {
    grid-column: 18 / 20; /* This will cover the last two columns */
    grid-row: 9 / 11; /* This will cover the ninth and tenth rows */
    display: flex; /* For alignment purposes, optional */
    align-items: center; /* Centers content vertically, optional */
    justify-content: center; /* Centers content horizontally, optional */
    border: 0px solid #000; /* Provides border to visualize the cell, adjust as needed */
}

.merged-top-row {
    grid-column: 2 / 19; /* This will cover from the 2nd to the 16th column */
    grid-row: 1; /* This targets the first row */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0px solid #000; /* Adjust styling as needed */
    /* Additional styling here if needed */
}

.merged-rows2-3 {
    grid-column: 3 / 14; /* This will cover from the 3rd to the 13th column */
    grid-row: 2 / 4; /* This will span the second and third rows */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0px solid #000; /* Adjust the styling as needed */
    /* Additional styling here if needed */
}

.element {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.6s ease;
}

.element a {
    color: inherit; /* Ensures link color matches the surrounding text or default styling */
    text-decoration: none; /* Removes underline from links */
}

.element img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.6s ease; /* Transition for transform */
    position: relative;
    z-index: 2; /* Ensure the image is above the background */
}

.element img:hover {
    transform: scale(2.0); /* Enlarge the image */
    filter: brightness(150%);
    z-index: 3;
}

.element:hover img {
    transform: scale(2.0); /* Enlarge the image on hovering over the .element */
    filter: brightness(150%);
}

.element a:focus,
.element a:active {
    outline: 2px solid #0af; /* Example focus outline */
}

/* Specific adjustments for unique positions */
#H { grid-column: 1; grid-row: 1; }
#He { grid-column: 19; grid-row: 1; }
#Li, #Be { grid-row: 2; }
#Na, #Mg { grid-row: 3; }
#K, #Ca { grid-row: 4; }
#Rb, #Sr { grid-row: 5; }
#Cs, #Ba { grid-row: 6; }
#Fr, #Ra { grid-row: 7; }

#B, #C, #N, #O, #F, #Ne { grid-row: 2; }
#B { grid-column: 14; }
#C { grid-column: 15; }
#N { grid-column: 16; }
#O { grid-column: 17; }
#F { grid-column: 18; }
#Ne { grid-column: 19; }

#Al, #Si, #P, #S, #Cl, #Ar { grid-row: 3; }
#Al { grid-column: 14; }
#Si { grid-column: 15; }
#P { grid-column: 16; }
#S { grid-column: 17; }
#Cl { grid-column: 18; }
#Ar { grid-column: 19; }

#Sc, #Ti, #V, #Cr, #Mn, #Fe, #Co, #Ni, #Cu, #Zn, #Ga, #Ge, #As, #Se, #Br, #Kr { grid-row: 4; }
#Sc { grid-column: 4; }
#Ti { grid-column: 5; }
#V { grid-column: 6; }
#Cr { grid-column: 7; }
#Mn { grid-column: 8; }
#Fe { grid-column: 9; }
#Co { grid-column: 10; }
#Ni { grid-column: 11; }
#Cu { grid-column: 12; }
#Zn { grid-column: 13; }
#Ga { grid-column: 14; }
#Ge { grid-column: 15; }
#As { grid-column: 16; }
#Se { grid-column: 17; }
#Br { grid-column: 18; }
#Kr { grid-column: 19; }

#Y, #Zr, #Nb, #Mo, #Tc, #Ru, #Rh, #Pd, #Ag, #Cd, #In, #Sn, #Sb, #Te, #I, #Xe { grid-row: 5; }
#Y { grid-column: 4; }
#Zr { grid-column: 5; }
#Nb { grid-column: 6; }
#Mo { grid-column: 7; }
#Tc { grid-column: 8; }
#Ru { grid-column: 9; }
#Rh { grid-column: 10; }
#Pd { grid-column: 11; }
#Ag { grid-column: 12; }
#Cd { grid-column: 13; }
#In { grid-column: 14; }
#Sn { grid-column: 15; }
#Sb { grid-column: 16; }
#Te { grid-column: 17; }
#I { grid-column: 18; }
#Xe { grid-column: 19; }

#La, #Hf, #Ta, #W, #Re, #Os, #Ir, #Pt, #Au, #Hg, #Tl, #Pb, #Bi, #Po, #At, #Rn { grid-row: 6; }
#La { grid-column: 4; }
#Hf { grid-column: 5; }
#Ta { grid-column: 6; }
#W { grid-column: 7; }
#Re { grid-column: 8; }
#Os { grid-column: 9; }
#Ir { grid-column: 10; }
#Pt { grid-column: 11; }
#Au { grid-column: 12; }
#Hg { grid-column: 13; }
#Tl { grid-column: 14; }
#Pb { grid-column: 15; }
#Bi { grid-column: 16; }
#Po { grid-column: 17; }
#At { grid-column: 18; }
#Rn { grid-column: 19; }

#Ac, #Rf, #Db, #Sg, #Bh, #Hs, #Mt, #Ds, #Rg, #Cn, #Nh, #Fl, #Mc, #Lv, #Ts, #Og { grid-row: 7; }
#Ac { grid-column: 4; }
#Rf { grid-column: 5; }
#Db { grid-column: 6; }
#Sg { grid-column: 7; }
#Bh { grid-column: 8; }
#Hs { grid-column: 9; }
#Mt { grid-column: 10; }
#Ds { grid-column: 11; }
#Rg { grid-column: 12; }
#Cn { grid-column: 13; }
#Nh { grid-column: 14; }
#Fl { grid-column: 15; }
#Mc { grid-column: 16; }
#Lv { grid-column: 17; }
#Ts { grid-column: 18; }
#Og { grid-column: 19; }

#Ce, #Pr, #Nd, #Pm, #Sm, #Eu, #Gd, #Tb, #Dy, #Ho, #Er, #Tm, #Yb, #Lu { grid-row: 9; }
#Ce { grid-column: 4; }
#Pr { grid-column: 5; }
#Nd { grid-column: 6; }
#Pm { grid-column: 7; }
#Sm { grid-column: 8; }
#Eu { grid-column: 9; }
#Gd { grid-column: 10; }
#Tb { grid-column: 11; }
#Dy { grid-column: 12; }
#Ho { grid-column: 13; }
#Er { grid-column: 14; }
#Tm { grid-column: 15; }
#Yb { grid-column: 16; }
#Lu { grid-column: 17; }

#Th, #Pa, #U, #Np, #Pu, #Am, #Cm, #Bk, #Cf, #Es, #Fm, #Md, #No, #Lr { grid-row: 10; }
#Th { grid-column: 4; }
#Pa { grid-column: 5; }
#U { grid-column: 6; }
#Np { grid-column: 7; }
#Pu { grid-column: 8; }
#Am { grid-column: 9; }
#Cm { grid-column: 10; }
#Bk { grid-column: 11; }
#Cf { grid-column: 12; }
#Es { grid-column: 13; }
#Fm { grid-column: 14; }
#Md { grid-column: 15; }
#No { grid-column: 16; }
#Lr { grid-column: 17; }

.placeholder {
    grid-column: 1 / -1; /* This will span the placeholder across all columns */
    background-color: transparent; /* Assuming you want this placeholder to be invisible; change as needed */
    height: 20px; /* Adjust the height as needed */
    border: none; /* No border for the placeholder */
}

/* Example styles for Lanthanides and Actinides */
#lanthanides-placeholder, #actinides-placeholder {
    font-weight: bold;
    grid-column: 1 / -1; /* Span across all columns */
}

/* New table container beneath the periodic table */
.periodic-group {
    display: grid;
    grid-template-columns: repeat(5, 19.9%); /* 5 columns, each taking up 20% of the container's width */
    gap: 2px; /* Space between cells, adjust as needed */
    margin-top: 0px; /* Space between the periodic table and the new table */
    background-color: black; /* Sets the background of the entire group to black */
}

.periodic-group .cell {
    display: flex;
    flex-direction: column; /* Adjust direction to column */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    width: 100%;
    background-color: black;
    color: white;
    border: 2px solid; /* Initial border color, will be set per cell */
    border-radius: 08px;
    position: relative;
    overflow: hidden; /* Ensures the pseudo-element doesn't extend the cell */
}

.periodic-group .circle-container::before {
    content: '⚛'; /* Default placeholder, adjust per item */
    font-size: 20px; /* Adjust size as needed */
    line-height: 20px; /* Adjust line height to vertically center the icon */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.periodic-group .cell-content {
    display: flex;
    position: absolute;
    width: 100%;
    align-items: center; /* Center content vertically */
    justify-content: space-between; /* Space between the circle and text */
    padding: 0 10px; /* Adjust spacing as necessary */
}

.periodic-group .mGridContent a {
    color: white; /* Sets the default link color to white */
    text-decoration: none; /* Optional: Removes underline from links */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

.periodic-group .mGridContent a:hover {
    color: #0af; /* Changes link color to a bright blue on hover */
    /* 'Illumination blue' is not a standard color name. Adjust the hex code (#0af) to match the desired shade of blue. */
}

.circle-container {
    width: 1px;
    height: 20px;
    border-radius: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-container::before {
    content: '';
    display: block;
    width: 20px; /* Circle size */
    height: 20px; /* Circle size, making it a circle */
    border-radius: 50%; /* This makes the div a circle */
    /* Default circle color, will be overridden */
}

.mGridContent {
    flex-basis: 85%; /* Remaining space for the content */
}

.cell .circle-container {
    width: 15%;
    position: relative; /* For the circle positioning */
    display: flex;
    align-items: center; /* Center the circle vertically */
    justify-content: center; /* Center the circle horizontally */
}

.cell .circle-container::before {
    content: '';
    display: block;
    width: 30px; /* Circle size */
    height: 20px; /* Circle size, making it a circle */
    border-radius: 70%; /* This makes the div a circle */
    background-color: #000; /* Default circle color, will be overridden */
}

.cell .content {
    width: 85%;
    padding-left: 10px; /* Spacing from the circle to the text */
}

/* Unique colors for each circle */
.cell:nth-child(1) .circle-container {background-color: #4affb7; }
.periodic-group .cell:nth-child(1) {border-color: #4affb7; }
.cell:nth-child(2) .circle-container {background-color: #fe594f; }
.periodic-group .cell:nth-child(2) {border-color: #fe594f; }
.cell:nth-child(3) .circle-container {background-color: #9c63ff; }
.periodic-group .cell:nth-child(3) {border-color: #9c63ff; }
.cell:nth-child(4) .circle-container {background-color: #fec969; }
.periodic-group .cell:nth-child(4) {border-color: #fec969; }
.cell:nth-child(5) .circle-container {background-color: #4034c7; }
.periodic-group .cell:nth-child(5) {border-color: #4034c7; }
.cell:nth-child(6) .circle-container {background-color: #77ff57; }
.periodic-group .cell:nth-child(6) {border-color: #77ff57; }
.cell:nth-child(7) .circle-container {background-color: #b2233c; }
.periodic-group .cell:nth-child(7) {border-color: #b2233c; }
.cell:nth-child(8) .circle-container {background-color: #666583; }
.periodic-group .cell:nth-child(8) {border-color: #666583; }
.cell:nth-child(9) .circle-container {background-color: #fe9b76; }
.periodic-group .cell:nth-child(9) {border-color: #fe9b76; }
.cell:nth-child(10) .circle-container {background-color: #707070; }
.periodic-group .cell:nth-child(10) {border-color: #707070; }

.periodic-group .cell:nth-child(1) .circle-container::before { content: '🔋'; } /* Alkali Metals - Battery */
.periodic-group .cell:nth-child(2) .circle-container::before { content: '🌍'; } /* Alkaline Earth Metals - Globe */
.periodic-group .cell:nth-child(3) .circle-container::before { content: '⚙️'; } /* Transition Metals - Gear */
.periodic-group .cell:nth-child(4) .circle-container::before { content: '🖥️'; } /* Metalloids - Computer */
.periodic-group .cell:nth-child(5) .circle-container::before { content: '🧪'; } /* Halogens - Test Tube */
.periodic-group .cell:nth-child(6) .circle-container::before { content: '💨'; } /* Noble Gases - Dash Symbol */
.periodic-group .cell:nth-child(7) .circle-container::before { content: '🔦'; } /* Lanthanides - Flashlight */
.periodic-group .cell:nth-child(8) .circle-container::before { content: '☢️'; } /* Actinides - Radioactive */
.periodic-group .cell:nth-child(9) .circle-container::before { content: '🔩'; } /* Post-transition Metals - Bolt */
.periodic-group .cell:nth-child(10) .circle-container::before { content: '❓'; } /* Unknown Properties - Question Mark */

@media (max-width: 768px) {
    .periodic-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr) 10px repeat(7, 1fr); /* Adjusts columns: 2 flexible columns, a 10px column, then 7 flexible columns */
    grid-template-rows: repeat(2, auto) 10px repeat(16, auto); /* Adjusts rows: 2 rows based on content size, a 10px row, then 16 rows based on content size */
    }

#Fr { grid-row: 1; grid-column: 4}
#Cs { grid-row: 1; grid-column: 5}
#Rb { grid-row: 1; grid-column: 6}
#K { grid-row: 1; grid-column: 7}
#Na { grid-row: 1; grid-column: 8}
#Li { grid-row: 1; grid-column: 9}
#H { grid-row: 1; grid-column: 10}

#Ra { grid-row: 2; grid-column: 4}
#Ba { grid-row: 2; grid-column: 5}
#Sr { grid-row: 2; grid-column: 6}
#Ca { grid-row: 2; grid-column: 7}
#Mg { grid-row: 2; grid-column: 8}
#Be { grid-row: 2; grid-column: 9}

#Th { grid-row: 4; grid-column: 1}
#Ce { grid-row: 4; grid-column: 2}
#Ac { grid-row: 4; grid-column: 4}
#La { grid-row: 4; grid-column: 5}
#Y { grid-row: 4; grid-column: 6}
#Sc { grid-row: 4; grid-column: 7}

#Pa { grid-row: 5; grid-column: 1}
#Pr { grid-row: 5; grid-column: 2}
#Rf { grid-row: 5; grid-column: 4}
#Hf { grid-row: 5; grid-column: 5}
#Zr { grid-row: 5; grid-column: 6}
#Ti { grid-row: 5; grid-column: 7}

#U { grid-row: 6; grid-column: 1}
#Nd { grid-row: 6; grid-column: 2}
#Db { grid-row: 6; grid-column: 4}
#Ta { grid-row: 6; grid-column: 5}
#Nb { grid-row: 6; grid-column: 6}
#V { grid-row: 6; grid-column: 7}

#Np { grid-row: 7; grid-column: 1}
#Pm { grid-row: 7; grid-column: 2}
#Sg { grid-row: 7; grid-column: 4}
#W { grid-row: 7; grid-column: 5}
#Mo { grid-row: 7; grid-column: 6}
#Cr { grid-row: 7; grid-column: 7}

#Pu { grid-row: 8; grid-column: 1}
#Sm { grid-row: 8; grid-column: 2}
#Bh { grid-row: 8; grid-column: 4}
#Re { grid-row: 8; grid-column: 5}
#Tc { grid-row: 8; grid-column: 6}
#Mn { grid-row: 8; grid-column: 7}

#Am { grid-row: 9; grid-column: 1}
#Eu { grid-row: 9; grid-column: 2}
#Hs { grid-row: 9; grid-column: 4}
#Os { grid-row: 9; grid-column: 5}
#Ru { grid-row: 9; grid-column: 6}
#Fe { grid-row: 9; grid-column: 7}

#Cm { grid-row: 10; grid-column: 1}
#Gd { grid-row: 10; grid-column: 2}
#Mt { grid-row: 10; grid-column: 4}
#Ir { grid-row: 10; grid-column: 5}
#Rh { grid-row: 10; grid-column: 6}
#Co { grid-row: 10; grid-column: 7}

#Bk { grid-row: 11; grid-column: 1}
#Tb { grid-row: 11; grid-column: 2}
#Ds { grid-row: 11; grid-column: 4}
#Pt { grid-row: 11; grid-column: 5}
#Pd { grid-row: 11; grid-column: 6}
#Ni { grid-row: 11; grid-column: 7}

#Cf { grid-row: 12; grid-column: 1}
#Dy { grid-row: 12; grid-column: 2}
#Rg { grid-row: 12; grid-column: 4}
#Au { grid-row: 12; grid-column: 5}
#Ag { grid-row: 12; grid-column: 6}
#Cu { grid-row: 12; grid-column: 7}

#Es { grid-row: 13; grid-column: 1}
#Ho { grid-row: 13; grid-column: 2}
#Cn { grid-row: 13; grid-column: 4}
#Hg { grid-row: 13; grid-column: 5}
#Cd { grid-row: 13; grid-column: 6}
#Zn { grid-row: 13; grid-column: 7}

#Fm { grid-row: 14; grid-column: 1}
#Er { grid-row: 14; grid-column: 2}
#Nh { grid-row: 14; grid-column: 4}
#Tl { grid-row: 14; grid-column: 5}
#In { grid-row: 14; grid-column: 6}
#Ga { grid-row: 14; grid-column: 7}
#Al { grid-row: 14; grid-column: 8}
#B { grid-row: 14; grid-column: 9}

#Md { grid-row: 15; grid-column: 1}
#Tm { grid-row: 15; grid-column: 2}
#Fl { grid-row: 15; grid-column: 4}
#Pb { grid-row: 15; grid-column: 5}
#Sn { grid-row: 15; grid-column: 6}
#Ge { grid-row: 15; grid-column: 7}
#Si { grid-row: 15; grid-column: 8}
#C { grid-row: 15; grid-column: 9}

#No { grid-row: 16; grid-column: 1}
#Yb { grid-row: 16; grid-column: 2}
#Mc { grid-row: 16; grid-column: 4}
#Bi { grid-row: 16; grid-column: 5}
#Sb { grid-row: 16; grid-column: 6}
#As { grid-row: 16; grid-column: 7}
#P { grid-row: 16; grid-column: 8}
#N { grid-row: 16; grid-column: 9}

#Lr { grid-row: 17; grid-column: 1}
#Lu { grid-row: 17; grid-column: 2}
#Lv { grid-row: 17; grid-column: 4}
#Po { grid-row: 17; grid-column: 5}
#Te { grid-row: 17; grid-column: 6}
#Se { grid-row: 17; grid-column: 7}
#S { grid-row: 17; grid-column: 8}
#O { grid-row: 17; grid-column: 9}

#Ts { grid-row: 18; grid-column: 4}
#At { grid-row: 18; grid-column: 5}
#I { grid-row: 18; grid-column: 6}
#Br { grid-row: 18; grid-column: 7}
#Cl { grid-row: 18; grid-column: 8}
#F { grid-row: 18; grid-column: 9}

#Og { grid-row: 19; grid-column: 4}
#Rn { grid-row: 19; grid-column: 5}
#Xe { grid-row: 19; grid-column: 6}
#Kr { grid-row: 19; grid-column: 7}
#Ar { grid-row: 19; grid-column: 8}
#Ne { grid-row: 19; grid-column: 9}
#He { grid-row: 19; grid-column: 10}
    .element img {
        max-width: 100%; /* Ensures images are not wider than their containers */
        height: auto; /* Keeps the image aspect ratio intact */
    }
	
	.merged-cell, .merged-cell-right, .merged-top-row, .merged-rows2-3 {
        /* Adjust these merged cells as necessary for the new layout */
        /* Example: */
        display: none; /* Hide or reposition merged cells if they don't fit the new layout */
    }
	
	.placeholder {
        grid-column: 1 / -1; /* Span across all columns */
        background-color: transparent;
        height: 20px;
        border: none;
    }
	
	/* Responsive adjustments for the new table */
    .periodic-group {
        grid-template-columns: repeat(2, 1fr); /* Adjust to 2 columns on smaller screens */
    }
    .periodic-group .cell:before {
        padding-top: 30%; /* Adjust the aspect ratio for a different layout */
    }
	
	.periodic-group {
        grid-template-columns: repeat(2, 1fr); /* Adjust to 2 columns on smaller screens */
    }
}

             /*--------Non Metal Grid--------*/
.non-element-group {
    display: grid;
    grid-template-columns: repeat(4, 24.4%);
    gap: 10px;
    padding: 20px;
	background-color: #000;
}

.non-element-group .cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black; /* Cell background color */
    color: white; /* Text color for better contrast */
    border: 2px solid #ffffff; /* Example border color, adjust as needed */
    border-radius: 8px; /* Rounded corners for the cells */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5); /* Optional: Adds shadow for depth */
    transition: transform 0.3s ease; /* Smooth transition for any hover effects */
}

/* Use Unicode characters as placeholders for icons */
.non-element-group .circle-container::before {
    content: '♻'; /* Default placeholder, adjust per item */
    font-size: 20px; /* Adjust size as needed */
    line-height: 20px; /* Adjust line height to vertically center the icon */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.non-element-group .mGridContent a {
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
	transition: color 0.3s ease;
}

.non-element-group .mGridContent a:hover {
    color: #0af; /* Changes link color on hover */
}

.non-element-group .cell:hover {
    transform: scale(1.05);
}

.non-element-group .cell {
    /* Common styles for cells */
    background-color: black;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Adjust the content property for each material to reflect a relevant symbol or icon */
.non-element-group .cell:nth-child(1) .circle-container::before { content: '♻'; } /* Plastics - Recycling symbol */
.non-element-group .cell:nth-child(2) .circle-container::before { content: '🔍'; } /* Glass - Magnifying glass */
.non-element-group .cell:nth-child(3) .circle-container::before { content: '🏺'; } /* Ceramics - Pottery vase */
.non-element-group .cell:nth-child(4) .circle-container::before { content: '⚫'; } /* Rubber - Black circle */
.non-element-group .cell:nth-child(5) .circle-container::before { content: '🌲'; } /* Wood - Tree */
.non-element-group .cell:nth-child(6) .circle-container::before { content: '🔩'; } /* Composites - Bolt */