/* ============================== */
/* ROOT STUFF                     */
/* ============================== */
/* https://learncssgrid.com       */
/* ============================== */

:root {
	/* COLORS */
	--c_mix_red:#FF240A; /*Signature red*/
	--c_mix_back:#191E26; /*Almost black*/
	--c_txt_text:#FFFFFF; /*Regular text*/
	--c_txt_title:#FF240A; /*Title*/
	--c_txt_capt:#999999; /*Caption*/
	--c_txt_href:#666666; /*Hyperlink*/
	--c_back:black; /*Background*/
	--c_social:white; /*Default*/
	--c_social_sendmail:#3BCF6A;
	--c_social_facebook:#1877F2;
	--c_social_bandcamp:#1CA0C3;/*629AA9*/
	--c_social_linkedin:#0B66C2;/*0077B5*/

	/* SPACERS */
	--width_max:920px;
	--space_w:2.5rem; /*Horizontal space*/
	--space_h:2.2rem; /*Vertical space*/
	--space_g:0.3rem; /*Space inside grids*/
	--s-space_extended:calc(var(--space_h) * 1.75);
	--s-space_reduced:calc(var(--space_h) * 0.65);
	--s-space_section:calc(var(--space_h) * 2.25);
	--s-space_warp:calc(var(--space_h) * 3.5);
	--s-space_caption:calc(var(--space_h) * 0.4);
}



/* ============================== */
/* SPACERS (VERTICAL SPACES)      */
/* ============================== */
/*Standard*/
.spproj {padding-top:4rem;padding-bottom:1rem;} /*Project title (top + bottom)*/
.sptitl {padding-top:4rem;padding-bottom:2.5rem;} /*Title (top + bottom)*/
.spfoot {padding-top:2.5rem;padding-bottom:1.5rem;} /*Footer (top + bottom)*/
.spfunf {padding-bottom:var(--s-space_caption);} /*Fun fact*/
/*Default padding (top & bottom)*/
.spdefault {padding-top:var(--space_h);padding-bottom:var(--space_h);}
.spdefaultu {padding-top:var(--space_h);}
.spdefaultd {padding-bottom:var(--space_h);}
/*Extended padding (top & bottom)*/
.spextended {padding-top:var(--s-space_extended);padding-bottom:var(--s-space_extended);}
.spextendedu {padding-top:var(--s-space_extended);}
.spextendedd {padding-bottom:var(--s-space_extended);}
/*Reduced padding (top & bottom)*/
.spreduced {padding-top:var(--s-space_reduced);padding-bottom:var(--s-space_reduced);}
.spreducedu {padding-top:var(--s-space_reduced);}
.spreducedd {padding-bottom:var(--s-space_reduced);}
/*Section (top & bottom)*/
.spsection {padding-top:var(--s-space_section);padding-bottom:var(--s-space_section);}
.spsectionu {padding-top:var(--s-space_section);}
.spsectiond {padding-bottom:var(--s-space_section);}
/*Warp (top & bottom)*/
.spwarp {padding-top:var(--s-space_warp);padding-bottom:var(--s-space_warp);}
.spwarpu {padding-top:var(--s-space_warp);}
.spwarpd {padding-bottom:var(--s-space_warp);}
/*Caption (top & bottom)*/
.spcaption {padding-top:var(--s-space_caption);padding-bottom:var(--s-space_caption);}
.spcaptionu {padding-top:var(--s-space_caption);}
.spcaptiond {padding-bottom:var(--s-space_caption);}
/*Grid (top & bottom)*/
.spgrid {padding-top:var(--space_g);padding-bottom:var(--space_g);}
.spgridu {padding-top:var(--space_g);}
.spgridd {padding-bottom:var(--space_g);}



/* ============================== */
/* HEADER: MIXTURE LOGO (MOBILE)  */
/* ============================== */
#hmixture_m {
	position:relative;
	width:100%;
	height:auto;
	background-color:blue;
	padding-top:30px;
	padding-bottom:60px;
	background-color:black;
}
#hmixture_l {
	position:relative;
	display:inline;
	width:auto;
	min-width:120px;
	max-width:400px;
	max-height:50%;
	vertical-align:top;
	cursor:pointer;
	left:50%;
	transform:translateX(-50%);
	transition:transform 0.1s ease-in-out;
	content:url("../img/mixture/mixture_480x125.png");
}
#hmixture_l:hover {
	transform:translateX(-50%) scale(1.02);
}



/* ============================== */
/* HEADER: MIXTURE LOGO (DESKTOP) */
/* ============================== */
#hmixture_d {
	position:absolute;
	width:20vw;
	min-width:120px;
	max-width:180px;
	height:auto;
	margin:15px;
	z-index:1;
	cursor:pointer;
	transition:transform 0.1s ease-in-out;
	content:url("../img/mixture/mixture_400x292.png");
}
#hmixture_d:hover {
	transform:scale(1.02);
}



/* ============================== */
/* HEADER: SOCIAL ICONS           */
/* ============================== */
#hsocial {
	position:absolute;
	display:grid;
	height:auto;
	margin:auto;
	top:16px;
	right:16px;
	gap:6px;
	z-index:2;
	grid-template-columns:repeat(4,1fr);
}
.hsocial {
	cursor:pointer;
	width:28px;
	height:28px;
	background-color:var(--c_social);
	transition:transform 0.1s ease-in-out;
}
.hsocial:hover {
	transform:scale(1.1);
}
.hsocial_mail {mask-image:url(../img/social/mail_f_r.svg);}
.hsocial_link {mask-image:url(../img/social/linkedin_f_r.svg);}
.hsocial_face {mask-image:url(../img/social/facebook_f_r.svg);}
.hsocial_band {mask-image:url(../img/social/bandcamp_f_r.svg);}



/* ============================== */
/* HEADER: PROJECT PAGE           */
/* ============================== */
#hproject {
	position:relative;
	width:100%;
	height:min(75vh,640px);
}
/* Project image */
#hproject_img {
	position:absolute;
	width:100%;
	height:100%;
	object-fit:cover;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}
/* Project logo */
/* Centered by default */
#hproject_logo {
	position:absolute;
	width:auto;
	height:auto;
	max-width:min(75%,760px);
	max-height:min(75%,500px);
	margin:auto;
	top:0;bottom:0;left:0;right:0;
	object-fit:contain;
}



/* ============================== */
/* FOOTER: MIXTURE LOGO           */
/* ============================== */
#fmixture_l {
	position:relative;
	display:inline;
	width:20%;
	min-width:120px;
	max-width:180px;
	height:auto;
	vertical-align:top;
	cursor:pointer;
	left:50%;
	transform:translateX(-50%);
	transition:transform 0.1s ease-in-out;
	content:url("../img/mixture/mixture_350x250.png");
}
#fmixture_l:hover {
	transform:translateX(-50%) scale(1.02);
}



/* ============================== */
/* SECTIONS                       */
/* ============================== */
.section {
	position:relative;
	width:100%;
	height:auto;
	margin:0 auto;
	background-color:var(--c_back);
}

/* Section template: standard white */
.stwhite {
	--c_back:#FFFFFF;
	--c_txt_text:#999999;
	--c_txt_title:#EF4145;
	--c_txt_capt:#559BD1;
	--c_txt_href:#EEAD61;
}

/* Section template: Sublime Text */
.stsublime {
	--c_back:#2E3842;
	--c_txt_text:#D7DEEA;
	--c_txt_title:#EF4145;
	--c_txt_capt:#559BD1;
	--c_txt_href:#CF92C9;
}

/* Section template: gradient (vertical) */
.stgradientv {
	--col1:black;
	--col2:white;
	background-color:transparent;
	background-image:linear-gradient(var(--col1),var(--col2));
}

/* Section template: gradient (diagonal) */
.stgradientd {
	--col1:black;
	--col2:white;
	background-color:transparent;
	background-image:linear-gradient(to bottom right,var(--col1),var(--col2));
}

/* Section template: good words */
.stgoodwords {
	--col1:#C15E37DD;
	--col2:#C1354D;
	--c_txt_title:#FFD44D;
	--c_txt_text:#FFFFFF;
	background-color:transparent;
	background-image:linear-gradient(var(--col1),var(--col2));
}

/* Section template: backdoor WIP */
.stbackdoor {
	--c_back:black;
	--c_txt_text:#D7DEEA;
	--c_txt_title:#EF4145;
	--c_txt_capt:#559BD1;
	--c_txt_href:#CF92C9;
}

/* Section template: warp zone (similar projects) */
.stwarp {
	--c_txt_text:#999999;
	--c_txt_title:#88B600;
	--c_txt_capt:#4E5EA1;
	--c_txt_href:#88B600;
	background-color:transparent;
	background-image:url("../img/misc/background.png");
}

/* Section template: soundtrack */
.stsoundtrack {
	--c_back:#FFFFFF;
	--c_txt_text:#999999;
	--c_txt_title:#FF3434;
	--c_txt_href:#FF3434;
}

/* Section template: footer (copyright) */
.stfooter {
	background-color:black;
}


/* ============================== */
/* SECTION: SOUNDTRACK            */
/* ============================== */
.ssoundtrack {
	position:relative;
	width:calc(100% - var(--space_w));
	max-width:var(--width_max);
	height:calc((var(--width_max) - var(--space_g)) / 2);
	margin:auto;
}

.ssoundtrack_cf,
.ssoundtrack_cb,
.ssoundtrack_vf,
.ssoundtrack_vb {
	position:absolute;
	width:auto;
	height:100%;
	contain:layout;
	object-fit:contain;
	will-change:filter;
	transition:all 0.1s ease-in-out;
	filter:drop-shadow(3px 3px 2px #00000044);
}

.ssoundtrack_cf {left:0px;}
.ssoundtrack_cb {right:0px;}
.ssoundtrack_vf {left:28%;will-change:transform;animation:rotation 15s infinite linear;filter:none;}
.ssoundtrack_vb {left:28%;will-change:transform;animation:vinyl 1s infinite ease-in-out;}



/* ============================== */
/* BACKGROUND IMAGE               */
/* ============================== */
.bgcover,
.bgrepeat {
	position:fixed;
	width:100vw;height:100vh;
	top:0px;left:0px;
	background-image:var(--bg);
}
.bgcover {
	background-size:cover;
	background-position:center;
}
.bgrepeat {
	background-size:auto;
	background-repeat:repeat;
}



/* ============================== */
/* TEXT & FONTS                   */
/* ============================== */
@font-face {
	font-family:souvenir_demi;
	src:url("../fonts/itcsouvenir_demi.otf");
}
@font-face {
	font-family:souvenir_light;
	src:url("../fonts/itcsouvenir_light.otf");
}

/* Regular text */
.text {
	position:relative;
	width:calc(100% - var(--space_w));
	max-width:var(--width_max);
	height:auto;
	margin-top:0;
	margin-left:auto;
	margin-right:auto;

	font-family:Helvetica,Arial,sans-serif;
	text-align:left;
	font-weight:normal;
	font-size:1rem;
	line-height:normal;
	color:var(--c_txt_text);
}

/* Titles and subtitles */
.title,
.subtitle,
.surtitle {
	font-family:souvenir_demi,Helvetica,Arial,sans-serif;
	text-align:center;
	font-size:1.5rem;
	color:var(--c_txt_title);
}
.subtitle {font-size:0.9rem;}
.surtitle {font-size:0.9rem;}

/* Description of a project */
/* Regular text below the title */
.summary {text-align:center;margin-bottom:0;}

/* Comments & captions */
.comment,
.caption,
.review {
	font-family:souvenir_light,Helvetica,Arial,sans-serif;
	text-align:center;
	font-style:italic;
	font-size:0.9rem;
	font-size:1rem;
	color:var(--c_txt_capt);
}
.comment {text-align:left;}
.review {color:var(--c_txt_text);}

/* Fun fact */
.funfact {
	padding:20px;
	background-color:var(--col,#FFFFFF);
	border-radius:10px;
}



/* ============================== */
/* GRIDS                          */
/* ============================== */
.grid {
	position:relative;
	display:grid;
	width:calc(100% - var(--space_w));
	max-width:var(--width_max);
	height:auto;
	margin:auto;
	/*align-items:center;*/
	grid-auto-rows:auto;
	justify-content:center;
	box-sizing:border-box;
	gap:var(--space_g);
	/* Default: grid equal size with 2 columns */
	--template:repeat(var(--columns,2), 1fr);
	grid-template-columns:var(--template);
	grid-template-areas:var(--areas,none);
}
/* Grid sizes (repeat) */
.g2_1 {--columns:2;}
.g3_1,.g3_2 {--columns:3;}
.g4_2,.g4_3 {--columns:4;}
.g5_2,.g5_3 {--columns:5;}
.g6_3 {--columns:6;}
.g8_4 {--columns:8;}
.g9_6 {--columns:9;}
.g10_5 {--columns:10;}
/* Grid sizes (desktop) (irregular) */
/* The mobile values are set in the @media section */
/* 2 slots */
.g2d {--template:auto;--areas:"a b";}
/* 3 slots */
.g3d {--template:auto;--areas:"a b c";}
.g1-2d {--template:auto;--areas:"a a" "b c";} 
.g2-1d {--template:auto;--areas:"a b" "c c";}
/* 4 slots */
.g4d {--template:auto;--areas:"a b c d";}
.g2-2d {--template:auto;--areas:"a b" "c d";}
/* 5 slots */
.g5d {--template:auto;--areas:"a b c d e";}
.g2-3d {--template:auto;--areas:"a a a b b b" "c c d d e e";}
.g3-2d {--template:auto;--areas:"a a b b c c" "d d d e e e";}
/* 6 slots */
.g3-3d {--template:auto;--areas:"a b c" "d e f";}
.g2-4d {--template:auto;--areas:"a a b b" "c d e f";}
.g4-2d {--template:auto;--areas:"a b c d" "e e f f";}
.g1-2-1-2d {--template:auto;--areas:"a a" "b c" "d d" "e f";}
.g2-3-1d {--template:auto;--areas:"a a a b b b" "c c d d e e" "f f f f f f";}
/* 7 slots */
.g7d {--template:auto;--areas:"a b c d e f g";}
.g2-3-2d {--template:auto;--areas:"a a a b b b" "c c d d e e" "f f f g g g";}
.g3-4d {--template:auto;--areas:"a a a a b b b b c c c c" "d d d e e e f f f g g g";}
.g4-3d {--template:auto;--areas:"a a a b b b c c c d d d" "e e e e f f f f g g g g";}
/* 8 slots */
.g4-4d {--template:auto;--areas:"a b c d" "e f g h";}
.g3-2-3d {--template:auto;--areas:"a a b b c c" "d d d e e e" "f f g g h h";}
.g5-3d {--template:auto;--areas:"a a a b b b c c c d d d e e e" "f f f f f g g g g g h h h h h";}
/* 9 slots */
.g3-3-3d {--template:auto;--areas:"a b c" "d e f" "g h i";}
.g2-3-4d {--template:auto;--areas:"a a a a a a b b b b b b" "c c c c d d d d e e e e" "f f f g g g h h h i i i";}
.g4-5d {--template:auto;--areas:"a a a a a b b b b b c c c c c d d d d d" "e e e e f f f f g g g g h h h h i i i i";}
.g5-4d {--template:auto;--areas:"a a a a b b b b c c c c d d d d e e e e" "f f f f f g g g g g h h h h h i i i i i";}
/* 10 slots */
.g5-5d {--template:auto;--areas:"a b c d e" "f g h i j";}
.g2-4-4d {--template:auto;--areas:"a a b b" "c d e f" "g h i j";}
.g3-2-3-2d {--template:auto;--areas:"a a b b c c" "d d d e e e" "f f g g h h" "i i i j j j";}
.g3-4-3d {--template:auto;--areas:"a a a a b b b b c c c c" "d d d e e e f f f g g g" "h h h h i i i i j j j j";}
/* 11 slots */
.g4-3-4d {--template:auto;--areas:"a a a b b b c c c d d d" "e e e e f f f f g g g g" "h h h i i i j j j k k k";}



/* ============================== */
/* DOWNLOAD BUTTONS               */
/* ============================== */
.down_div {
	position:relative;
	display:table;
	max-width:calc(100% - var(--space_w));
	margin:auto;
	transition:all 0.1s ease-in-out;
	a:link { text-decoration:none;  }
}
.down_div:hover {
	transform:scale(1.04,1.04);
}

.down_container {
	--col:#000000;
	background-color:var(--col);
	border-radius:10px;
	padding:24px;
}

.down_icon {
	position:relative;
	display:inline-block;
	left:50%;
	width:52px;
	margin:auto auto 10px auto;
	transform:translateX(-50%);
}

.down_text {
	position:relative;
	width:auto;
	font-family:Helvetica,Arial,sans-serif;
	font-weight:normal;
	font-style:italic;
	font-size:1rem;
	text-align:center;
	line-height:normal;
	color:var(--c_txt_text);
}



/* ============================== */
/* POP-UP.                        */
/* ============================== */
#popup {
	position:fixed;
	width:calc(100% + 2px);
	height:calc(100% + 2px);
	top:-1px;
	left:-1px;
	background-color:#000000E6;
	z-index:10;
}

#popup_image {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
	object-fit:contain;
	margin:auto;
	top:50%;
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
}

#popup_video {
	position:relative;
	width:100%;
	height:auto;
	max-width:100%;
	max-height:100%;
	top:50%;
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
}

#popup_close {
	position:absolute;
	width:50px;
	height:50px;
	top:20px;
	right:20px;
	cursor:pointer;
	background-image:url("../img/misc/cross_r.png");
	background-size:contain;
	transition:all 0.1s ease-in-out;
}

#popup_close:hover {
	transform:scale(1.2);
}



/* ============================== */
/* IMAGES                         */
/* ============================== */
.img {
	position:relative;
	width:100%;
	height:auto;
	margin:auto;
	object-fit:cover;
	transition:all 0.1s ease-in-out;
}

/* Contained in Max Width */
/* Becomes full width in mobile mode */
/* ...and so, onclick becomes disabled */
.icontain {
	width:calc(100% - var(--space_w));
	max-width:var(--width_max);
}

/* Full width minus space */
.icover { max-width:calc(100% - var(--space_w)); }



/* ============================== */
/* HOVER STATES                   */
/* ============================== */
/* Hover: zoom */
.hzoom {cursor:pointer;}
.hzoom:hover{--scale:1.1;transform:scale(var(--scale));}

/* Hover: pop */
.hpop {cursor:pointer;will-change:unset;filter:none;transform:none;}
.hpop:hover{will-change:filter;filter:brightness(1.1) drop-shadow(0px 3px 3px #00000080);transform:translate(0px,-3px);}

/* Hover: watch a video or download a file */
.hvid,
.hdown {
	position:absolute;
	top:0px;
	width:100%;
	height:100%;
	object-fit:contain;
	background-size:cover;
	background-position:center;
	transition:all 0.2s ease-in-out;
	opacity:1;
}

.hvid:hover,.hdown:hover { opacity:0; }
.hvid { background-image:url("../img/overlays/video_10x10.png"); }
.hdown { background-image:url("../img/overlays/down_10x10.png"); }



/* ============================== */
/* TITLE ICONS                    */
/* ============================== */
.icon {
	position:relative;
	width:72px;
	height:72px;
	margin-left:auto;
	margin-right:auto;
	margin-top:0;
	margin-bottom:0.65rem;
	transition:all 0.1s ease-in-out;
	background-color:var(--c_txt_title);
	
}

.ibackstory {
	mask:url("../img/titles/backstory.svg");
	transform-origin: 50% 100%;
	animation:swing 6s infinite ease-in-out;
}

.iheart {
	mask:url("../img/titles/heart.svg");
	animation:updown 1.5s infinite ease-in-out;
}

.ihistory {
	mask:url("../img/titles/history.svg");
	animation:leftright 6s infinite ease-in-out;
}

.imusic {
	mask:url("../img/titles/music.svg");
	animation:rotation 6s infinite linear;
}

.iskull {
	mask:url("../img/titles/skull.svg");
	animation:leftright 6s infinite ease-in-out;
}

.ibackdoor {
	mask:url("../img/titles/backdoor.svg");
	animation:zoom 3s infinite ease-in-out;
}

.iwarp {
	mask:url("../img/titles/warp.svg");
	animation:zoom 3s infinite ease-in-out;
}



/* ============================== */
/* PROJECT SLOTS                  */
/* ============================== */
#projects {
	max-width:none;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.project_slot {
	position:relative;
	width:100%;
	height:auto;
	overflow:hidden;
}

.project_img {
	position:relative;
	width:inherit;
	height:inherit;
	object-fit:cover;
}

.project_zoom {
	position:absolute;
	width:calc(100% + 2px);
	height:calc(100% + 2px);
	top:-1px;
	left:-1px;
	padding-top:10px;
	opacity:0;
	cursor:pointer;

	background-image:url('../img/overlays/zoom_10x8.png');
	background-size:contain;
	background-repeat:no-repeat;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:0.9rem;
	text-align:center;
	color:white;

	user-select:none;
	-ms-user-select:none;
	-webkit-user-select:none;
	transition:all 0.2s ease-in-out;
}

.project_zoom:hover {
	padding-top:0px;
	opacity:1;
}



/* ============================== */
/* SEPARATORS                     */
/* ============================== */
.separator,
.separator_u,
.separator_d,
.separator_uu,
.separator_dd {
	position:relative;
	width:100%;
	background-color:var(--col,black);
}

.separator_uu {position:absolute;top:0px;}
.separator_dd {position:absolute;bottom:0px;}

/* Pipe */
.pipe_u {max-width:280px;content:url("../img/separators/warp.png");}

/* Shadow */ 
.shadow_u,.shadow_d {height:20px;background-color:transparent;}
.shadow_u {background-image:linear-gradient(#00000066,#00000033,#00000011,#00000000);}
.shadow_d {background-image:linear-gradient(#00000000,#00000011,#00000033,#00000066);}

/* Smile / Sneer */
.smile_u,.smile_d,.sneer_u,.sneer_d {height:60px;mask-size:100% 100%;mask-repeat:no-repeat;}
.smile_u {mask:url("../img/separators/smile_u.svg");}
.smile_d {mask:url("../img/separators/smile_d.svg");}
.sneer_u {mask:url("../img/separators/sneer_u.svg");}
.sneer_d {mask:url("../img/separators/sneer_d.svg");}

/* Triangle */
.triangle_u,.triangle_d {height:28px;mask-size:auto 100%;mask-repeat:repeat-x;}
.triangle_u {mask:url("../img/separators/triangle_u.svg");}
.triangle_d {mask:url("../img/separators/triangle_d.svg");}

/* Cloud */
.cloud_u,.cloud_d {height:16px;mask-size:auto 100%;mask-repeat:repeat-x;}
.cloud_u {mask:url("../img/separators/cloud_u.svg");}
.cloud_d {mask:url("../img/separators/cloud_d.svg");}

/* Water */
.water_d {height:18px;mask-size:auto 100%;mask-repeat:repeat-x;}
.water_d {mask:url("../img/separators/water_d.svg");}

/* Grass */
.grass_u,.grass_d {height:32px;mask-size:auto 100%;mask-repeat:repeat-x;}
.grass_u {mask:url("../img/separators/grass_u.svg");}
.grass_d {mask:url("../img/separators/grass_d.svg");}

/* Wave */
.wave1_u,.wave1_d,.wave2_u,.wave2_d {height:60px;mask-size:100% 100%;mask-repeat:no-repeat;}
.wave1_u {mask:url("../img/separators/wave1_u.svg");}
.wave1_d {mask:url("../img/separators/wave1_d.svg");}
.wave2_u {mask:url("../img/separators/wave2_u.svg");}
.wave2_d {mask:url("../img/separators/wave2_d.svg");}

/* Diagonal */
.diagonal1_u,.diagonal1_d,.diagonal2_u,.diagonal2_d {height:60px;mask-size:100% 100%;mask-repeat:no-repeat;}
.diagonal1_u {mask:url("../img/separators/diagonal1_u.svg");}
.diagonal1_d {mask:url("../img/separators/diagonal1_d.svg");}
.diagonal2_u {mask:url("../img/separators/diagonal2_u.svg");}
.diagonal2_d {mask:url("../img/separators/diagonal2_d.svg");}

/* Arrow */
.arrow_u,.arrow_d {height:60px;mask-size:100% 100%;mask-repeat:no-repeat;}
.arrow_u {mask:url("../img/separators/arrow_u.svg");}
.arrow_d {mask:url("../img/separators/arrow_d.svg");}

/* Dashed */
.dashed_b,.dashed_w {height:2px;mask-size:100% 100%;mask-repeat:repeat-x;}
.dashed_b {mask:url("../img/separators/dashed_b.svg");background-color:var(--col,#00000080);}
.dashed_w {mask:url("../img/separators/dashed_w.svg");background-color:var(--col,#FFFFFF80);}

/* Comics */
.comics_u,.comics_d {height:34px;mask-size:100% 100%;mask-repeat:no-repeat;}
.comics_u {mask:url("../img/separators/comics_u.png");}
.comics_d {mask:url("../img/separators/comics_d.png");}



/* ============================== */
/* ANIMATIONS                     */
/* ============================== */
@keyframes rotation {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(360deg); }
}

@keyframes vinyl {
	0% { transform:rotate(1deg); }
	50% { transform:rotate(-1deg); }
	100% { transform:rotate(1deg); }
}

@keyframes updown {
	0% { transform:translate(0px,-3px) scale(1,1.1); }
	50% { transform:translate(0px,3px) scale(1.1,1); }
	100% { transform:translate(0px,-3px) scale(1,1.1); }
}

@keyframes leftright {
	0% { transform:rotate(-8deg); }
	50% { transform:rotate(8deg); }
	100% { transform:rotate(-8deg); }
}

@keyframes zoom {
	0% { transform:scale(1); }
	50% { transform:scale(1.15); }
	100% { transform:scale(1); }
}

@keyframes swing {
	0% { transform:rotate(-8deg); }
	50% { transform:rotate(8deg); }
	100% { transform:rotate(-8deg); }
}



/* ============================== */
/* RESPONSIVE DESKTOP SCREENS     */
/* ============================== */
@media (min-width:769px) {

	/* COMMON STUFF */
	html {font-size:18px;}
	.desktop {display:inherit;}
	.mobile {display:none;}
}



/* ============================== */
/* RESPONSIVE MOBILE SCREENS      */
/* ============================== */
@media ((hover:none) and (pointer:coarse)) or (max-width:768px) {

	/* COMMON STUFF */
	html {font-size:36px;}
	.desktop {display:none;}
	.mobile {display:inherit;}
	:root {--space_w:1rem;}
	.icon {width:104px;height:104px;}
	.icontain {width:100%;pointer-events:none;cursor:default;}

	/* SECTION: SOUNDTRACK */
	.ssoundtrack {height:calc(100vw * 1.4);}
	.ssoundtrack_cf {width:100%;height:auto;top:0px;}
	.ssoundtrack_cb {width:100%;height:auto;bottom:0px;}
	.ssoundtrack_vf {width:100%;height:auto;left:auto;top:33%;}
	.ssoundtrack_vb {width:100%;height:auto;left:auto;top:33%;}

	/* GRID SIZES */
	.g3_1,.g2_1 {--columns:1;}
	.g5_2,.g4_2,.g3_2 {--columns:2;}
	.g6_3,.g5_3,.g4_3 {--columns:3;}
	.g8_4 {--columns:4;}
	.g10_5 {--columns:5;}
	.g9_6 {--columns:6;}
	/* GRID SIZES (IRREGULAR) */
	/* 2 slots */
	.g1-1m {--areas:"a" "b";}
	/* 3 slots */
	.g1-2m {--areas:"a a" "b c";}
	.g2-1m {--areas:"a b" "c c";}
	.g1-1-1m {--areas:"a" "b" "c";}
	/* 4 slots */
	.g2-2m {--areas:"a b" "c d";}
	.g1-2-1m {--areas:"a a" "b c" "d d";}
	.g1-1-1-1m {--areas:"a" "b" "c" "d";}
	/* 5 slots */
	.g1-1-1-1-1m {--areas:"a" "b" "c" "d" "e";}
	.g2-3m {--areas:"a a a b b b" "c c d d e e";}
	.g3-2m {--areas:"a a b b c c" "d d d e e e";}
	.g2-1-2m {--areas:"b b c c" "a a a a" "d d e e";}
	.g2-2-1m {--areas:"a a b b" "c c d d" "e e e e";}
	/* 6 slots */
	.g1-2-1-2m {--areas:"a a" "b c" "d d" "e f";}
	.g1-1-2-2m {--areas:"a a" "b b" "c d" "e f";}
	.g2-1-2-1m {--areas:"a b" "c c" "d e" "f f";}
	.g2-2-1-1m {--areas:"a b" "c d" "e e" "f f";}
	/* 7 slots */
	.g2-1-2-2m {--areas:"b c" "a a" "d e" "f g";}
	.g2-2-1-2m {--areas:"a b" "c d" "e e" "f g";}
	.g1-2-1-2-1m {--areas:"a a" "b c" "d d" "e f" "g g";}
	.g2-3-2m {--areas:"a a a b b b" "c c d d e e" "f f f g g g";}
	.g3-2-2m {--areas:"a a b b c c" "d d d e e e" "f f f g g g";}
	.g3-4m {--areas:"a a a a b b b b c c c c" "d d d e e e f f f g g g";}
	.g4-3m {--areas:"a a a b b b c c c d d d" "e e e e f f f f g g g g";}
	/* 8 slots */
	.g2-2-2-2m {--areas:"a b" "c d" "e f" "g h";}
	.g2-1-2-1-2m {--areas:"a b" "c c" "d e" "f f" "g h";}
	.g3-2-3m {--areas:"a a b b c c" "d d d e e e" "f f g g h h";}
	/* 9 slots */
	.g3-3-3m {--areas:"a b c" "d e f" "g h i";}
	.g2-2-1-2-2m {--areas:"a b" "c d" "e e" "f g" "h i";}
	/* 10 slots */
	.g2-3-2-3m {--areas:"a a a b b b" "c c d d e e" "f f f g g g" "h h i i j j";}
	/* 11 slots */
	.g2-2-2-3-2m {--areas:"a a a b b b" "c c c d d d" "e e e f f f" "g g h h i i" "j j j k k k";}
	.g1-2-3-2-1-2m {--areas:"a a a a a a" "b b b c c c" "d d e e f f" "g g g h h h" "i i i i i i" "j j j k k k";}

	/* MISC STUFF */
	.pipe_u {width:60%;max-width:420px;}

	/* HEADER: SOCIAL */
	#hsocial {
		position:relative;
		width:100%;top:0px;right:0px;
		padding-top:30px;padding-bottom:30px;
		background-color:white;
		justify-content:center;
		align-content:space-evenly;
		justify-content:space-evenly;
		grid-template-columns:repeat(4,60px);
	}
	.hsocial { width:60px;height:60px; }
	.hsocial_mail { background-color:var(--c_social_sendmail); }
	.hsocial_link { background-color:var(--c_social_linkedin); }
	.hsocial_face { background-color:var(--c_social_facebook); }
	.hsocial_band { background-color:var(--c_social_bandcamp); }

	/* HEADER: PROJECT LOGO */
	#hproject_logo {
		max-width:min(75%,500px);
		max-height:min(75%,500px);
	}

	/* FOOTER: LOGO */
	#fmixture_l {
		width:30%;
		min-width:120px;
		max-width:none;
	}
}



/* ============================== */
/* COMMON STUFF                   */
/* ============================== */
body {background-color:black;margin:0;text-size-adjust:none;overflow-x:hidden;}
html {box-sizing:border-box;overflow-x:hidden;}
button {background:none;}
div,figure,h1,h2 {margin:0;padding:0;border:none;outline:none;}
p {margin-bottom:0.8rem;}
p:last-of-type {margin-bottom:0;}
object {display:block;}
img {display:block;border:none;}
a.menu_links {cursor:pointer;}
a {text-decoration:underline;text-decoration-style:dotted;color:var(--c_txt_href);}
a:hover {text-decoration-style:wavy;}