/* These are primarily desktop or general settings, small screen adjustments are at the bottom */

/* Removes the space between jumbotrons */
.jumbotron {
    margin: 0px;
}

/* Banner for the website */
.jumbotron-first {
    background-image: url("kingsfeasttitleimg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-position-y: -10px;
    height: 888px;
}

/* Changes the bg-color of the jumbotron containing the description and trailer & pics */
.jumbotron-second {
    background-color: whitesmoke;
}

/* Changes the bg-color of the jumbotron containing the dev team pictures etc. */
.jumbotron-fourth {
    background-color: whitesmoke;
}

/* Sets size and position of the google play link/logo */
.fluid-google-logo {
    width: 337px;
    height: 120px;
    margin-top: 666px;
}

/* Sets size and adds a small space in between pictures of the game */
.fluid-gamepicture {
    object-fit: contain;
    width: 500px;
    height: 256px;
    padding: 5px;
}

/* Adds padding to the bottom of devteam header */
.devteam-header {
    padding-bottom: 20px;
}

/* Sets size and spacing for team member pictures */
.memberpic {
    object-fit: cover;
    width: 220px;
    height: 270px;
    margin-top: -10px;
    margin-bottom: 40px;
}

/* Shortens the gap between dev name and their role */
.devname {
    margin-bottom: -5px;
}

/* Sets size and adds a margin for collaborator logos found at the footer */
.collab-logos {
    object-fit: contain;
    width: 300px;
    height: 128px;
    margin: 20px;
}

.video {
    margin-bottom: 30px;
}

/* Adjustments for small screens */
@media (max-width: 576px) {
    /* Banner img is made smaller to accomodate small screens */
    .jumbotron-first {
        background-size: cover;
        height: 300px;
    }

    /* Google play logo/link is reduced in size for small screens */
    .fluid-google-logo {
        width: 227px;
        height: 80px;
        margin-top: 150px;
    }
}

/* Adjustments for slightly bigger screens */
@media (min-width: 576px) and (max-width: 991px) { 
    /* Banner img is made smaller to accomodate smaller screens */
    .jumbotron-first {
        background-size: cover;
        height: 480px;
    }

    /* Google play logo/link is reduced in size for smaller screens */
    .fluid-google-logo {
        width: 227px;
        height: 80px;
        margin-top: 280px;
    }

    /* Collaborator logo size adjustments to make the fit better on smaller screens */
    .collab-logos {
        object-fit: contain;
        width: 172px;
        height: 86px;
        margin: 20px;
    }
}