/* CSS Document */

body {
    color: white;
    font-family: 'Permanent Marker', cursive;
    background-color: black;
    text-align: center;
}

footer {
    height: 20vh;
    background-color: black;
}

/* section titles */
h2 {
    color: lightgoldenrodyellow;
    font-size: 3em
}

/* large screen show bandpic */
@media only screen and (min-width: 1008px) {
    .icecream {
        display: none;
    }

    .bandpic {
        position: fixed;
        z-index: -1000;
        width: 99%;
        left: 0;
        bottom: 0;
    }
}

/* small screem show ice cream */
@media only screen and (max-width: 1007px) {
    .bandpic {
        display: none;
    }

    .icecream {
        position: fixed;
        z-index: -1000;
        width: 25%;
        top: 30vh;
        left: 35vw;
    }
}

/* ditch elements when screen is really small */
@media only screen and (max-width: 400px) {
    .binontiny {
        display: none;
    }
}

.title {
    height: 35vh;
    z-index: 20;
    fill: rgb(253, 255, 238);
}

/* link hover */
a:hover {
    text-decoration: none;
    color: #F2F7C5;
}

/* font awesomes */
.fa {
    color: #F2F7C59C;
    font-size: 8vw;
}

.window {
    height: 65vh;
    background-color: none;
}

.section {
    background-color: black;
    border-top: solid thin white;
    border-bottom: solid thin white;
    padding-bottom: 5vh;
}

.songkick {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    color: lightgoldenrodyellow;
}

.merch-info {
    background-color: #222222;
    font-size: 2em;
    margin: 0;
}

.merch-title {
    background-color: #444444;
    font-size: 2em;
    margin: 0;
}

.merch-info .col {
    margin: auto;
    padding: 1% 0;
}

.merch-img {
    width: 100%;
    height: auto;

}

.card {
    background: black;
    padding: 0;
}

/* hover effects */
.merch-img:hover {
    opacity: 80%;
}

/* control visability of social icons */

.off {
    opacity: 0;
    transition: color 0.6s ease-out;
    position: relative;
    z-index: -100;
}

.on {
    opacity: 100;
    transition: color 0.6s ease-out;
    position: relative;
    z-index: 1050
}