.index_body {
    align-content: center;
}
.index_grid {
    display: grid;
    gap: 1rem;
    grid-template-areas: 
    'b5 b5 b5'
    'b1 b1 b2'
    'b3 b4 b2';

    grid-template-columns: repeat(3, 18rem);
    grid-template-rows: repeat(3, 18rem);

    margin: 5rem auto;
}

@media (max-width: 60em) {
    .index_grid {
        grid-template-areas: 
        'b5 b5'
        'b1 b2'
        'b3 b4';

        grid-template-columns: repeat(2, 15rem);
        grid-template-rows: repeat(3, 15rem);
        
        width: 31rem;
        margin: 1rem auto;
    }
}

@media (max-width: 30em) {

    .index_grid {
        grid-template-areas: 
        'b5' 'b1' 'b2' 'b3' 'b4';
        grid-template-columns: auto;
        grid-template-rows: auto;
        
        width: 90%;
    }
}


/* index grid elements */

.index_grid_element {
    text-shadow: 0 0 1rem black;
    color: var(--text-light-color);
    box-shadow: 0 0 .5rem .2rem var(--shadow-color);
    background-color: var(--bg-dark-color);
    background-position: center;
    background-repeat: no-repeat;

    border-radius: .2rem;

    transition-property: background-color;
    transition-duration: .5;
    transition-timing-function: ease-in-out;
}


.index_grid_element h2 {
    text-align: center;
    margin-top: 7.5rem;
}

#index_grid_pong {
    grid-area: b1;

    background-image: url("/images/Pong.PNG");
    background-size: 37rem;
    /* background-position: cover; */
}

#index_grid_creations {
    grid-area: b2;

    background-image: url("/images/codebg.png");
    background-size: 23rem;
}
#index_grid_creations h2 {
    text-align: center;
    margin-top: 17rem;
}

#index_grid_github {
    grid-area: b3;

    background-image: url("/images/github.png");
    background-size: 18rem;
}

#index_grid_abme {
    grid-area: b4;

    background-image: url("/images/Artistic_portrait.jpeg");
    background-size: 18rem;
}

#index_grid_simulator {
    grid-area: b5;
    background-image: url("/images/BMW_Serie_5_X.png");
    background-size: 18rem;
    background-position: 5%;

    transition-property: background-position;
    transition-duration: .5s;
}

#index_grid_simulator:hover {
    background-position: 97%;
}

@media (max-width:60rem) {

    .index_grid_element h2, #index_grid_element_2 h2 {
        margin-top: 6rem;
    }

    #index_grid_element_1 {
        background-size: 100%;
    }
    
    #index_grid_element_2 {
        background-size: 100%;
    }
    
    #index_grid_element_3 {
        background-size: 100%;
    }
    
    #index_grid_element_4 {
        background-size: 100%;
    }
}

@media (max-width:30rem) {

    .index_grid_element h2, #index_grid_element_2 h2 {
        margin: 4rem;
    }
}