@import url('reset.css');
@import url('fonts.css');
@import url('header.css');
@import url('footer.css');

@import url('axioms.css');
@import url('shows.css');
@import url('music.css');
@import url('contact.css');
@import url('impressum.css');

* {
    /* CSS HEX */
    --primary: #4e2852;
    --alabaster: #ede9dfff;
    --van-dyke: #482e2aff;
    --seal-brown: #6d351eff;
    --dark-green: #162a1fff;
    --dark-green-2: #0b1c0bff;

    /* CSS HSL */
    --alabaster: hsla(43, 28%, 90%, 1);
    --van-dyke: hsla(8, 26%, 22%, 1);
    --seal-brown: hsla(17, 57%, 27%, 1);
    --dark-green: hsla(147, 31%, 13%, 1);
    --dark-green-2: hsla(120, 44%, 8%, 1);
}

/**
STYLE
 */
body {;
    font-family: 'CabinetGrotesk-Extralight', arial, sans-serif;
    width: 100vw;
    overflow-x: hidden;
    background-color: black;
}

html {
    font-size: 16px;
}

@media screen and (max-width: 920px) {
    html{
        font-size: 14px;
    }
}

@media screen and (max-width: 640px) {
    html{
        font-size: 14px;
    }
}

body .page-container {
    /*max-width: 1280px;*/
    margin: auto;
    width: 100%;
}

section {
    display: block;
}

h1 {
    font-size: 4.6em;
}

.cta {
    font-family: 'CabinetGrotesk-Light', arial, sans-serif;
    font-size: 2rem;
    padding: 0.8em;
    box-shadow: 2px 2px 2px var(--dark-green-2);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--alabaster);
    color: var(--primary);
    transition: color, background-color 0.08s ease-in-out;
}

.cta:hover {
    box-shadow: 3px 3px 3px var(--dark-green);
    background-color: var(--primary);
    color: var(--alabaster);
    transition: color, background-color 0.2s ease-in-out;

}