/* .container-top {
    flex: 1; /* Allow the container to grow and fill available space */
    /* display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/code/picture/topics/backgroundtopic.jpg');
    margin-top: 60px; Adjust based on the height of the fixed navbar 
} */

/* .container-top {
    flex: 1; /* Allow the container to grow and fill available space */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* margin-top: 60px; Adjust based on the height of the fixed navbar 
} */
/* .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack main title above topics 
    height: 100vh; /* Full viewport height 
} */

body{
    background-image: url('/code/picture/topics/backgroundtopic.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
}

.container-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Two columns */
    gap: 3px; /* Space between rectangles */
    justify-content: center; /* Horizontally center the grid items */
    align-items: center; /* Vertically center the grid items */
    margin-top: 60px;
    margin-bottom: 60px;
    width: 100%; /* Container width */
    height: 90vh; /* Full viewport height */
}

.rectangle {
    text-decoration: none;
    position: relative;
    /* background-color: 053764; /* Rectangle color */
    border-radius: 10px; /* Rounded corners */
    margin: 20px auto; /* Center each rectangle horizontally */
    overflow: hidden; /* Hide overflow for image */
    box-shadow: 0 10px 20px rgba(7, 7, 7, 2); /* Shadow for depth */
    transition: transform 0.3s; /* Smooth zoom effect */
    width: 280px; /* Adjust width as needed */
    height: 270px; /* Adjust height as needed */
}

.rectangle:hover {
    text-decoration: none;
    transform: scale(1.03); /* Zoom in on hover */
}

.rectangle img {
    text-decoration: none;
    width: 100%; /* Full width of rectangle */
    height: 180px; /* Fixed height for images */
    object-fit: cover; /* Cover the rectangle */
}

.rectangle h2 {
    text-decoration: none; /* Ensure no underline on h2 */
    text-align: center; /* Center title */
    padding: 10px; /* Padding for title */
    font-size: 15px; /* Title size */
    color: #9c9b9b; /* Title color */
    margin: 0; /* Remove default margin */
}