:root {
	--black: rgb(8, 8, 8);
	--white: rgb(221, 221, 221);
	--grey: rgb(168, 168, 168);
	--dark-grey: rgb(27, 27, 27);
	--yellow: color(srgb 0.9975 0.7879 0.0039);
    --dark-yellow: rgb(111, 88, 1);
}

body {
	font-family: Verdana, sans-serif;
	background-color: var(--black);
	color: var(--grey);
	line-height: 1.5em;
}

h1 {
	color: var(--white);
	padding-top: 2.5em;
    margin-top: 2.5em;
	margin-bottom: 1.5em;
    width: 90%;
    text-align: center;
    border-top: 1px solid var(--dark-grey);
}

a {
	color: var(--white);
	text-decoration: none;
}

a:hover { 
	color: var(--yellow);
}

p {
	margin: 0 1em;
	color: var(--grey);
}

button, .button, .primary-button {
    color: var(--black);
    background-color: var(--white);
    padding: .5em;
    border-radius: 4px;
    border-bottom: 2px solid var(--grey);
}

.primary-button {
    background-color: var(--yellow);
    border-bottom: 2px solid var(--dark-yellow);
}

button:hover, .button:hover, .primary-button:hover {
    color: var(--black);
	background-color: var(--yellow);
    border-bottom: 2px solid var(--dark-yellow);
}

.promo-image {
	width: 100%;
}

#content {
	width: 100%;
    max-width: 900px;
	margin-bottom: 10em;
}

header {
    width: 100%;
    align-items: unset !important;
	max-height: 1.3em;
	margin: 2em 0;
    z-index: 10;
}

#burger-nav {
    background: none;
    border: none;
    height: 3em;
    width: 3em;
    margin: 0 2.5em;
    padding: 0;
    cursor: pointer;
}

#burger-nav > svg {
	width: 3em;
    height: 3em;
}

#burger-nav:hover > svg {
	stroke: var(--yellow);
}

#booking {
	height: 1.5em;
}

.hidden {
	height: 0px;
	margin: 0;
}

.row {
    display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}

.column {
    display: flex;
	flex-direction: column;
	align-items: center;
}

nav {
	width: 100%;
    max-width: 900px;
	margin-top: 20vw;
	transition: all ease .1s;
}

nav > a {
    font-size: 1.2em;
    width: 90%;
    text-align: center;
    padding: 1em 0;
    border-bottom: 1px solid var(--dark-grey);
}

nav > a:last-child {
    border: none;
}

#header-logo {
    margin-top: -2em;
    max-width: 15em;
    width: 30vw;
}

#concert-links {
	line-height: 3em;
}

#concert-links .button {
	margin: 0 .5em;
}

#links > .button {
    margin: .5em 0;
    background-size: 1.5em;
    padding: .7em;
    border-radius: 8px;
	background-color: var(--white);
}

#links > .button > span {
	background-repeat: no-repeat;
    background-size: 100%;
	background-position: center;
    height: 1.5em;
    width: 1.5em;
    display: inline-block;
    margin-bottom: -.35em;
    margin-right: .7em;
}

#booking {
	background-repeat: no-repeat;
	background-position: .5em center;
	padding-left: 2.5em;
	background-image: url("/assets/icons/mail.svg?h=1");
}

.external {
	background-repeat: no-repeat;
	background-position: .5em center;
	padding-left: 2.5em;
	background-image: url("/assets/icons/external.svg?h=1");
}

.ticket {
	background-repeat: no-repeat;
	background-position: .5em center;
	padding-left: 2.5em;
	background-image: url("/assets/icons/ticket.svg?h=1");
}

.spotify > span {
	background-image: url("/assets/icons/spotify.svg?h=1");
}

.spotify:hover {
	background-color: #1DB954 !important;
    border-bottom: 2px solid #117735;
}

.instagram > span {
	background-image: url("/assets/icons/instagram.svg?h=1");
}

.instagram:hover {
	background: linear-gradient(225deg, #833ab4 0%,#fd1d1d 50%,#fcb045 100%) !important;
    border-bottom: 2px solid #99331c;
}