/*MAIN*/
body {
    margin: 0;
}

main {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(7, auto);
    grid-template-areas:
    'title'
    'selector'
    'cosmology'
    'evolution'
    'biomedicine'
    'roboticai'
    'ecology';
}

.title {
    grid-area: title;
    display: flex;
    justify-content: center;
}

h1 {
    text-align: center;
    font-family: 'Michroma', sans-serif;
    text-transform: uppercase;
    margin: 50px 0px 0px 0px;
    font-size: 2em;
    font-weight: 500;
    border-top: #bf3c30 solid 3px;
    border-bottom: #bf3c30 solid 3px;
    padding: 10px;
}

.selector {
    grid-area: selector;
    margin: 50px 0px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(5, 200px);
    grid-template-areas: 
    'selector-one'
    'selector-two'
    'selector-three'
    'selector-four'
    'selector-five';
}

.selector-one {
    grid-area: selector-one;
    background-image: url("../images/cosmology.jpg");
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    display: flex;
}

.selector div a {
    background-color: #000000;
    width: 100%;
    height: 100%;
    opacity: 0%;
    align-items: center;
    display: flex;
    transition: all 0.3s;
}

.selector div a:hover {
    opacity: 70%;
}

.selector-two {
    grid-area: selector-two;
    background-image: url("../images/shutterstock_evolution.png");
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    display: flex;
    align-items: center;
}

.selector-three {
    grid-area: selector-three;
    background-image: url("../images/bio-medicine.jpg");
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    display: flex;
    align-items: center;
}

.selector-four {
    grid-area: selector-four;
    background-image: url("../images/shutterstock_robotics&ai.jpg");
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    display: flex;
    align-items: center;
}

.selector-five {
    grid-area: selector-five;
    background-image: url("../images/shutterstock_ecology.jpg");
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    display: flex;
    align-items: center;
}

h2 {
    color: #fff;
    margin-left: 20px;
    font-family: 'Michroma', sans-serif;
    font-size: 2em;
}

h3 {
    text-align: left;
    font-family: 'Michroma', sans-serif;
    font-weight: 500;
    font-size: 1.7em;
    border-top: #bf3c30 solid 3px;
    padding: 10px 0px;
    width: 100%;
}

.cosmology {
    grid-area: cosmology;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    padding: 25px;
}

.evolution {
    grid-area: evolution;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    padding: 25px;
}

.evolution div, .biomedicine div, .roboticai div, .ecology div {
    flex: 1;
}

.exhibit-img {
    padding: 20px;
    width: 90%;
}

.exhibit-img img {
    box-shadow: 1px 5px 13px 0px rgba(0,0,0,0.50);
    border: solid 1px #2c2c2c;
}

.biomedicine {
    grid-area: biomedicine;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    padding: 25px;
}

.roboticai {
    grid-area: roboticai;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    padding: 25px;
}

.ecology {
    grid-area: ecology;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    padding: 25px;
}

p {
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    padding: 15px 0;
}



@media  (min-width: 800px) {
    .selector {
        height: 600px;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto;
        grid-template-areas: 
        'selector-one selector-two selector-three selector-four selector-five';
    }

    .selector-four {
        background-position-x: left;
        background-position-y: left;
    }

    .cosmology, .evolution, .biomedicine, .roboticai, .ecology {
        max-width: 1000px;
        margin: 0 auto;
    }

    .evolution, .roboticai {
        flex-direction: row;
    }

    .biomedicine, .ecology {
        flex-direction: row-reverse;
    }

    p {
        font-size: 16px;
    }

}