@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');


* {
    box-sizing: border-box;
    transition: all .3s ease;
}

body {
   align-items: start;
   background: #24053c;
   color: #fff;
   display: grid;
   font-family: Ubuntu, sans-serif;
   justify-items: center;
   margin: 0; padding: 0 0 3rem 0;
   text-align: center;
   width: 100%;
}

a {
   color: #0687f5;
   text-decoration: none;
}
a:active, a:focus, a:hover {
   color: #fff;
   text-decoration: underline;
}

goj {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(15, auto);
    padding-top: 3rem;
}
goj img {
    box-sizing: border-box;
    filter: blur(0vw) drop-shadow(.25vw .4vw 0vw #eb6123);
    height: 14vw;
    max-height: 100%;
    padding: .25vw;
    transition-duration: 3s;
    width: auto;
}
goj img:hover {
    filter: blur(.5vw) drop-shadow(.125vw .2vw 0vw #eb6123);
    opacity: .15;
    transform: rotateX(30deg) rotateY(10deg);
    transition-duration: .3s;
}

h1, h2, h3, h4, h5, h6 {
   color: #a7516c;
   margin-top: 2.5em;
}

img {
    max-width: 100%;
}

music {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 200px;
    grid-template-rows: 200px 200px 200px 200px;
    justify-content: center;
}

social {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: 1fr 1fr 1fr;
   margin: 0 2rem;
}
social a img {
   border: 4px double rgba(255,255,255,0);
   border-radius: 100%;
   opacity: .7;
}
social a:active img, social a:focus img, social a:hover img {
   border-color: rgba(255,255,255,1);
   opacity: 1;
}
social img {
   max-width: 96px;
}

.contact {
    display: block;
    font-size: 1.25em;
    margin: 1em 0 2em 0;
}

.logo {
    box-sizing: border-box;
    display: block;
    margin: auto;
    padding: 4rem 2rem 0 2rem;
    width: 100%;
}


.bandcamp {
    border: 0; 
    height: 756px;
    width: 320px;
}

.bit-widget .bit-nav-bar-container .bit-nav-bar {
    display: none !important;
}

.bit-widget-container {
    position: relative;
}
.bit-widget-container::before {
    background: url('img/liquid-faces.png') center no-repeat; background-size: cover;
    content: "";
    display: block;
    height: 100%;
    opacity: .3;
    position: absolute;
    width: 100%;
    z-index: -1;
}
.bit-widget.bit-layout-ipad .bit-event a:active, .bit-widget.bit-layout-ipad .bit-event a:hover {
   text-shadow: 0 0 2em #fff;
}
.bit-widget.bit-layout-ipad .bit-event .bit-event-buttons a {
   text-shadow: none;
}
.bit-widget.bit-layout-ipad .bit-event .bit-event-buttons .bit-offers:active, .bit-widget.bit-layout-ipad .bit-event .bit-event-buttons .bit-offers:hover {
   background: rgba(255,255,255,.9);
   color: #0687f5;
}
.bit-widget.bit-layout-ipad .bit-event .bit-event-buttons .bit-rsvp:active, .bit-widget.bit-layout-ipad .bit-event .bit-event-buttons .bit-rsvp:hover {
   background: rgba(0,0,0,.6);
   border-color: #fff;
   color: #fff;
}


@media screen and (min-width: 490px) {
	music {
        grid-template-columns: 200px 200px;
        grid-template-rows: 200px 200px;
	}
    .bandcamp {
        height: 926px;
        width: 490px;
    }
}
@media screen and (min-width: 961px) {
	body { 
      grid-template-columns: auto auto;
	}
	goj {
        grid-column: 1 / span 2;
	}
	goj img {
	    height: 12.5vw;
	}
	.logo {
        grid-column: 1 / span 2;
        width: 87.5%;
	}
    .bit-widget-container {
        min-width: 490px;
    }
}