/* app css stylesheet */

body {
    background-color: black;
    color: white;
    margin-top: 3em;
}

/*
.menu {
    list-style: none;
    border-bottom: 0.1em solid white;
    margin-bottom: 2em;
    padding: 0 0 0.5em;
}

.menu:before {
    content: "[";
}

.menu:after {
    content: "]";
}

.menu > li {
    display: inline;
}

.menu > li + li:before {
    content: "|";
    padding-right: 0.3em;
}
*/

#header {
    margin-bottom: 2em;
}

#links {
    margin-bottom: 2em;
}

.hearts {
    font-size: 3em;
    color: red;
}

.header-text {
    font-size: 3em;
    padding: .3em;
}

.overview-image {
    max-width: 100%;
}

.detail-image {
    max-width: 100%;
}

.meta-data {
    margin-bottom: 1em;
}

footer {
    border-top: 1px solid #333;
    margin-top: 2em;
    margin-bottom: 2em;
}

#overview .card-inverse {
    background-color: #000;
}

#detail .card-inverse {
    background-color: #000;
}

#overview .card {
    float: left;
    width: 100%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 0;
}

a, a:hover, a:focus, a:visited {
    text-decoration: none;
    color: #b81;
}


/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    #overview .card {
        width: 50%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #overview .card {
        width: 33.333%;
    }
}