header {
    background-image: url(/Images/CSM-desktop/exhibits.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 400px;
    z-index: 1;
}

.exhibits-container {
    width: 100%;
    height: fit-content;
    font-size: 1.7rem;
    font-weight: 300;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.evolution,
.biology-medicine,
.robotics-AI,
.cosmology,
.ecology {
    box-sizing: border-box;
    padding: 5rem; 
    height: fit-content;
}

h1, h2 {
    margin-top: 0;
    font-size: 2rem;
}

p {
    margin-bottom: 0; 
}

.exhibits-container img {
    width: 100vw;
}

 .evolution {
    background-color: #0D0D0D;
    color: #C4C5CA;
 }
 
.biology-medicine {
    background-color: #001B5D;
    color: #C1F0FE;
}
 
.robotics-AI {
    background-color: #382717;
    color: #E5D6BF;
}
 
.cosmology {
    background-color: #5A130D;
    color: #CAC9D1;
}
 
.ecology {
    background-color: #374F7F;
    color: #E7EFF8;
}

@media only screen and (min-width: 950px) {
    header {
        height: 800px;
    }
    
    .exhibits-container {
        font-size: 2.5rem;
        background-color: #efe3cc;
    }

    h1, h2 {
        font-size: 3rem;
    }

    .evolution,
    .biology-medicine,
    .robotics-AI,
    .cosmology,
    .ecology {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 80%;
        height: 55vw;
        max-height: 792px;
        background-position: center;
        margin: 5rem 10rem 5rem 10rem;
        border-radius: 2rem;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .evolution {
        color: #C4C5CA;
        background-image: url(/Images/CSM-desktop/evolution.png);
        }

    .biology-medicine {
        color: #C1F0FE;
        background-image: url(/Images/CSM-desktop/biology.png);
        align-items: end;
    }

    .robotics-AI {
        color: #E5D6BF;
        background-image: url(/Images/CSM-desktop/robotics.png);
    }

    .cosmology {
        color: #CAC9D1;
        background-image: url(/Images/CSM-desktop/cosmology.png);
        align-items: end;
    }

    .ecology {
        color: #E7EFF8;
        background-image: url(/Images/CSM-desktop/ecology.png);
    }
    
    .exhibits-container h1,
    .exhibits-container h2,
    .exhibits-container p{
        position: relative;
        width: 30rem;
        left: 3rem;
        text-align: left;
    }

    .cosmology h2,
    .cosmology p,
    .biology-medicine h2,
    .biology-medicine p {
        position: relative;
        right: 3rem;
        left: -3rem;
    } 
}

@media only screen and (min-width: 600px) and (max-width: 949px) {
    header {
        height: 600px;
    }
    
    .exhibits-container {
        font-size: 2.5rem;
        background-color: #efe3cc;
    }

    h1, h2 {
        font-size: 2.7rem;
        margin-bottom: 0;
    }

    .evolution,
    .biology-medicine,
    .robotics-AI,
    .cosmology,
    .ecology {
        background-repeat: no-repeat;
        background-size: 100%;
        height: 60vw;
        width: 90vw;
        margin: 2rem;
        border-radius: 2rem;
        padding: 0;
    }

    .evolution {
        background-image: url(/Images/CSM-desktop/evolution.png);
        }

    .biology-medicine {
        background-image: url(/Images/CSM-desktop/biology.png);
    }

    .robotics-AI {
        background-image: url(/Images/CSM-desktop/robotics.png);
    }

    .cosmology {
        background-image: url(/Images/CSM-desktop/cosmology.png);
    }

    .ecology {
        background-image: url(/Images/CSM-desktop/ecology.png);
    }
    
    .evolution-box,
    .biology-box,
    .robotics-box,
    .cosmology-box,
    .ecology-box {
        background-color: #0d0d0d90;
        height: 60vw;
        width: 90vw;
        border-radius: 2rem;
        box-sizing: border-box;
        padding: 0 6rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .evolution-box {
        background-color: #0d0d0d90;
    }

    .biology-box {
        background-color: #001B5D90;
    }

    .robotics-box {
        background-color: #38271790;
    }

    .cosmology-box {
        background-color: #5A130D90;
    }

    .ecology-box {
        background-color: #374F7F90;
    }
}