:root { --font_1: RoadRage; --font_2: SpecialElite; --ep_p_w_1: 30vw;  --ep_l_w_1: 9rem; --ep_p_w_2: 24vw;  --ep_l_w_2: 7rem; }
@font-face { font-family: RoadRage; src: url(res/font/RoadRage-Regular.woff2); font-display: swap; }
@font-face { font-family: SpecialElite; src: url(res/font/SpecialElite-Regular.woff2); font-display: swap; }
@keyframes logo_in { 0% { margin-top: 8vw; margin-left: -60%; }100% { margin-top: inherit; margin-left: inherit; } }
@keyframes logo_out { 0% { margin-top: inherit; margin-left: inherit; display:block; }100% { margin-top: 8vw; margin-left: -60%; } }
@keyframes rotate_panic_button { 0% { transform: rotate(0deg); } 100% { transform: rotate(-359deg); } }
@keyframes rotate_ep { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } }
html, body { margin: 0; padding: 0; overflow:hidden; }
html { width: 100%; height: 100%; background: #ccc; }
body { width: 100%; height: 100%; font-size: 10vw; line-height: 10vw; color: #2e2a2b; font-family: var(--font_1); text-align: center; overflow-y: auto; }
ul { margin: 0; padding: 0; }
ul li { list-style: none; }
img { margin:0; padding:0; width: 100%; height: auto; border: none; box-sizing: border-box; }
header nav { display: none; }
header nav ul li a { color: unset; text-decoration: none; }
section { margin: 0; padding: 1.25rem 0 0; overflow: hidden; }
section a { display: block; }
section img { filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.75)); }
h1 { margin: 0 auto; padding: 0 1rem; color: #222; font-family: var(--font_2); font-size: 10vw; line-height: 11vw; text-align: center; text-shadow: 1px 1px 1px #2e2a2b; }
p { margin: 0; padding: 0.5rem 1rem 1rem; transform-origin: center; transform: rotate(-0.75deg); filter: drop-shadow(0px 0px 0px #000); }
p:nth-child(even) { transform: rotate(0.75deg); }
footer { margin: 0; padding: 3rem 0 12rem; color: #eee; font-size: 2rem; background: rgba(0,0,0,0.9); }
footer a { color: #eee; text-decoration:none; }
footer nav ul li, footer nav ul li { padding: 0.5rem 1rem; }
footer .studio_63 img { width: 50%; }
.midoli_logo_footer { width: 70%; }
.berry_logo_footer { width: 33%; filter: drop-shadow(0px 0px 6px #000) drop-shadow(0px 0px 4px #000); }
.splitter { padding: 0; }
.logo_midoli_sticky { width: 90%; height: auto; transition-duration: 1s; }
.logo_midoli { mix-blend-mode: multiply; filter: brightness(0.25); } 
.logo_midoli_sticky { display: none; position: fixed; top: 0.25rem; left: 0.25rem; width: 60%; height: auto; filter: brightness(1.75) saturate(0) drop-shadow(1px 1px 4px #000) drop-shadow(1px 1px 7px rgba(0,0,0,0.5)); z-index: 10; transition-duration: 1s;}
.stick_it { display: block; animation-name: logo_in; animation-duration: 0.25s; animation-iteration-count: 1; animation-timing-function: ease-out; }
.shove_it { animation-name: logo_out; animation-duration: 0.25s; animation-iteration-count: 1; animation-timing-function: ease-in; }
.panic_overlay { display: none; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; line-height: 4rem; background: #222; z-index: 25; }
.panic_overlay .midoli { position: absolute; margin: 5vw; width: 90vw; height: 90vw; background-image: url(res/logo/midoli_logo_color_bg-dark_sr.avif); background-repeat: no-repeat; background-size: 90% auto; background-position: center; filter: drop-shadow(1px 3px 14px #000) drop-shadow(1px 3px 30px #000); z-index: 1; }
.panic_overlay .title { position: absolute; margin: 100vw 0 0 0; width: 100%; color: #fff; z-index: 1; font-size: 4rem; transform: rotate(-1.5deg); filter: drop-shadow(2px 4px 6px #000) drop-shadow(-4px -1px 6px #000); }
.panic_overlay .title span { display: block; padding: 3rem 0 1.5rem; width:100%; font-family: var(--font_2); font-size: 1.25rem; transform: rotate(3deg); filter: drop-shadow(2px 4px 6px #000); }
.panic_overlay .bg { top: 0; left: 0; width: 100vw; height: 100vh; background-image: url(res/bg/bg_2_v.avif); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; mix-blend-mode: hard-light; opacity: 0.85; transform: rotate(180deg); z-index: 0; }
.panic_button { background: transparent; border: none; filter: drop-shadow(0px 0px 3px #000) drop-shadow(0px 0px 7px #000); z-index: 1; }
.panic_button:hover { cursor: pointer; }
.panic_button .spinning { position: absolute; bottom: 0; right: 0; background-image: url(res/panic_button/spinning.avif); background-repeat: no-repeat; background-size: 100%; animation-name: rotate_panic_button; animation-duration: 24s; animation-iteration-count: infinite; animation-timing-function: linear; }
.panic_button .static { position: absolute; bottom: 0; right: 0; background-image: url(res/panic_button/static.avif); background-repeat: no-repeat; background-size: 100%; }
.panic_button_sticky { position: fixed; }
.ep { background: transparent; border: none; filter: drop-shadow(0px 0px 3px #000); z-index: 1; }
.ep:hover { cursor: pointer; }
.ep .eepee { position: absolute; }
.ep .playhead { position: absolute; bottom: 0; right: 0;  filter: drop-shadow(0px 0px 3px black); }
.ep .shine { position: absolute; bottom: 0; right: 0; width: 9rem; height: 9rem; }
.ep .vinyl { position: absolute; bottom: 0; right: 0; animation-name: rotate_ep; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; }

.fullscreenizer { display: grid !important; position: fixed; top: 0; right: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 10; }
.midoli_rts2_bunt { display: none; align-items: center; text-align: center; }
.midoli_rts2_bunt video { margin: 0 0 0 10vw; width: 80vw; height: calc(80vw * (16/9)); height: auto; }
.midoli_bunt_tv:hover { cursor: pointer; }
.contact_radoljub { position: fixed; bottom: -3rem; right: 1rem; width: 9rem; height: 9rem; cursor: pointer; z-index: 1; }
.contact_radoljub img { width: 5rem; height: 5rem; border-radius: 50rem; border: solid 3px #444; transform: scaleX(-1); filter: drop-shadow(0px 0px 2px #000) drop-shadow(1px 1px 1px rgba(0,0,0,0.75)); overflow: hidden; }
.dirty_tuna { display: block; position: fixed; bottom: 28vw; right: 7vw; width: 20vw; height: 20vw; cursor: pointer; z-index: 1; transform: rotate(6.66deg); }
.dirty_tuna img { width: 20vw; height: 20vw; filter: drop-shadow(0px 0px 2px #fff) drop-shadow(1px 1px 1px #fff) drop-shadow(1px 1px 1px #fff) drop-shadow(1px 1px 1px #fff); overflow: hidden; }
.contact_banner { padding: 0; cursor: pointer; }
.tebra { padding: 2rem 0 0; }
.forest { padding: 0; }
.anatomy img { margin: 2rem 0 0; }
.fifth_element { padding-bottom: 1rem; filter: brightness(1.15); }
.social { padding: 2rem 0 3rem; color: #ccc; mask: url(res/social_media/masque.avif); -webkit-mask-image: url(res/social_media/masque.avif); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; background-image: url(res/social_media/starfield.gif); background-color: #3d3015; background-blend-mode: darken; background-size: cover; background-position: center; }
.social_media { display: grid; grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr; filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.75)); }
.social_media a { margin: 0 20%; filter: contrast(1.2) brightness(1.2); }
.contact_overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #787b5e/*#3f2e17*/; background-blend-mode: overlay; background-size: 100vw 100vh; background-image: url(res/bg/bg_2_v.avif); overflow-y: auto; z-index: 15; }

.dirtytuna_android { display: block; position: relative; margin: 0 auto; width: 50%; aspect-ratio: 250 / 495; overflow: hidden; transform: rotate(1.11deg); transform-origin: center; filter: drop-shadow(1px 1px 3px #000); }
.dirtytuna_android video { width: 85%; height: auto; position: absolute; top: 6%; left: 5%; background: #111; }
.dirtytuna_android img { position: absolute; top: 0vw; width: 95%; height: auto; left: 0%; filter: saturate(0) contrast(1.2); }
.dirtytuna_apk_lnk { color: rgb(33, 50, 150); font-family: var(--font_2); font-size: 1.75vw; font-weight: bold; text-decoration: none; filter: drop-shadow(0px 0px 6px rgb(255,255,255));}

.footer_contact { cursor: pointer; }

@media (orientation: portrait) {
	.hc_bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ddd; background-image: url("res/bg/bg_1_v.avif"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; z-index: -1; }
	.logo_midoli { width: 90%; margin: 5% 0 0; }
	.ep_sticky { position: fixed; bottom: -7vw; left: 3vw; }
	.ep { width: var(--ep_p_w_1); height: var(--ep_p_w_1);  }
	.ep .eepee { bottom: 20vw; right: 9.5vw; width: 8vw; }
	.ep .playhead { width: var(--ep_p_w_1); }
	.ep .shine { width: var(--ep_p_w_1); height: var(--ep_p_w_1); }
	.ep .vinyl { width: var(--ep_p_w_1); height: var(--ep_p_w_1); }
	.panic_button { width: 28vw; height: 28vw; }
	.panic_button_sticky { position: fixed; bottom: -7vw; right: 3vw; }
	.panic_button .spinning { width: var(--ep_p_w_1); height: var(--ep_p_w_1); }
	.panic_button .static { width: var(--ep_p_w_1); height: var(--ep_p_w_1); }
	.contact_radoljub { bottom: -5vw; right: calc(50vw - (var(--ep_p_w_2) / 2)); width: var(--ep_p_w_2); height: var(--ep_p_w_2); }
	.contact_radoljub img { width: var(--ep_p_w_2); height: var(--ep_p_w_2); }
	.upperty { position: relative; z-index: 2; }
	.dirtytuna_apk_lnk { font-size: 7vw; font-weight: bold; text-decoration: none; }
}
@media (orientation: landscape) {
	body { padding: 0; height: 100vh; column-count: 4; column-gap: 2vw; column-rule: solid 2vw rgba(0,0,0,0.1); overflow-x: auto; font-size: 2.25vw; line-height: 2vw; overflow-y: hidden; }
	h1 { font-size: 1.85vw; line-height: 2.25vw; }
	.hc_bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ddd; background-image: url(res/bg/bg_1_h.avif); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; z-index: -1; }
	.logo_midoli { width: 80%; margin: 2rem 0 1.5rem; }
	.zli_ep_vinyl img { margin: 2rem 0; }
	.anatomy img { margin: 2.5rem 0 1rem; }
	.panic_button { width: 9rem; height: 9rem; }
	.panic_overlay .midoli { position: absolute; margin: 25vh 0 0 calc(45vw - 50vh); width: 50vh; height: 50vh; background-image: url(res/logo/midoli_logo_bw_bg-dark_sr.avif); background-repeat: no-repeat; background-size: 90% auto; filter: drop-shadow(1px 3px 14px #000) drop-shadow(1px 3px 30px #000); z-index: 1; }
	.panic_overlay .title { position: absolute; margin: 40vh 0 0 50vw; width: 60vh; color: #fff; z-index: 1; font-size: 5rem; line-height: 5rem; transform: rotate(-1.5deg); filter: drop-shadow(2px 4px 6px #000) drop-shadow(-4px -1px 6px #000); }
	.panic_overlay .title span { display: block; padding: 3rem 0 1.5rem; width:100%; font-family: var(--font_2); font-size: 1.75rem; transform: rotate(3deg); filter: drop-shadow(2px 4px 6px #000); }
	.panic_overlay .bg { background-image: url(res/bg/bg_2_h.avif); transform: rotate(0deg); }
	.ep_sticky { position: fixed; bottom: -3rem; right: 12rem; }
	.ep { width: var(--ep_l_w_1); height: var(--ep_l_w_1); }
	.ep .eepee { bottom: 6.66rem; right: 3.5rem; width: 2rem; }
	.ep .playhead { width: var(--ep_l_w_1); }
	.ep .shine { width: var(--ep_l_w_1); height: var(--ep_l_w_1); }
	.ep .vinyl { width: var(--ep_l_w_1); height: var(--ep_l_w_1); }
	.panic_button_sticky { bottom: -3rem; right: 1rem; }
	.panic_button .spinning { width: var(--ep_l_w_1); height: var(--ep_l_w_1); }
	.panic_button .static { width: var(--ep_l_w_1); height: var(--ep_l_w_1); }
	/*.contact_radoljub { bottom: -3rem; right: 1rem; width: var(--ep_l_w_1); height: var(--ep_l_w_1); }
	.contact_radoljub img { width: var(--ep_l_w_1); height: var(--ep_l_w_1); }*/
	.dirty_tuna { bottom: 0.5rem; right: 33rem; width: 7rem; height: 7rem; transform: rotate(-6.66deg); }
	.dirty_tuna img { width: 7rem; height: 7rem; }

	.contact_radoljub { bottom: -2rem; left: unset; right: 23rem; width: var(--ep_l_w_2); height: var(--ep_l_w_2); }
	.contact_radoljub img { width: var(--ep_l_w_2); height: var(--ep_l_w_2);  }
	.contact_overlay { padding: 0 37vw; width: 26vw; background-image: url(res/bg/bg_2_h.avif); overflow-y: auto; }
	footer { padding: 0 2rem; height: 100%; break-inside: avoid-column; font-size: 2vw; }
	footer nav ul { padding: 3rem 0 0; }
	footer nav ul li, footer nav ul li { padding: 0.75rem; }
}