@font-face {
    font-family: Otala;
    src: url('fonts/Otala.ttf');
}
:root {
    --red: #E03E20;
    --blue: #001B26;
    --green: #113424;
}
html {
    font-size: 20px;
}
body {
    font-family: Otala;
    margin: 0;
    color: white;
    background: var(--blue);
    max-width: 100vw;
    overflow-x: hidden;
}
#btte-tour-background {
    position: absolute;
    top: 0;
    width: 100vw;
}
body > * {
    position: relative;
}
h1, h2, h3, h4, footer {
    text-align: center;
    font-weight: normal;
    margin: 0;
}
h1 {
    font-size: 15rem;
    max-width: 100%;
    letter-spacing: -2.3rem;
    margin: 0 0 -4rem -1rem;
}
.blue-background {
    background-image: url('images/better-than-the-end-tour-background-blue.jpg');
    background-size: cover;
    -webkit-background-clip: text;
    color: transparent;
    filter: brightness(1.25);
}
h2 {
    font-size: 2.5rem;
    letter-spacing: -0.2rem;
}
h3 {
    font-size: 2rem;
    margin: 1rem 0;
}
h4 {
    text-align: left;
}
footer {
    font-size: 0.75rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 5rem 0 2rem 0;
}
a {
    color: unset;
}
p {
    margin: 0;
}
#main-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem;
    gap: 1rem;
    transition: opacity 1s;
}
#main-container > *:not(.half) {
    flex-basis: 100%;
}
.page-width {
    margin: 0 auto;
}
.page-width, .page-width * {
    max-width: min(1000px, 100%);
}
table {
    margin: 0 auto;
    text-align: left;
    border-collapse: collapse;
}
tr:nth-child(even) {
    background-color: rgba(255,255,255,0.1);
}
.headline {
    color: var(--red);
}
#all-releases {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.half {
    flex-basis: 40%;
    flex-grow: 1;
}
.background {
    background-color: rgba(255,255,255,0.1);
}
.background-green {
    background-color: var(--green);
}
.padded {
    padding: 0 1rem 1rem 1rem;
    box-sizing: border-box;
}
.border {
    border: 2px solid rgba(255,255,255,0.5);
    box-sizing: border-box;
}
.release-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-basis: 100%;
    text-decoration: none;
}
#songkick-container {
    background-color: rgba(255,255,255,0.05);
}
.fade-photo {
    mix-blend-mode: lighten;
}
.socials {
    display: flex;
    gap: 0.25rem;
    height: 1rem;
    flex-basis: 100%;
    justify-content: center;
}
.socials a {
    flex-basis: 0;
}
.socials img {
    height: 100%;
}
#gig-comment {
    margin-bottom: 1rem;
}
.pale-text {
    color: rgba(255,255,255,0.5);
    text-wrap-mode: nowrap;
}

@media screen and (max-width: 990px){
    h1 {
	font-size: 10rem;
	letter-spacing: -1.5rem;
	margin-bottom: -3rem;
    }
    h2 {
	font-size: 2rem;
    }
    table {
	font-size: 0.5rem;
    }
}


#fire-banner {
    pointer-events: none;
}