:root {
	--color-text: #424242;
	--color-accent: #ed008c;
	--color-gray: #686868;
}

@media (max-width: 600px) {

    body {
        overflow: hidden;
    }

    .spotify-embed {
        width: 95vw;
        height: 152px;
        position: absolute;
		left: 0;
		transform: translateX(0);
    }

    .youtube-embed-4-3 {
        width: 95vw;
        height: calc(95vw / 4 * 3);
    }

    .youtube-embed-16-9 {
        width: 95vw;
        height: calc(95vw / 16 * 9);
    }

    .gallery-banner,
    .press-image,
    #illu div img,
    #logo img {
        width: 95vw;
        height: auto;
    }

    /* ---------- Pop Up ---------- */
	.popup-box {
		max-width: 300px;
		font-size: 120%;
	}
	.popup-box h2 {
		font-size: 140%;
	}

    /* ---------- Main Menu ---------- */
    #main-menu {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        background-color: var(--color-accent);
        z-index: 10000;
        overflow: visible;
    }

    .menu-toggle {
        display: block;
        text-align: center;
        color: #fff;
        font-size: 1.2em;
        padding: 0.8em 1em;
        cursor: pointer;
        background-color: var(--color-accent);
    }

    #main-menu ul {
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: var(--color-accent);
        display: flex;
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }

    #main-menu.active ul {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    #main-menu li {
        list-style: none;
        width: 100%;
        border-bottom: 1px solid #fff;
	}

	#main-menu li.last {
		border-right: none;
        width: 100%;
        border-bottom: 1px solid #fff;
	}

    #main-menu .menu a {
        display: block;
        padding: 0.8em 1em;
        color: #fff;
        text-decoration: none;
        width: 100%;
    }

    #main-menu .menu a:hover {
        background-color: #fff;
        color: var(--color-accent);
    }

    /* ---------- sub-menu ---------- */
	#sub-menu ul {
		width: 95vw;
	}

	#sub-menu ul li {
		width: 95vw;
	}

	#sub-menu li a {
		width: calc(95vw - 15px);
	}

	/* ---------- Content Layout ---------- */
    #body {
		width: 95vw;
	}

    .logo-container {
		left: 50%;
		width: 100vw;
	}

    #main {
        display: flex;         
        flex-direction: column;
        width: 95vw;
        gap: 1em;
    }

    #content {
        margin-left: -30px;
        width: 95vw;
    }

    #content .teaser {
        width: calc(100% - 2em);
        padding: 0 1em 1em 1em;
        font-size: 90%;
    }

    #content .teaser h2 {
        font-size: 110%;
    }

    #left-column {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: -40px;
        width: 95vw;
    }

    #right-column {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 95vw;
    }

    .infobox {
        width: 90vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #footer {
		width: 95vw;
        padding-bottom: 65px;
	}

	/* ---------- Social buttons ---------- */
    .social-buttons {
		gap: 1.7rem;
	}

    .social-btn {
		width: 50px;
		height: 50px;
		font-size: 2.3rem;
	}
}