/* Kompaktes Layout für mobile Geräte */

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    background-color: white;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

header {
    height: 20em;
    background: url(music-1283851.jpg) center;
    background-size: cover;
    margin: 0;
    z-index: 10;
}

nav {
    float: left;
    width: 100%;
    background: #3a3a3a;
    font-size: calc(1em + 1vw);
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
}

nav ul {
    margin-left: -5%;
    padding: 0;
}

nav a {
    display: block;
    color: #fff;
    text-decoration: none;
}

nav ul li {
    position: relative;
    float: left;
    list-style: none;
    color: #fff;
    transition: 0.5s;
    margin-left: 9%;
}

nav ul li a {
    padding: 1em;
}

li.submenu ul {
    width: 200%;
    margin-left: 1em;
}

li.submenu ul li {
    width: 100%;
    margin-left: 0;
}

nav ul > li.submenu > a:after {
    position: relative;
    float: right;
    content: '';
    margin-left: 1em;
    margin-top: 0.5em;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-top: 0.5em solid #fff;
    border-bottom: 0.5em solid transparent;
}

nav ul ul li.submenu > a:after {
    margin-left: auto;
    margin-right: -1em;
    border-left: 0.5em solid #fff;
    border-right: 0.5em solid transparent;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
}

nav ul li:hover {
    background: #8A0886;
}

nav ul ul {
    position: absolute;
    top: -9999px;
    left: -9999px;
    background: #333;
    box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.5);
    z-index: 1;
}

nav ul ul li {
    float: none;
    width: 200px;
    border-bottom: 1px solid #555;
}

nav ul ul li a {
    padding: 10px 20px;
}

nav ul ul li:last-child {
    border-bottom: none;
}

nav ul li:hover > ul {
    top: 100%;
    left: 0;
}

nav ul ul li:hover > ul {
    top: 0;
    left: 200px;
}

footer ul {
    margin-left: 1em;
}

footer ul li {
    margin-left: 1em;
}

footer nav {
    font-size: calc(0.5em + 1vw);
    background: lightgrey;
    font-weight: lighter;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3;
}

h2 {
    margin-top: 1.3em;
}

a {
    color: #0083e8;
}

b, strong {
    font-weight: 600;
}

/* Custom text size classes (replacing invalid <s1>-<s4> tags) */
.text-xl {
    font-size: calc(2em + 1vw);
}

.text-lg {
    font-size: calc(2.25em + 1vw);
}

.text-sm {
    font-size: calc(0.5em + 1vw);
}

.text-md {
    font-size: calc(1.5em + 1vw);
}

.text-copyright {
    font-size: calc(0.5em + 1vw);
}

/* Accent colors as classes */
.color-green {
    color: #32CD32;
}

.color-purple {
    color: #800080;
}