@import url("projects_styling_root_settings.css");

body{margin:0;padding:0;background-color:var(--color_primary_main);}

#main{position:absolute;background:var(--color_primary_main);width:100%;height:auto;}
#main section {position:relative;display:block;width:100%;height:100vh;height:100dvh;background:transparent;margin:0;margin-bottom:var(--main_section_spacing);overflow:hidden;}

/* Project landing section Start. */
.project_landing{position:relative;width:100%;height:100%;background-color:transparent;box-sizing:border-box;padding:0;margin:0;}
.project_landing > div{position:relative;width:100%;height:100%;display:grid;grid-auto-rows:var(--p_landing_img_row);grid-auto-columns:var(--p_landing_img_column);grid-auto-flow:column;grid-gap:var(--p_landing_img_gap);justify-content:center;align-content:center;background-color:transparent;box-sizing:border-box;margin:0;padding:0;animation-duration:var(--p_landing_animation_time);animation-iteration-count:1;animation-timing-function:ease-in-out;}
.project_landing > div.move_left{animation-name:move_landing_carousel_left;}
.project_landing > div.move_right{animation-name:move_landing_carousel_right;}

.project_landing > div > article{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--p_color_landing_img_bg);margin:0;padding:0;}
.project_landing > div > article > img{height:95%;width:auto;max-width:95%;object-fit:contain;padding:0;animation-duration:var(--p_landing_animation_time_img);animation-iteration-count:1;animation-timing-function:ease-in-out;}
.project_landing > div > article > img.changing{animation-name:change_carousel_img;}

@keyframes move_landing_carousel_left{
	0%, 100%  {transform:translateX(0);}
	50%       {transform:translateX(var(--p_landing_carousel_move_l));}
}
@keyframes move_landing_carousel_right{
	0%, 100%  {transform:translateX(0);}
	50%       {transform:translateX(var(--p_landing_carousel_move_r));}
}
@keyframes move_landing_carousel_top{
	0%, 100%  {transform:translateY(0);}
	50%       {transform:translateY(var(--p_landing_carousel_move_t));}
}
@keyframes move_landing_carousel_bottom{
	0%, 100%  {transform:translateY(0);}
	50%       {transform:translateY(var(--p_landing_carousel_move_b));}
}
@keyframes change_carousel_img{
	0%, 100%  {opacity:1;}
	50%       {opacity:0;}
}

.project_landing > h1{z-index:11;position:absolute;top:var(--p_landing_header_t);left:var(--p_landing_header_l);width:var(--p_landing_header_w);height:var(--p_landing_header_h);background-color:var(--p_color_landing_header_bg);box-sizing:border-box;border-radius:var(--p_landing_header_f_s);font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--p_landing_header_f_s);letter-spacing:.1em;color:var(--p_color_landing_header_text);text-align:center;align-content:center;margin:0;padding:0;padding-left:.2em;padding-right:.2em;transition-property:background-color;}
.project_landing > p{z-index:11;position:absolute;top:var(--p_landing_date_t);left:var(--p_landing_date_l);width:var(--p_landing_date_w);height:var(--p_landing_date_h);background-color:var(--p_color_landing_date_bg);box-sizing:border-box;border-radius:var(--p_landing_date_f_s);font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--p_landing_date_f_s);letter-spacing:.1em;color:var(--p_color_landing_date_text);text-align:center;align-content:center;margin:0;padding:0;transition-property:background-color;}
.project_landing > h2{z-index:11;position:absolute;bottom:.5em;right:.5em;width:var(--p_carousel_indicator_h);height:var(--p_carousel_indicator_h);background-color:var(--p_color_landing_indicator_bg);font-family:"Playfair Display", serif;font-optical-sizing:auto;font-weight:900;font-style:italic;font-size:var(--p_carousel_indicator_f_s);color:var(--p_color_landing_indicator_text);text-align:center;align-content:center;box-sizing:border-box;border-radius:50%;margin:0;padding:0;padding-left:.2em;padding-right:.2em;filter:drop-shadow(.1em .1em .35em var(--p_color_landing_indicator_d_s));}
.project_landing > span{z-index:10;position:absolute;width:var(--p_landing_control_button_w);height:var(--p_landing_control_button_h);background-color:var(--p_color_landing_control_button_bg);background-size:var(--p_landing_control_button_bg_size) var(--p_landing_control_button_bg_size);background-position:50% 50%;background-repeat:no-repeat;box-sizing:border-box;border:var(--p_landing_control_button_bor) solid var(--p_color_landing_control_button_bor);border-radius:.5em;transition-property:background-color;}
.project_landing > span:nth-child(1){top:var(--p_landing_control_button_t);left:var(--p_landing_control_button_l);background-image:url("../images/project_landing_left_button_icon.png");}
.project_landing > span:nth-child(2){top:var(--p_landing_control_button_t);right:var(--p_landing_control_button_l);background-image:url("../images/project_landing_right_button_icon.png");}
.project_landing > span:hover{cursor:pointer;background-color:var(--p_color_landing_control_button_bg_s);}
.project_landing > span:hover ~ h1{background-color:var(--p_color_landing_header_bg_s);}
.project_landing > span:hover ~ p{background-color:var(--p_color_landing_date_bg_s);}

.project_landing > h1,
.project_landing > span
{transition-duration: .25s; transition-timing-function: ease-in-out;}

/* Responsive screen configurations. */
@media screen and (max-width: 1100px){
	:root{
		--p_landing_header_w: calc(95% - 1em); --p_landing_header_h: 4em;
		--p_landing_header_f_s: calc(var(--p_landing_header_h) / 6);
		--p_landing_header_t: calc(20% + 1em);
		
		--p_landing_date_w: calc(70% - 1em); --p_landing_date_h: 1.5em;
        --p_landing_date_t: calc(var(--p_landing_header_t) + (var(--p_landing_header_h) * 1.1));
	}
}
@media screen and (max-width: 750px){
	:root{
		--p_landing_img_row: calc(45% - .5em); --p_landing_img_column: calc(100% - 1em);
		--p_landing_img_gap: .5em;

		--p_landing_control_button_w: 3.5em; --p_landing_control_button_h: 3.5em;	
        --p_landing_control_button_bor: .15em;

		--p_landing_header_w: calc(95% - 1em); --p_landing_header_h: 4em;
		--p_landing_header_f_s: calc(var(--p_landing_header_h) / 6);
		--p_landing_header_t: calc(20% + 1em);
		
		--p_landing_date_w: calc(70% - 1em); --p_landing_date_h: 1.5em;
        --p_landing_date_t: calc(var(--p_landing_header_t) + (var(--p_landing_header_h) * 1.1));		
	}
	.project_landing > div{grid-auto-flow:row;}
	.project_landing > div.move_left{animation-name:move_landing_carousel_top;}
	.project_landing > div.move_right{animation-name:move_landing_carousel_bottom;}
}
@media screen and (max-width: 500px){
	:root{
		--p_landing_header_w: calc(100% - 2em); --p_landing_header_h: 4em;
		--p_landing_header_f_s: calc(var(--p_landing_header_h) / 6);
		--p_landing_header_t: calc(20% + 1em);

		--p_landing_date_w: calc(80% - 1em); --p_landing_date_h: 1.5em;
		--p_landing_date_t: calc(var(--p_landing_header_t) + (var(--p_landing_header_h) * 1));
	}
}
@media screen and (max-height: 320px){
	:root{
		--p_carousel_indicator_h: 3em;
	}
	.project_landing > h2{padding-left:0;padding-right:0;}
}
/* Project landing section End. */

/* Project content tutorial section Start. */
.project_content{position:relative;width:100%;height:auto;background-color:transparent;padding:0;margin:0;margin-top:5em;margin-bottom:5em;overflow:visible;}
.project_content > div.tutorial{position:relative;display:inline-block;width:var(--p_con_tut_w);height:auto;background-color:var(--p_color_con_tut_bg);box-sizing:border-box;padding:1.5em;margin:0;}

div.tutorial > h1, div.tutorial > h2{position:relative;min-height:var(--p_con_tut_h1_min_h);font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--p_con_tut_h1_f_s);letter-spacing:.05em;line-height:120%;text-wrap:balance;color:var(--p_color_con_h1);margin:0;padding:0;padding-left:var(--p_con_tut_h1_pad_l);margin-top:var(--p_con_tut_h1_mar);margin-bottom:var(--p_con_tut_h1_mar_b);scroll-margin-top:var(--p_con_tut_h2_scroll_t_mar);}
div.tutorial > h2{color:var(--p_color_con_h2);}
div.tutorial > h1{margin-top:calc(var(--p_con_tut_h1_mar) + 1em);}
div.tutorial > h1::after, div.tutorial > h2::after{content:"";position:absolute;top:var(--p_con_tut_h1_logo_t);left:0;display:block;width:var(--p_con_tut_h1_logo_h);height:var(--p_con_tut_h1_logo_h);background-image:url("../images/project_tutorial_h1_logo.png");background-size:100% 100%;background-position:50% 50%;background-repeat:no-repeat;box-sizing:border-box;border:var(--p_con_tut_h1_logo_bor) solid var(--p_color_con_h1_logo_bor);border-radius:50%;transition-property:transform;}
div.tutorial > h2::after{background-image:url("../images/project_tutorial_h2_logo.png");border-color:var(--p_color_con_h2_logo_bor);}
div.tutorial > h2[id="further"]::after{background-image:url("../images/project_tutorial_h2_further_d_logo.png");}
div.tutorial > h2[id="github"]::after{background-size:95% auto;background-image:url("../images/brand/github.svg");background-color:var(--p_color_code_files_but_github_logo_bg);}
div.tutorial > h2[id="p-platforms"]::after{background-image:url("../images/project_tutorial_h2_other_p_logo.png");}
div.tutorial > h2[id="references"]::after{background-image:url("../images/project_tutorial_h2_references_logo.png");}
div.tutorial > h2[id="related_projects"]::after{background-image:url("../images/project_tutorial_h2_related_p_logo.png");}
div.tutorial > h2[id="schematics"]::after,
div.tutorial > h2[id="code"]::after,
div.tutorial > h2[id="download"]::after
{background-image:url("../images/project_tutorial_h2_code_logo.png");}

div.tutorial > h1:hover, div.tutorial > h2:hover{cursor:url("../images/custom_project_cursor.png"), crosshair;}
div.tutorial > h1:hover::after, div.tutorial > h2:hover::after{transform:scale(1.15);border-color:var(--p_color_con_h1_logo_bor_s);}
div.tutorial > h2:hover::after{border-color:var(--p_color_con_h2_logo_bor_s);}

div.tutorial > p{font-family:"Lato", serif;font-weight:650;font-size:var(--p_con_tut_p_f_s);letter-spacing:.1em;line-height:180%;color:var(--p_color_con_p);}
div.tutorial > p > a,
div.tutorial > ul > li > a
{color:var(--p_color_con_a);text-decoration-color:var(--p_color_con_a_underline);text-underline-offset:20%;text-decoration-style:wavy;transition-property:font-size;}
div.tutorial > p > a:hover,
div.tutorial > ul > li > a:hover
{color:var(--p_color_con_a_s);text-decoration-color:var(--p_color_con_a_underline_s);font-size:calc(var(--p_con_tut_p_f_s) * 1.1);}

div.tutorial sup{color:var(--p_color_con_sup);transition-property:font-size;}
div.tutorial sup:hover{font-size:calc(var(--p_con_tut_p_f_s) * 1.1);color:var(--p_color_con_sup_s_end);cursor:pointer;}
div.tutorial sup[def^="ref_"]:hover{color:var(--p_color_con_sup_s_in);}

div.tutorial > p > i{overflow-wrap:break-word;font-family:"Lato", serif;font-weight:750;letter-spacing:.2em;background-color:var(--p_color_con_i_bg);padding-right:.6em;padding-left:.6em;padding-top:.15em;padding-bottom:.15em;border-radius:100vw;}
div.tutorial > pre{max-width:100%;max-height:75vh;background-color:var(--p_color_con_pre_bg);font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;font-size:var(--p_con_tut_p_f_s);letter-spacing:.1em;line-height:150%;color:var(--p_color_con_pre_text);padding:2em;overflow:auto;}
div.tutorial > pre::selection {color: var(--p_color_con_pre_select_text); background-color: var(--p_color_con_pre_select_bg);}
div.tutorial > ul, div.tutorial > ol{font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--p_con_tut_li_f_s);letter-spacing:.1em;line-height:120%;color:var(--p_color_con_ul_li);}
div.tutorial > ul li, div.tutorial > ol li{margin-bottom:.5em;overflow-wrap:break-word;}

div.tutorial > div.img_container{position:relative;width:100%;height:var(--p_con_tut_img_container_h);background-color:transparent;padding:0;margin:0;margin-top:2em;margin-bottom:2em;text-align:center;align-content:center;}
div.tutorial > div.img_container > img{height:96%;width:auto;max-width:96%;object-fit:contain;background-size:100% auto;background-position:50% 50%;background-repeat:no-repeat;border-radius:var(--p_con_tut_img_bor);padding:0;margin:0;transition-property:transform;}
div.tutorial > div.img_container > img.gif_img{background-image:url('../images/project_content_img_waiting_logo.png');background-size:20% auto;}
div.tutorial > div.img_container > img:hover{transform:scale(1.1);cursor:pointer;filter: blur(5px);}
div.tutorial > div.img_container > span{z-index:5;display:none;position:absolute;top:var(--p_con_tut_img_span_t);left:var(--p_con_tut_img_span_l);width:var(--p_con_tut_img_span_w);height:var(--p_con_tut_img_span_h);background-image:url("../images/project_content_img_zoom_logo.png");background-size:100% 100%;background-position:50% 50%;background-repeat:no-repeat;padding:0;margin:0;box-sizing:border-box;border:var(--p_con_tut_img_bor) solid var(--p_color_con_img_notif_but_bor);border-radius:50%;}
div.tutorial > div.img_container:has(> span:hover) > img{transform:scale(1.1);filter: blur(5px);}
div.tutorial > div.img_container > img:hover + span, div.tutorial > div.img_container > span:hover{display:block;}

div.tutorial > div.img_showcase_container{z-index:99;display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--p_color_con_img_show_bg);}
div.tutorial > div.img_showcase_container.enabled{display:block;}
div.tutorial > div.img_showcase_container > div{position:absolute;bottom:0;left:0;width:100%;height:var(--p_con_tut_img_show_div_h);background-color:transparent;text-align:center;align-content:center;}
div.tutorial > div.img_showcase_container > div > img{height:96%;width:auto;max-width:96%;object-fit:contain;background-size:100% auto;background-position:50% 50%;background-repeat:no-repeat;border-radius:var(--p_con_tut_img_bor);padding:0;margin:0;}
div.tutorial > div.img_showcase_container > div > img.gif_img{background-image:url('../images/project_content_img_waiting_logo.png') !important;background-size:25% auto !important;}
div.tutorial > div.img_showcase_container > a{outline:none;text-decoration:none;padding:0;}
div.tutorial > div.img_showcase_container button{outline:none;position:absolute;top:var(--p_con_tut_img_show_button_t);left:var(--p_con_tut_img_show_button_l);width:auto;height:var(--p_con_tut_img_show_button_h);background-color:var(--p_color_con_img_show_download_but_bg);box-sizing:border-box;border:var(--p_con_tut_img_show_button_bor) solid var(--p_color_con_img_show_download_but_bor);border-radius:.5em;font-family:"Lato", serif;font-weight:650;font-size:var(--p_con_tut_img_show_button_f_s);letter-spacing:.05em;color:var(--p_color_con_img_show_download_but_text);padding:0;padding-left:.5em;padding-right:.5em;margin:0;transition-property:transform;}
div.tutorial > div.img_showcase_container button:hover{transform:scale(1.2);background-color:var(--p_color_con_img_show_download_but_bg_s);cursor:pointer;}
div.tutorial > div.img_showcase_container > span{position:absolute;top:var(--p_con_tut_img_show_span_t);right:var(--p_con_tut_img_show_span_l);width:var(--p_con_tut_img_show_span_h);height:var(--p_con_tut_img_show_span_h);background-image:url("../images/publications_exit_logo.png");background-size:100% 100%;background-position:50% 50%;background-repeat:no-repeat;box-sizing:border-box;border:var(--p_con_tut_img_show_button_bor) solid var(--p_color_con_img_show_close_span_bor);border-radius:.5em;animation-name:display_close_s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--elastic-easing);}
div.tutorial > div.img_showcase_container > span:hover{border-color:var(--p_color_con_img_show_close_span_bor_s);cursor:pointer;}

div.tutorial > div.video-div{position:relative;width:var(--p_con_tut_video_w);height:var(--p_con_tut_video_h);margin:auto;margin-top:var(--p_con_tut_video_pad);margin-bottom:var(--p_con_tut_video_pad);transition-property:transform;}
div.tutorial > div.video-div:hover{transform:scale(1.1);}

@keyframes display_close_s{
	0%, 100% {transform:scale(1);}
	50%      {transform:scale(.75);}
}

div.tutorial > h1::after,
div.tutorial > h2::after,
div.tutorial > div.img_container > img,
div.tutorial > div.img_showcase_container > button,
div.tutorial > div.video-div,
div.tutorial sup
{transition-duration: 1s; transition-timing-function: var(--elastic-easing);}

div.tutorial > p > a
{transition-duration: .5s; transition-timing-function: var(--bounce-easing);}

/* Responsive screen configurations. */
@media screen and (max-width: 1100px){
	:root{
		--p_con_tut_h1_f_s: 2em;

        --p_con_tut_img_container_h: 35vw;		
	}
}
@media screen and (max-width: 850px){
	:root{
		--p_con_tut_video_w: 45vw;
		--p_con_tut_video_pad: 1.5em;
	}
}
@media screen and (max-width: 750px){
	:root{
		--p_con_tut_p_f_s: 1em;
		--p_con_tut_h1_f_s: 1.8em;
        
		--p_con_tut_img_container_h: 55vw;
        --p_con_tut_img_bor: .2em;	

        --p_con_tut_video_w: 85vw;		
	}
}
@media screen and (max-width: 450px){
	:root{
		--p_con_tut_p_f_s: .9em; --p_con_tut_li_f_s: calc(var(--p_con_tut_p_f_s) * 1.1);
		--p_con_tut_h1_f_s: 1.5em;
		--p_con_tut_h1_logo_bor: .15em;

		--p_con_tut_img_show_button_h: calc(var(--p_con_tut_img_show_top_con_h) / 3); --p_con_tut_img_show_button_bor: .15em;
		--p_con_tut_img_show_button_l: 1.3em;
		--p_con_tut_img_show_button_f_s: calc(var(--p_con_tut_img_show_button_h) / 1.5);
		--p_con_tut_img_show_span_h: calc(var(--p_con_tut_img_show_button_h) * 2.5);
		--p_con_tut_img_show_span_t: .4em;
		--p_con_tut_img_show_span_l: .4em;
	}
}
/* Project content tutorial section End. */

/* Project content theme settings Start. */
div.tutorial.light{background-color:var(--p_color_theme_lig_bg);}
div.tutorial.light > h1, div.tutorial.light > h2{color:var(--p_color_theme_lig_h1);}
div.tutorial.light > h1::after, div.tutorial.light > h2::after{border-color:var(--p_color_theme_lig_h1_logo_bor);}
div.tutorial.light > h1:hover::after, div.tutorial.light > h2:hover::after{border-color:var(--p_color_theme_lig_h1_logo_bor_s);}
div.tutorial.light > p{color:var(--p_color_theme_lig_p);}
div.tutorial.light > p > a,
div.tutorial.light > ul > li > a
{color:var(--p_color_theme_lig_a);text-decoration-color:var(--p_color_theme_lig_a_underline);}
div.tutorial.light > p > a:hover,
div.tutorial.light > ul > li > a:hover
{color:var(--p_color_theme_lig_a_s);text-decoration-color:var(--p_color_theme_lig_a_underline_s);}
div.tutorial.light > p > i{background-color:var(--p_color_theme_lig_i_bg);}
div.tutorial.light sup{color:var(--p_color_theme_lig_sup);}
div.tutorial.light sup:hover{color:var(--p_color_theme_lig_sup_s_end);}
div.tutorial.light sup[def^="ref_"]:hover{color:var(--p_color_theme_lig_sup_s_in);}
div.tutorial.light > pre{background-color:var(--p_color_theme_lig_pre_bg);color:var(--p_color_theme_lig_pre_text);}
div.tutorial.light > pre::selection {color: var(--p_color_theme_lig_pre_select_text); background-color: var(--p_color_theme_lig_pre_select_bg);}
div.tutorial.light > ul, div.tutorial.light > ol{color:var(--p_color_theme_lig_p);}

div.tutorial.sepia{background-color:var(--p_color_theme_sepia_bg);}
div.tutorial.sepia > h1, div.tutorial.sepia > h2{color:var(--p_color_theme_sepia_h1);}
div.tutorial.sepia > h1::after, div.tutorial.sepia > h2::after{border-color:var(--p_color_theme_sepia_h1_logo_bor);}
div.tutorial.sepia > h1:hover::after, div.tutorial.sepia > h2:hover::after{border-color:var(--p_color_theme_sepia_h1_logo_bor_s);}
div.tutorial.sepia > p{color:var(--p_color_theme_sepia_p);}
div.tutorial.sepia > p > a,
div.tutorial.sepia > ul > li > a
{color:var(--p_color_theme_sepia_a);text-decoration-color:var(--p_color_theme_sepia_a_underline);}
div.tutorial.sepia > p > a:hover,
div.tutorial.sepia > ul > li > a:hover
{color:var(--p_color_theme_sepia_a_s);text-decoration-color:var(--p_color_theme_sepia_a_underline_s);}
div.tutorial.sepia > p > i{background-color:var(--p_color_theme_sepia_i_bg);}
div.tutorial.sepia sup{color:var(--p_color_theme_sepia_sup);}
div.tutorial.sepia sup:hover{color:var(--p_color_theme_sepia_sup_s_end);}
div.tutorial.sepia sup[def^="ref_"]:hover{color:var(--p_color_theme_sepia_sup_s_in);}
div.tutorial.sepia > pre{background-color:var(--p_color_theme_sepia_pre_bg);color:var(--p_color_theme_sepia_pre_text);}
div.tutorial.sepia > pre::selection {color: var(--p_color_theme_sepia_pre_select_text); background-color: var(--p_color_theme_sepia_pre_select_bg);}
div.tutorial.sepia > ul, div.tutorial.sepia > ol{color:var(--p_color_theme_sepia_p);}

div.tutorial.dark{background-color:var(--p_color_theme_dark_bg);}
div.tutorial.dark > h1, div.tutorial.dark > h2{color:var(--p_color_theme_dark_h1);}
div.tutorial.dark > h1::after, div.tutorial.dark > h2::after{border-color:var(--p_color_theme_dark_h1_logo_bor);}
div.tutorial.dark > h1:hover::after, div.tutorial.dark > h2:hover::after{border-color:var(--p_color_theme_dark_h1_logo_bor_s);}
div.tutorial.dark > p{color:var(--p_color_theme_dark_p);}
div.tutorial.dark > p > a,
div.tutorial.dark > ul > li > a
{color:var(--p_color_theme_dark_a);text-decoration-color:var(--p_color_theme_dark_a_underline);}
div.tutorial.dark > p > a:hover,
div.tutorial.dark > ul > li > a:hover
{color:var(--p_color_theme_dark_a_s);text-decoration-color:var(--p_color_theme_dark_a_underline_s);}
div.tutorial.dark > p > i{background-color:var(--p_color_theme_dark_i_bg);}
div.tutorial.dark sup{color:var(--p_color_theme_dark_sup);}
div.tutorial.dark sup:hover{color:var(--p_color_theme_dark_sup_s_end);}
div.tutorial.dark sup[def^="ref_"]:hover{color:var(--p_color_theme_dark_sup_s_in);}
div.tutorial.dark > pre{background-color:var(--p_color_theme_dark_pre_bg);color:var(--p_color_theme_dark_pre_text);}
div.tutorial.dark > pre::selection {color: var(--p_color_theme_dark_pre_select_text); background-color: var(--p_color_theme_dark_pre_select_bg);}
div.tutorial.dark > ul, div.tutorial.dark > ol{color:var(--p_color_theme_dark_p);}
/* Project content theme settings End. */

/* Project content widget section Start. */
div.tutorial > div[def="description"]{position:relative;width:var(--p_con_tut_desc_w);height:var(--p_con_tut_desc_h);background-color:var(--p_color_con_desc_bg);border:var(--p_con_tut_desc_bor) solid var(--p_color_con_desc_bor);border-radius:1em;margin:auto;padding:var(--p_con_tut_desc_pad_l);padding-top:var(--p_con_tut_desc_pad_t);padding-bottom:var(--p_con_tut_desc_pad_t);text-align:center;align-content:center;overflow:hidden;}
div.tutorial > div[def="description"] > p{font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--p_con_tut_desc_f_s);letter-spacing:.1em;line-height:120%;color:var(--p_color_con_desc_text);}
div.tutorial > div[def="description"]::before{content:"";position:absolute;top:0;left:.4em;width:var(--p_con_tut_desc_quotation_w);height:var(--p_con_tut_desc_quotation_w);background-color:transparent;background-image:url("../images/project_content_desc_quatation_logo_left.png");background-size:100% auto;background-position:50% 50%;background-repeat:no-repeat;}
div.tutorial > div[def="description"]::after{content:"";position:absolute;bottom:0;right:.4em;width:var(--p_con_tut_desc_quotation_w);height:var(--p_con_tut_desc_quotation_w);background-color:transparent;background-image:url("../images/project_content_desc_quatation_logo_right.png");background-size:100% auto;background-position:50% 50%;background-repeat:no-repeat;}

div.tutorial > div[def="keywords"]{position:relative;width:var(--p_con_tut_info_w);height:auto;background-color:var(--p_color_con_keyw_bg);box-sizing:border-box;border:var(--p_con_tut_info_bor) solid var(--p_color_con_keyw_bor);border-radius:.5em;margin:auto;margin-top:var(--p_con_tut_info_pad);padding:1em;padding-top:var(--p_con_tut_info_pad);scroll-margin-top:var(--p_con_tut_info_scroll_t_mar);}
div.tutorial > div[def="keywords"] > span{position:absolute;top:var(--p_con_tut_info_header_t);left:var(--p_con_tut_info_header_l);width:var(--p_con_tut_info_header_w);height:var(--p_con_tut_info_header_h);background-color:var(--p_color_con_keyw_header_bg);box-sizing:border-box;border:var(--p_con_tut_info_bor) solid var(--p_color_con_keyw_header_bor);border-radius:.3em;font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--p_con_tut_info_header_f_s);letter-spacing:.1em;color:var(--p_color_con_keyw_header_text);align-content:center;margin:0;padding:0;padding-left:var(--p_con_tut_info_header_logo_pad);}
div.tutorial > div[def="keywords"] > span::after{content:"";position:absolute;top:var(--p_con_tut_info_header_logo_t);left:.2em;width:var(--p_con_tut_info_header_logo_h);height:var(--p_con_tut_info_header_logo_h);background-color:var(--p_color_con_keyw_header_logo_bg);background-image:url("../images/project_content_keyword_logo.png");background-size:auto 100%;background-position:50% 50%;background-repeat:no-repeat;box-sizing:border-box;border:var(--p_con_tut_info_header_logo_bor) solid var(--p_color_con_keyw_header_logo_bor);border-radius:50%;margin:0;padding:0;}
div.tutorial > div[def="keywords"] > button{position:relative;outline:none;background-color:var(--p_color_con_keyw_button_bg);border:.2em solid var(--p_color_con_keyw_button_bor);border-radius:.5em;padding:.4em;margin-right:var(--p_con_tut_info_button_pad);margin-bottom:var(--p_con_tut_info_button_pad);font-family: "Comic Neue", serif;font-weight:650;font-style:normal;font-size:var(--p_con_tut_info_button_f_s);color:var(--p_color_con_keyw_button_text);transition-property:background-color;}
div.tutorial > div[def="keywords"] > button:hover{background-color:var(--p_color_con_keyw_button_bg_s);cursor:url("../images/custom_project_cursor.png"), crosshair;}

div.tutorial > div[def="brands"]{position:relative;width:var(--p_con_tut_info_w);height:auto;background-color:var(--p_color_con_brand_bg);box-sizing:border-box;border:var(--p_con_tut_info_bor) solid var(--p_color_con_brand_bor);border-radius:.5em;margin:auto;margin-top:var(--p_con_tut_info_pad);padding:1em;padding-top:var(--p_con_tut_info_pad);scroll-margin-top:var(--p_con_tut_brand_scroll_t_mar);}
div.tutorial > div[def="brands"] > span{position:absolute;top:var(--p_con_tut_info_header_t);left:var(--p_con_tut_info_header_l);width:var(--p_con_tut_info_header_w);height:var(--p_con_tut_info_header_h);background-color:var(--p_color_con_brand_header_bg);box-sizing:border-box;border:var(--p_con_tut_info_bor) solid var(--p_color_con_brand_header_bor);border-radius:.3em;font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--p_con_tut_info_header_f_s);letter-spacing:.1em;color:var(--p_color_con_brand_header_text);align-content:center;margin:0;padding:0;padding-left:var(--p_con_tut_info_header_logo_pad);}
div.tutorial > div[def="brands"] > span::after{content:"";position:absolute;top:var(--p_con_tut_info_header_logo_t);left:.2em;width:var(--p_con_tut_info_header_logo_h);height:var(--p_con_tut_info_header_logo_h);background-color:var(--p_color_con_brand_header_logo_bg);background-image:url("../images/project_content_brands_logo.png");background-size:100% 100%;background-position:50% 50%;background-repeat:no-repeat;box-sizing:border-box;border:var(--p_con_tut_info_header_logo_bor) solid var(--p_color_con_brand_header_logo_bor);border-radius:50%;margin:0;padding:0;}
div.tutorial > div[def="brands"] > div{position:relative;width:100%;height:auto;display:grid;grid-auto-rows:var(--p_con_tut_info_brand_row);grid-template-columns:repeat(auto-fill, var(--p_con_tut_info_brand_column));grid-gap:var(--p_con_tut_info_brand_gap);justify-content:center;background-color:transparent;margin:0;padding:0;}
div.tutorial > div[def="brands"] > div > a{display:contents;outline:none;text-decoration:none;padding:none;}
div.tutorial > div[def="brands"] > div article{position:relative;background-color:#FFFFFF;background-size:100% 100%;background-position:50% 50%;background-repeat:no-repeat;box-sizing:border-box;border:var(--p_con_tut_info_brand_bor) solid var(--p_color_con_brand_obj_bor);border-radius:50%;overflow:hidden;transition-property:border;}
div.tutorial > div[def="brands"] > div article:hover{cursor:pointer;border-color:var(--p_color_con_brand_obj_bor_s);}
div.tutorial > div[def="brands"] > div article:hover::after{content:"Inspect";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--p_color_con_brand_obj_over);font-family:"Lato", serif;font-weight:650;font-size:var(--p_con_tut_info_brand_overlay_f_s);letter-spacing:.05em;color:var(--p_color_con_brand_obj_over_t);text-align:center;align-content:center;}
div.tutorial > div[def="brands"] > div article.elecrow{background-image:url("../images/brand/elecrow_logo_s.jpg");}
div.tutorial > div[def="brands"] > div article.dfrobot{background-image:url("../images/brand/dfrobot_logo_s.avif");}
div.tutorial > div[def="brands"] > div article.lattepanda{background-image:url("../images/brand/lattepanda_logo_s.avif");background-size:80% auto;}
div.tutorial > div[def="brands"] > div article.anycubic{background-image:url("../images/brand/anycubic_logo_s.avif");background-size:65% auto;}
div.tutorial > div[def="brands"] > div article.seeed_studio{background-image:url("../images/brand/seeed_logo_s.avif");}
div.tutorial > div[def="brands"] > div article.pcbway{background-image:url("../images/brand/pcbway_logo_s.avif");}
div.tutorial > div[def="brands"] > div article.creality{background-image:url("../images/brand/creality_logo_s.jpg");}
div.tutorial > div[def="brands"] > div article.wiznet{background-image:url("../images/brand/wiznet_logo_s.avif");background-size:90% auto;}
div.tutorial > div[def="brands"] > div article.neuton{background-image:url("../images/brand/neuton_logo_s.avif");background-size:85% auto;}
div.tutorial > div[def="brands"] > div article.sony{background-image:url("../images/brand/sony_logo_s.avif");}
div.tutorial > div[def="brands"] > div article.ez-robot{background-image:url("../images/brand/ezrobot_logo_s.avif");background-size:70% auto;}
div.tutorial > div[def="brands"] > div article.tuya{background-image:url("../images/brand/tuya_logo_s.png");}
div.tutorial > div[def="brands"] > div article.tuya_iot_platform{background-image:url("../images/brand/tuya_logo_s.png");}
div.tutorial > div[def="brands"] > div article.digitspace{background-image:url("../images/brand/digitspace_logo_s.avif");}
div.tutorial > div[def="brands"] > div article.jlcpcb{background-color:#08162B;background-image:url("../images/brand/jlcpcb_logo_s.avif");background-size:85% auto;}
div.tutorial > div[def="brands"] > div article.edge_impulse{background-image:url("../images/brand/edge_impulse_logo_s.png");background-size:100% auto;}
div.tutorial > div[def="brands"] > div article.arduino{background-image:url("../images/brand/arduino_logo_s.avif");background-size:90% auto;}
div.tutorial > div[def="brands"] > div article.raspberry_pi{background-image:url("../images/brand/raspberry_pi_logo_s.avif");}
div.tutorial > div[def="brands"] > div article.mit_app_inventor_2{background-image:url("../images/brand/mit_app_inventor_logo_s.png");background-size:100% auto;}
div.tutorial > div[def="brands"] > div article.opencv{background-image:url("../images/brand/opencv_logo_s.avif");background-size:100% auto;}
div.tutorial > div[def="brands"] > div article.autodesk_fusion_360{background-image:url("../images/brand/autodesk_fusion_360_logo_s.avif");background-size:auto 70%;}
div.tutorial > div[def="brands"] > div article.kicad{background-image:url("../images/brand/kicad_logo_s.png");background-size:90% auto;}
div.tutorial > div[def="brands"] > div article.esp8266{background-image:url("../images/brand/espressif_logo_s.png");background-size:95% auto;}
div.tutorial > div[def="brands"] > div article.nodemcu{background-image:url("../images/brand/espressif_logo_s.png");background-size:95% auto;}
div.tutorial > div[def="brands"] > div article.esp-wroom-32{background-image:url("../images/brand/espressif_logo_s.png");background-size:95% auto;}
div.tutorial > div[def="brands"] > div article.theamplituhedron_iot_services{background-image:url("../images/brand/theamplituhedron_logo_s.png");}
div.tutorial > div[def="brands"] > div article.theamplituhedron_data_panel{background-image:url("../images/brand/theamplituhedron_logo_s.png");}
div.tutorial > div[def="brands"] > div article.twilio{background-image:url("../images/brand/twilio_logo_s.avif");}
div.tutorial > div[def="brands"] > div article.telegram{background-image:url("../images/brand/telegram_logo_s.png");}
div.tutorial > div[def="brands"] > div article.tensorflow{background-image:url("../images/brand/tensorflow_logo_s.png");background-size:90% auto;}
div.tutorial > div[def="brands"] > div article.rplidar{background-image:url("../images/brand/rplidar_logo_s.png");background-size:120% auto;}
div.tutorial > div[def="brands"] > div article.reyax{background-image:url("../images/brand/reyax_logo_s.jpg");background-size:120% auto;}
div.tutorial > div[def="brands"] > div article.qubitro{background-image:url("../images/brand/qubitro_logo_s.png");background-size:auto 90%;}
div.tutorial > div[def="brands"] > div article.openmv{background-image:url("../images/brand/openmv_logo_s.png");background-size:auto 90%;}
div.tutorial > div[def="brands"] > div article.synthiam{background-image:url("../images/brand/synthiam_logo_s.jpg");}
div.tutorial > div[def="brands"] > div article.blynk{background-image:url("../images/brand/blynk_logo_s.png");background-size:auto 70%;}
div.tutorial > div[def="brands"] > div article.blues_wireless{background-image:url("../images/brand/blues_logo_s.avif");background-size:auto 80%;}
div.tutorial > div[def="brands"] > div article.sensecap{background-image:url("../images/brand/sensecap_logo_s.png");background-size:auto 80%;}
div.tutorial > div[def="brands"] > div article.nucleo-144{background-image:url("../images/brand/stm32_logo_s.png");background-size:90% auto;}
div.tutorial > div[def="brands"] > div article.chatgpt{background-image:url("../images/brand/chatgpt_logo_s.jpg");background-size:120% auto;}
div.tutorial > div[def="brands"] > div article.brevo{background-image:url("../images/brand/brevo_logo_s.png");background-size:auto 80%;}
div.tutorial > div[def="brands"] > div article.nvidia,
div.tutorial > div[def="brands"] > div article.nvidia_tao,
div.tutorial > div[def="brands"] > div article.nvidia_omniverse{background-image:url("../images/brand/nvidia_logo_s.png");background-size:75% auto;}
div.tutorial > div[def="brands"] > div article.unihiker{background-image:url("../images/brand/unihiker_logo_s.png");background-size:75% auto;}
div.tutorial > div[def="brands"] > div article.particle{background-color:#00334E;background-image:url("../images/brand/particle_logo_s.avif");background-size:85% auto;}
div.tutorial > div[def="brands"] > div article.ttn_network{background-color:#FFFFFF;background-image:url("../images/brand/ttn_network_logo_s.avif");background-size:80% auto;}
div.tutorial > div[def="brands"] > div article.ttn_stack{background-color:#FFFFFF;background-image:url("../images/brand/ttn_stack_logo_s.png");background-size:95% auto;}
div.tutorial > div[def="brands"] > div article.bambulab{background-color:#FFFFFF;background-image:url("../images/brand/bambulab_logo_s.png");background-size:auto 95%;}
div.tutorial > div[def="brands"] > div article.ollama{background-color:#FFFFFF;background-image:url("../images/brand/ollama_logo_s.png");background-size:auto 80%;}


div.tutorial > div[def="hardware"]{position:relative;width:var(--p_con_tut_info_w);height:auto;background-color:var(--p_color_con_hard_bg);box-sizing:border-box;border:var(--p_con_tut_info_bor) solid var(--p_color_con_hard_bor);border-radius:.5em;margin:auto;margin-top:var(--p_con_tut_info_pad);padding:1em;padding-top:var(--p_con_tut_info_pad);scroll-margin-top:var(--p_con_tut_hardware_scroll_t_mar);}
div.tutorial > div[def="hardware"] > span{position:absolute;top:var(--p_con_tut_info_header_t);left:var(--p_con_tut_info_header_l);width:var(--p_con_tut_info_header_w);height:var(--p_con_tut_info_header_h);background-color:var(--p_color_con_hard_header_bg);box-sizing:border-box;border:var(--p_con_tut_info_bor) solid var(--p_color_con_hard_header_bor);border-radius:.3em;font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--p_con_tut_info_header_f_s);letter-spacing:.1em;color:var(--p_color_con_hard_header_text);align-content:center;margin:0;padding:0;padding-left:var(--p_con_tut_info_header_logo_pad);}
div.tutorial > div[def="hardware"] > span::after{content:"";position:absolute;top:var(--p_con_tut_info_header_logo_t);left:.2em;width:var(--p_con_tut_info_header_logo_h);height:var(--p_con_tut_info_header_logo_h);background-color:var(--p_color_con_hard_header_logo_bg);background-image:url("../images/project_content_hardware_logo.png");background-size:auto 95%;background-position:50% 50%;background-repeat:no-repeat;box-sizing:border-box;border:var(--p_con_tut_info_header_logo_bor) solid var(--p_color_con_hard_header_logo_bor);border-radius:50%;margin:0;padding:0;}
div.tutorial > div[def="hardware"] > ul{position:relative;list-style-type:none;width:100%;height:auto;background-color:transparent;box-sizing:border-box;margin-bottom:0;font-family:"Playfair Display", serif;font-optical-sizing:auto;font-weight:700;font-style:normal;font-size:var(--p_con_tut_hardware_li_f_s);padding:0;}
div.tutorial > div[def="hardware"] > ul li{position:relative;width:100%;height:var(--p_con_tut_hardware_li_h);background-color:var(--p_color_con_hard_li_bg);box-sizing:border-box;border-radius:.5em;color:var(--p_color_con_hard_li_text);letter-spacing:.1em;align-content:center;padding-left:var(--p_con_tut_hardware_li_pad_l);padding-right:var(--p_con_tut_hardware_li_pad_r);margin-bottom:var(--p_con_tut_hardware_li_f_s);overflow:hidden;transition-property:transform;}
div.tutorial > div[def="hardware"] > ul li:last-child{margin-bottom:0;}
div.tutorial > div[def="hardware"] > ul li::after{content:"";position:absolute;top:var(--p_con_tut_hardware_logo_t);left:var(--p_con_tut_hardware_logo_l);width:var(--p_con_tut_hardware_logo_h);height:var(--p_con_tut_hardware_logo_h);background-color:var(--p_color_con_hard_li_logo_bg);background-image:url("../images/project_content_hardware_li_logo.png");background-size:90% auto;background-position:50% 50%;background-repeat:no-repeat;box-sizing:border-box;border:var(--p_con_tut_hardware_logo_bor) solid var(--p_color_con_hard_li_logo_bor);border-radius:50%;padding:0;}
div.tutorial > div[def="hardware"] > ul li:hover{transform:scale(1.1);background-color:var(--p_color_con_hard_li_bg_s);cursor:url("../images/custom_project_cursor.png"), crosshair;}
div.tutorial > div[def="hardware"] > ul li > span{position:absolute;top:0;right:0;width:var(--p_con_tut_hardware_li_h);height:var(--p_con_tut_hardware_li_h);font-family:"Lato", serif;font-weight:750;font-size:var(--p_con_tut_hardware_f_s);background-color:var(--p_color_con_hard_li_span_bg);box-sizing:border-box;color:var(--p_color_con_hard_li_span_text);text-align:center;align-content:center;padding:0;margin:0;}

div.tutorial > div[def="hardware"].software{margin-bottom:5em;}
div.tutorial > div[def="hardware"].software a{outline:none;text-decoration:none;padding:0;}
div.tutorial > div[def="hardware"].software > span::after{background-color:var(--p_color_con_soft_header_logo_bg);background-image:url("../images/project_content_software_logo.png");background-size:auto 90%;}
div.tutorial > div[def="hardware"].software > ul > a > li{margin-bottom:var(--p_con_tut_hardware_li_f_s);}
div.tutorial > div[def="hardware"].software > ul > a:last-child > li{margin-bottom:0;}
div.tutorial > div[def="hardware"].software > ul li::after{background-color:var(--p_color_con_soft_li_logo_bg);background-image:url("../images/project_content_software_li_logo.png");background-size:80% auto;border-color:var(--p_color_con_soft_li_logo_bor);}
div.tutorial > div[def="hardware"].software > ul li:hover{cursor:pointer;}

div.tutorial > div[def="hardware"].c_assets{margin-bottom:calc(var(--p_con_tut_h1_logo_h) * 1.5);margin-top:calc(var(--p_con_tut_h1_logo_h) * 1.5);}
div.tutorial > div[def="hardware"].c_assets a{outline:none;text-decoration:none;padding:0;}
div.tutorial > div[def="hardware"].c_assets > span::after{background-color:var(--p_color_con_assets_header_logo_bg);background-image:url("../images/project_content_assets_logo.png");background-size:auto 80%;}
div.tutorial > div[def="hardware"].c_assets > ul > a > li{margin-bottom:var(--p_con_tut_hardware_li_f_s);}
div.tutorial > div[def="hardware"].c_assets > ul > a:last-child > li{margin-bottom:0;}
div.tutorial > div[def="hardware"].c_assets > ul li::after{background-color:var(--p_color_con_assets_li_logo_bg);background-image:url("../images/project_content_assets_li_logo.png");background-size:auto 150%;border-color:var(--p_color_con_assets_li_logo_bor);}
div.tutorial > div[def="hardware"].c_assets > ul li:hover{cursor:pointer;}

div.tutorial > div[def="keywords"] > button,
div.tutorial > div[def="brands"] > div article
{transition-duration: .25s; transition-timing-function: ease-in-out;}

div.tutorial > div[def="hardware"] > ul li
{transition-duration: 1s; transition-timing-function: var(--elastic-easing);}

/* Responsive screen configurations. */
@media screen and (max-width: 1100px){
	:root{
	    --p_con_tut_desc_h: 8em;
		--p_con_tut_desc_pad_t: 1.5em;	
	}
}
@media screen and (max-width: 950px){
	:root{
		--p_con_tut_hardware_li_h: 2.5em; --p_con_tut_hardware_li_f_s: calc(var(--p_con_tut_hardware_li_h) / 3);
		--p_con_tut_hardware_li_pad_r: calc(var(--p_con_tut_hardware_li_h) + 1em);
		--p_con_tut_hardware_li_pad_l: calc(var(--p_con_tut_hardware_li_h) + .5em);
		--p_con_tut_hardware_logo_h: calc(var(--p_con_tut_hardware_li_h) - .5em); --p_con_tut_hardware_logo_bor: .2em;
		--p_con_tut_hardware_logo_t: calc(50% - (var(--p_con_tut_hardware_logo_h) / 2));
		--p_con_tut_hardware_logo_l: .25em;
	}
}
@media screen and (max-width: 900px){
	:root{
		--p_con_tut_info_header_h: 4em;
		--p_con_tut_info_header_l: 1em;
		--p_con_tut_info_pad: calc((var(--p_con_tut_info_header_h) / 2) + 1em);
		
		--p_con_tut_info_brand_row: 5em;
	}
}
@media screen and (max-width: 750px){
	:root{
		--p_con_tut_w: 100%;
		
		--p_con_tut_info_button_f_s: .9em;
		--p_con_tut_info_button_pad: .3em;
	}
}
@media screen and (max-width: 450px){
	:root{
	    --p_con_tut_desc_h: 6em;
		--p_con_tut_desc_pad_t: 1em;

        --p_con_tut_info_header_w: 85%;	
		
		--p_con_tut_info_brand_row: 4em;
		
		--p_con_tut_hardware_li_h: 2.5em; --p_con_tut_hardware_li_f_s: calc(var(--p_con_tut_hardware_li_h) / 5);
		--p_con_tut_hardware_logo_h: calc(var(--p_con_tut_hardware_li_h) - .2em); --p_con_tut_hardware_logo_bor: .1em;
		--p_con_tut_hardware_logo_l: .1em;
	}
}
/* Project content widget section End. */

/* Project content coding section Start. */
div.tutorial > div.coding_showcase{position:relative;width:100%;height:var(--p_con_tut_code_h);background-color:transparent;border-radius:.5em;filter:drop-shadow(.2em .2em .35em var(--p_color_code_drop_s));overflow:hidden;}
div.coding_showcase > div:nth-child(1){position:absolute;top:0;left:0;width:var(--p_con_tut_code_names_w);height:var(--p_con_tut_code_names_h);background-color:var(--p_color_code_names_bg);box-sizing:border-box;padding:0;margin:0;overflow:hidden;}
div.coding_showcase > div:nth-child(1) > h2{width:100%;height:var(--p_con_tut_code_names_h2_h);background-color:var(--p_color_code_names_h2_bg);font-family:"Lato", serif;font-weight:750;font-size:var(--p_con_tut_code_names_h2_f_s);letter-spacing:.1em;text-align:center;align-content:center;color:var(--p_color_code_names_h2_text);margin:0;}
div.coding_showcase > div:nth-child(1) > h2::after{content:"▼";display:inline-block;color:var(--p_color_code_names_h2_logo);padding-left:.2em;animation-name:code_select_logo;animation-duration:.5s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;}

@keyframes code_select_logo{
	0%, 50%, 100% {transform:translateY(0);}
	25% {transform:translateY(.15em);}
	75% {transform:translateY(-0.15em);}
}

div.coding_showcase > div:nth-child(1) > ul{width:100%;height:var(--p_con_tut_code_names_ul_h);display:block;list-style-type:none;font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--p_con_tut_code_names_ul_f_s);letter-spacing:.1em;color:var(--p_color_code_names_ul_text);box-sizing:border-box;padding-right:.5em;padding-top:.5em;padding-bottom:.5em;margin:0;overflow-y:auto;}
div.coding_showcase > div:nth-child(1) > ul > li{position:relative;background-color:var(--p_color_code_names_ul_li_bg);overflow-wrap:break-word;box-sizing:border-box;border-radius:.5em;padding:var(--p_con_tut_code_names_li_pad_n);padding-left:var(--p_con_tut_code_names_li_pad_l);margin-bottom:.5em;}
div.coding_showcase > div:nth-child(1) > ul > li::before{content:"➤";position:absolute;top:0;left:0;width:var(--p_con_tut_code_names_li_logo_w);height:100%;background-color:var(--p_color_code_names_ul_li_logo_bg);border-top-left-radius:.5em;border-bottom-left-radius:.5em;color:var(--p_color_code_names_ul_li_logo_text);align-content:center;text-align:center;transition-property:transform;}
div.coding_showcase > div:nth-child(1) > ul > li:hover{background-color:var(--p_color_code_names_ul_li_bg_s);cursor:pointer;}
div.coding_showcase > div:nth-child(1) > ul > li:hover::before{transform:translateX(-1em);}
div.coding_showcase > div:nth-child(1) > ul > li.shown{background-color:var(--p_color_code_names_ul_li_bg_shown);}
div.coding_showcase > div:nth-child(1) > ul > li.shown::before{transform:translateX(-1em);}

div.coding_showcase > div:nth-child(2){position:absolute;top:0;left:var(--p_con_tut_code_files_l);width:var(--p_con_tut_code_files_w);height:var(--p_con_tut_code_files_h);background-color:var(--p_color_code_files_bg);}
div.coding_showcase > div:nth-child(2) > div{position:relative;width:100%;height:var(--p_con_tut_code_files_button_con_h);background-color:var(--p_color_code_files_but_con_bg);padding:0;margin:0;}
div.coding_showcase > div:nth-child(2) > div > a{outline:none;text-decoration:none;padding:0;}
div.coding_showcase > div:nth-child(2) > div button{outline:none;position:absolute;top:var(--p_con_tut_code_files_button_t);height:var(--p_con_tut_code_files_button_h);width:var(--p_con_tut_code_files_button_w);box-sizing:border-box;border:var(--p_con_tut_code_files_button_bor) solid var(--p_color_code_files_but_download_bor);border-radius:100vw;font-family:"Lato", serif;font-weight:750;font-size:var(--p_con_tut_code_files_button_f_s);letter-spacing:.1em;padding-left:var(--p_con_tut_code_files_button_pad_l);padding-right:var(--p_con_tut_code_files_button_pad_r);transition-property:transform;}
div.coding_showcase > div:nth-child(2) > div button[def="download_but"]{left:var(--p_con_tut_code_files_button_space);background-color:var(--p_color_code_files_but_download_bg);color:var(--p_color_code_files_but_download_text);}
div.coding_showcase > div:nth-child(2) > div button[def="github_but"]{right:var(--p_con_tut_code_files_button_space);background-color:var(--p_color_code_files_but_github_bg);border-color:var(--p_color_code_files_but_github_bor);color:var(--p_color_code_files_but_github_text);}
div.coding_showcase > div:nth-child(2) > div button::before{content:"";position:absolute;top:var(--p_con_tut_code_files_button_logo_t);left:var(--p_con_tut_code_files_button_logo_l);width:var(--p_con_tut_code_files_button_logo_w);height:var(--p_con_tut_code_files_button_logo_w);background-size:100% 100%;background-position:50% 50%;background-repeat:no-repeat;box-sizing:border-box;border-radius:50%;}
div.coding_showcase > div:nth-child(2) > div button[def="download_but"]::before{content:"➥";background-image:none;background-color:var(--p_color_code_files_but_download_logo_bg);color:var(--p_color_code_files_but_download_logo_text);text-align:center;align-content:center;}
div.coding_showcase > div:nth-child(2) > div button[def="github_but"]::before{background-image:url("../images/brand/github.svg");background-color:var(--p_color_code_files_but_github_logo_bg);}
div.coding_showcase > div:nth-child(2) > div button[def="download_but"]:hover{transform:scale(1.2) translateX(calc(var(--p_con_tut_code_files_button_pad_l) * .6));background-color:var(--p_color_code_files_but_download_bg_s);cursor:pointer;}
div.coding_showcase > div:nth-child(2) > div button[def="github_but"]:hover{transform:scale(1.2) translateX(calc(var(--p_con_tut_code_files_button_pad_l) * -0.6));background-color:var(--p_color_code_files_but_github_bg_s);cursor:pointer;}
div.coding_showcase > div:nth-child(2) > pre{width:var(--p_con_tut_code_files_pre_w);height:var(--p_con_tut_code_files_pre_h);background-color:var(--p_color_code_files_pre_bg);font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;font-size:var(--p_con_tut_p_f_s);letter-spacing:.1em;line-height:80%;color:var(--p_color_code_files_pre_text);box-sizing:border-box;margin:0;margin-left:var(--p_con_tut_code_files_pre_margin_l);padding:2em;overflow:auto;}
div.coding_showcase > div:nth-child(2) > pre::selection {color: var(--p_color_con_pre_select_text); background-color: var(--p_color_con_pre_select_bg);}

div.coding_showcase > div:nth-child(2) > div button
{transition-duration: .5s; transition-timing-function: var(--elastic-easing);}

div.coding_showcase > div:nth-child(1) > ul > li::before
{transition-duration: .25s; transition-timing-function: var(--bounce-easing);}

/* Responsive screen configurations. */
@media screen and (max-width: 1100px){
	:root{
		--p_con_tut_code_h: 85vh;
		
		--p_con_tut_code_names_w: 100%; --p_con_tut_code_names_h: 30vh;
		--p_con_tut_code_files_w: 100%; --p_con_tut_code_files_h: calc(var(--p_con_tut_code_h) - var(--p_con_tut_code_names_h));
		
	}
	div.coding_showcase > div:nth-child(1){top:0;left:0;}
	div.coding_showcase > div:nth-child(2){top:var(--p_con_tut_code_names_h);left:0;}
}
@media screen and (max-width: 820px){
	:root{
		--p_con_tut_code_names_h2_h: 2.5em;
        
        --p_con_tut_code_names_ul_f_s: .9em;		
	}
	div.coding_showcase > div:nth-child(2) > div button[def="download_but"]:hover{transform:scale(1);}
	div.coding_showcase > div:nth-child(2) > div button[def="github_but"]:hover{transform:scale(1);}	
}
@media screen and (max-width: 440px){
	:root{
		--p_con_tut_code_files_button_con_h: 4em; --p_con_tut_code_files_button_bor: .15em;
		--p_con_tut_code_files_button_h: calc(var(--p_con_tut_code_files_button_con_h) - 2.3em);
	}
	div.coding_showcase > div:nth-child(2) > div{align-content:center;}
	div.coding_showcase > div:nth-child(2) > div button{position:relative;top:auto;display:block;}
	div.coding_showcase > div:nth-child(2) > div button[def="download_but"]{left:auto;margin:auto;margin-bottom:.5em;}
	div.coding_showcase > div:nth-child(2) > div button[def="github_but"]{right:auto;margin:auto;}
}
/* Project content coding section End. */

/* Project related projects section Start. */
div.tutorial > div.related_projects{position:relative;width:100%;height:auto;background-color:var(--p_color_related_con_bg);box-sizing:border-box;border:.5em solid var(--p_color_related_con_bor);border-radius:1em;font-family:"Lato", serif;font-weight:650;padding-bottom:var(--p_related_obj_gap);margin:auto;margin-bottom:2em;}
div.related_projects a{outline:none;text-decoration:none;padding:0;}
div.related_projects article{position:relative;width:var(--p_related_obj_w);height:var(--p_related_obj_h);background-color:var(--p_color_related_obj_bg);box-sizing:border-box;border:.3em solid var(--p_color_related_obj_bor);border-radius:1em;padding:0;margin:auto;margin-top:var(--p_related_obj_gap);overflow:hidden;filter:drop-shadow(.2em .2em .35em var(--p_color_related_obj_drop_s_p));}
div.related_projects article:hover{background-color:var(--p_color_related_obj_bg_s);filter:drop-shadow(.2em .2em .35em var(--p_color_related_obj_drop_s_s));}
div.related_projects article > div:nth-child(1){position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:var(--p_related_obj_h);height:100%;background-color:var(--p_color_related_obj_img_bg);}
div.related_projects article > div:nth-child(1) > img{width:calc(100% - 1em);height:auto;}
div.related_projects article > div:nth-child(2){position:absolute;top:0;left:var(--p_related_obj_h);width:var(--p_related_obj_text_w);height:100%;background-color:transparent;box-sizing:border-box;padding:.8em;overflow-y:auto;}
div.related_projects article > div:nth-child(2) > h2{font-size:var(--p_related_obj_header_f_s);color:var(--p_color_related_obj_h);letter-spacing:.1em;line-height:120%;padding:0;margin:0;margin-bottom:.8em;}
div.related_projects article > div:nth-child(2) > p{font-size:var(--p_related_obj_text_f_s);color:var(--p_color_related_obj_t);letter-spacing:.1em;line-height:120%;padding:0;margin:0;}

/* Responsive screen configurations. */
@media screen and (max-width: 1100px){
	:root{
		--p_related_obj_header_f_s: 1.2em;
		--p_related_obj_text_f_s: .9em;
	}
}
@media screen and (max-width: 850px){
	:root{	
		--p_related_obj_w: 40vw; --p_related_obj_h: calc(var(--p_related_obj_w) * 2); 
		--p_related_obj_header_f_s: 1.2em;
		--p_related_obj_text_f_s: .9em;
	}
	div.related_projects article > div:nth-child(1){height:var(--p_related_obj_w);width:100%;}
	div.related_projects article > div:nth-child(2){top:var(--p_related_obj_w);left:0;width:100%;height:var(--p_related_obj_w);}
}
@media screen and (max-width: 750px){
	:root{
		--p_related_obj_w: 70vw;
		--p_related_obj_header_f_s: 1.8em;
		--p_related_obj_text_f_s: 1.2em;
	}
}
@media screen and (max-width: 500px){
	:root{
		--p_related_obj_header_f_s: 1.2em;
		--p_related_obj_text_f_s: .9em;
	}	
}
/* Project related projects section End. */

/* Project other platforms section Start. */
div.tutorial > div.other_platforms{position:relative;width:var(--p_platform_con_w);max-width:var(--p_platform_con_w);display:grid;grid-auto-rows:var(--p_platform_row);grid-template-columns:repeat(auto-fill, var(--p_platform_column));grid-gap:var(--p_platform_gap);justify-content:center;background-color:var(--p_color_platform_bg);border-radius:var(--p_platform_gap);padding-top:var(--p_platform_gap);padding-bottom:var(--p_platform_gap);margin:auto;margin-bottom:calc(var(--p_con_tut_h1_logo_h) * 1.5);margin-top:calc(var(--p_con_tut_h1_logo_h) * 1);filter:drop-shadow(.2em .15em .5em var(--p_color_platform_d_s));transition-property:filter;}
div.other_platforms a{display:contents;outline:none;text-decoration:none;padding:0;}
div.other_platforms article{position:relative;background-color:transparent;background-size:100% 100%;background-position:50% 50%;background-repeat:no-repeat;border:var(--p_platform_obj_bor) solid var(--p_color_platform_bor);border-radius:50%;overflow:hidden;}
div.other_platforms article[def="hackster"]{background-image:url("../images/brand/hackster.jpg");}
div.other_platforms article[def="hackaday"]{background-color:#000000;background-size:auto 85%;background-image:url("../images/brand/hackaday_logo.png");}
div.other_platforms article[def="instructables"]{background-color:#FFFFFF;background-size:auto 95%;background-image:url("../images/brand/instructables_logo.png");}
div.other_platforms article:hover{border-color:var(--p_color_platform_bor_s);cursor:pointer;}
div.other_platforms article:hover::after{content:"View Project";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--p_color_platform_over_bg);font-family:"Lato", serif;font-weight:650;font-size:calc(var(--p_platform_row) / 6);letter-spacing:.1em;color:var(--p_color_platform_over_text);box-sizing:border-box;padding-right:.2em;padding-left:.2em;align-content:center;text-align:center;}
div.other_platforms:has(article:hover){filter:drop-shadow(.2em .15em .5em var(--p_color_platform_d_s_s));}

div.other_platforms
{transition-duration: .25s; transition-timing-function: ease-in-out;}

/* Responsive screen configurations. */
@media screen and (max-width: 500px){
	:root{
		--p_platform_row: 8em;
		--p_platform_obj_bor: .15em;
	}
}
/* Project other platforms section End. */

/* Project side nav bar section Start. */
.project_content > div.side_navigation_bar{position:sticky;top:0;right:0;float:right;width:var(--p_side_nav_w);height:var(--p_side_nav_h);background-color:transparent;box-sizing:border-box;padding:0;margin:0;justify-items:center;align-content:center;}

.project_content > div.side_navigation_bar > article{position:relative;width:var(--p_side_nav_inner_w);height:var(--p_side_nav_inner_h);background-color:var(--p_color_side_nav_bg);box-sizing:border-box;border-radius:1em;padding:0;padding-top:var(--p_side_nav_obj_gap);margin:auto;filter:drop-shadow(.2em .2em .45em var(--p_color_side_nav_d_s));}
div.side_navigation_bar > article > div.image_container{position:relative;width:var(--p_side_nav_img_con_w);height:var(--p_side_nav_img_con_h);background-color:var(--p_color_side_nav_img_con_bg);box-sizing:border-box;margin:auto;padding:0;text-align:center;align-content:center;}
div.side_navigation_bar > article > div.image_container > img{height:90%;width:auto;max-width:90%;object-fit:contain;padding:0;}

div.side_navigation_bar > article > div.theme_container{position:relative;width:var(--p_side_nav_theme_con_w);height:auto;background-color:var(--p_color_side_nav_theme_bg);padding:0;margin:auto;margin-top:var(--p_side_nav_obj_gap);}
div.side_navigation_bar > article > div.theme_container > h1{font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--p_side_nav_theme_h1_f_s);letter-spacing:.1em;color:var(--p_color_side_nav_theme_h1);margin:0;margin-bottom:var(--p_side_nav_obj_gap);padding:0;padding-top:var(--p_side_nav_obj_gap);padding-left:var(--p_side_nav_theme_gap);}
div.side_navigation_bar > article > div.theme_container > h1::after{content:"▼";display:inline-block;color:var(--p_color_side_nav_theme_h1_logo);padding-left:.35em;animation-name:select_theme;animation-duration:.5s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;}

@keyframes select_theme{
	0%, 50%, 100% {transform:translateY(0);}
	25% {transform:translateY(.2em);}
	75% {transform:translateY(-0.05em);}
}

div.side_navigation_bar > article > div.theme_container > div{z-index:3;position:relative;width:var(--p_side_nav_theme_con_w);max-width:var(--p_side_nav_theme_con_w);display:grid;grid-auto-rows:var(--p_side_nav_theme_row);grid-template-columns:repeat(auto-fill, var(--p_side_nav_theme_column));grid-gap:var(--p_side_nav_theme_gap);justify-content:center;background-color:var(--p_color_side_nav_theme_inner_bg);box-sizing:border-box;padding:0;padding-top:var(--p_side_nav_theme_gap);padding-bottom:var(--p_side_nav_theme_gap);}
div.side_navigation_bar > article > div.theme_container > div > article{position:relative;background-size:100% 100%;background-position:50% 50%;background-repeat:no-repeat;box-sizing:border-box;border:var(--p_side_nav_theme_obj_bor) solid var(--p_color_side_nav_theme_obj_bor);border-radius:50%;transition-property:transform;}
div.side_navigation_bar > article > div.theme_container > div > article[def="default"]{background-image:url("../images/project_content_nav_theme_logo_spring.png");}
div.side_navigation_bar > article > div.theme_container > div > article[def="light"]{background-image:url("../images/project_content_nav_theme_logo_summer.png");}
div.side_navigation_bar > article > div.theme_container > div > article[def="sepia"]{background-image:url("../images/project_content_nav_theme_logo_fall.png");}
div.side_navigation_bar > article > div.theme_container > div > article[def="dark"]{background-image:url("../images/project_content_nav_theme_logo_winter.png");}
div.side_navigation_bar > article > div.theme_container > div > article:hover{border-color:var(--p_color_side_nav_theme_obj_bor_s);cursor:pointer;transform:scale(1.2);}
div.side_navigation_bar > article > div.theme_container > div > article:hover::after{content:"";position:absolute;top:var(--p_side_nav_theme_logo_t);left:var(--p_side_nav_theme_logo_l);width:var(--p_side_nav_theme_logo_w);height:var(--p_side_nav_theme_logo_h);background-color:transparent;box-sizing:border-box;border:var(--p_side_nav_theme_logo_bor) solid transparent;border-radius:100vw;font-family: "Comic Neue", serif;font-weight:650;font-style:normal;color:transparent;font-size:var(--p_side_nav_theme_logo_f_s);padding:0;margin:0;text-align:center;align-content:center;}
div.side_navigation_bar > article > div.theme_container > div > article[def="default"]:hover::after{content:"Default";background-color:var(--p_color_con_tut_bg);border-color:var(--p_color_con_p);color:var(--p_color_con_p);}
div.side_navigation_bar > article > div.theme_container > div > article[def="light"]:hover::after{content:"Light";background-color:var(--p_color_theme_lig_bg);border-color:var(--p_color_theme_lig_p);color:var(--p_color_theme_lig_p);}
div.side_navigation_bar > article > div.theme_container > div > article[def="sepia"]:hover::after{content:"Sepia";background-color:var(--p_color_theme_sepia_bg);border-color:var(--p_color_theme_sepia_p);color:var(--p_color_theme_sepia_p);}
div.side_navigation_bar > article > div.theme_container > div > article[def="dark"]:hover::after{content:"Dark";background-color:var(--p_color_theme_dark_bg);border-color:var(--p_color_theme_dark_p);color:var(--p_color_theme_dark_p);}
div.side_navigation_bar > article > div.theme_container > div > article.active{border-color:var(--p_color_side_nav_theme_obj_bor_s);}

div.side_navigation_bar > article > ul{z-index:2;list-style-type:none;width:95%;height:var(--p_side_nav_ul_h);background-color:var(--p_color_side_nav_ul_bg);box-sizing:border-box;border-radius:.5em;padding:1em;margin:auto;margin-top:var(--p_side_nav_obj_gap);overflow-y:auto;}
div.side_navigation_bar > article a{outline:none;text-decoration:none;padding:0;}
div.side_navigation_bar > article > ul li{position:relative;font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--p_side_nav_ul_li_f_s);letter-spacing:.1em;background-color:var(--p_color_side_nav_li_bg);color:var(--p_color_side_nav_li_text);box-sizing:border-box;border-radius:.5em;padding:var(--p_side_nav_ul_li_pad_n);padding-left:var(--p_side_nav_ul_li_pad_l);margin-bottom:.5em;}
div.side_navigation_bar > article > ul li::before{content:"➤";position:absolute;top:0;left:0;width:var(--p_side_nav_ul_li_logo_w);height:100%;background-color:var(--p_color_side_nav_li_logo_bg);color:var(--p_color_side_nav_li_logo_text);box-sizing:border-box;border-top-left-radius:.5em;border-bottom-left-radius:.5em;align-content:center;text-align:center;transition-property:transform;}
div.side_navigation_bar > article > ul li:hover{background-color:var(--p_color_side_nav_li_bg_s);cursor:pointer;}
div.side_navigation_bar > article > ul li:hover::before{transform:translateX(-0.5em);}
div.side_navigation_bar > article > ul li.active{background-color:var(--p_color_side_nav_li_bg_s);}
div.side_navigation_bar > article > ul li.active::before{transform:translateX(-0.5em);}

div.side_navigation_bar > span{position:absolute;top:var(--p_side_nav_obj_gap);left:var(--p_side_nav_mobile_span_l);display:none;width:var(--p_side_nav_mobile_span_w);height:var(--p_side_nav_mobile_span_h);background-color:var(--p_color_side_nav_span_bg);box-sizing:border-box;border-radius:100vw;box-shadow:.15em .2em var(--p_color_side_nav_span_box_s);font-family:"Lato", serif;font-weight:650;font-size:var(--p_side_nav_mobile_span_f_s);color:var(--p_color_side_nav_span_text);padding:0;margin:0;text-align:center;align-content:center;transition-property:transform;cursor:pointer;}
div.side_navigation_bar > span:active{background-color:var(--p_color_side_nav_span_bg_s);box-shadow:.1em .15em var(--p_color_side_nav_span_box_s_s);transform:translate(.15em, .35em);}
div.side_navigation_bar > span::after{content:"▼";display:inline-block;color:var(--p_color_side_nav_span_logo_text);padding-left:.45em;animation-name:toggle_side_nav_bar;animation-duration:.6s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;}

@keyframes toggle_side_nav_bar{
	0%, 50%, 100% {transform:translateY(0);}
	25% {transform:translateY(.1em);}
	75% {transform:translateY(-0.15em);}
}

.project_content > div.side_navigation_bar.mobile_active{height:var(--p_side_nav_h);background-color:var(--p_color_side_nav_over_bg_s);}
div.side_navigation_bar.mobile_active > span::after{content:"▲";}

div.side_navigation_bar > article > div.theme_container > div > article
{transition-duration: 1s; transition-timing-function: var(--elastic-easing);}

div.side_navigation_bar > span
{transition-duration: .45s; transition-timing-function: var(--elastic-easing);}

div.side_navigation_bar > article > ul li::before
{transition-duration: .25s; transition-timing-function: var(--bounce-easing);}

/* Responsive screen configurations. */
@media screen and (max-width: 750px){
	:root{
		--p_side_nav_inner_h: calc(var(--p_side_nav_h) - (2 * var(--p_side_nav_pad)) - var(--p_side_nav_mobile_span_h));
		
		--p_con_tut_h2_scroll_t_mar: calc((var(--p_con_tut_h1_logo_h) / 2) + .1em + var(--p_side_nav_mobile_span_h) + .2em);
		--p_con_tut_info_scroll_t_mar: calc((var(--p_con_tut_info_header_h) / 2) + .5em + var(--p_side_nav_mobile_span_h) + .2em);
	}
	.project_content > div.side_navigation_bar{z-index:99;left:var(--p_side_nav_mobile_l);right:auto;float:none;height:var(--p_side_nav_mobile_h);background-color:var(--p_color_side_nav_over_bg);overflow:hidden;transition-property:height;}
	.project_content > div.side_navigation_bar > article{position:absolute;top:var(--p_side_nav_mobile_inner_t);left:var(--p_side_nav_mobile_inner_l);}
	div.side_navigation_bar > span{display:block;}
	
	div.tutorial > p[id^="ref_"]{scroll-margin-top:calc(var(--p_side_nav_mobile_span_h) + .8em);}
	div.tutorial sup[def^="ref_"]{scroll-margin-top:calc(var(--p_side_nav_mobile_span_h) + (var(--p_con_tut_p_f_s) * 2));}
	
	
	.project_content > div.side_navigation_bar
	{transition-duration: 1s; transition-timing-function: var(--bounce-easing);}	
}
@media screen and (max-height: 420px){
	.project_content > div.side_navigation_bar{overflow:auto;}
	.project_content > div.side_navigation_bar > article{height:auto;}
}
/* Project side nav bar section End. */

/* HEADER Start */
.header{z-index:99;position:absolute;top:20px;width:100vw;height:auto;margin:auto;background-color:transparent;}
.header > .main_container{z-index:100;position:relative;display:block;margin:auto;width:95%;height:var(--header_main_h);background-color:var(--header_color_primary);border-radius:20px;}

.main_container > .logo_container{z-index:2;display:flex;justify-content:center;align-items:center;position:absolute;top:-0.3em;left:calc(1.5em - 0.3em);width:15em;height:100%;padding-left:.3em;padding-right:.3em;}
.main_container > .logo_container{background-color:var(--logo_background_color);background-position: 50% 50%;background-image:url('../images/main_logo.png');background-repeat:no-repeat;overflow: hidden;cursor:zoom-in;background-blend-mode:lighten;transition-property:width, height;}
.main_container > .logo_container{border:.3em solid transparent;border-image:conic-gradient(var(--logo_border_c_1) 0deg, var(--logo_border_c_1) 90deg, var(--logo_border_c_2) 90deg, var(--logo_border_c_2) 180deg, var(--logo_border_c_3) 180deg, var(--logo_border_c_3) 270deg, var(--logo_border_c_4) 270deg) 1;animation-name:logo_border;animation-duration:.5s;animation-iteration-count:infinite;}
.logo_container > img{width:100%;opacity:1;}

.logo_container:hover{width:40em;height:10em;background-blend-mode:normal;}
.logo_container:hover > img{opacity:0;}

.main_container > .logo_container
{transition-duration: .35s; transition-timing-function: var(--elastic-easing);}

@keyframes logo_border{
	0%, 100% {border-image:conic-gradient(var(--logo_border_c_1) 0deg, var(--logo_border_c_1) 90deg, var(--logo_border_c_2) 90deg, var(--logo_border_c_2) 180deg, var(--logo_border_c_3) 180deg, var(--logo_border_c_3) 270deg, var(--logo_border_c_4) 270deg) 1;}
	25%      {border-image:conic-gradient(var(--logo_border_c_4) 0deg, var(--logo_border_c_4) 90deg, var(--logo_border_c_1) 90deg, var(--logo_border_c_1) 180deg, var(--logo_border_c_2) 180deg, var(--logo_border_c_2) 270deg, var(--logo_border_c_3) 270deg) 1;}
	50%      {border-image:conic-gradient(var(--logo_border_c_3) 0deg, var(--logo_border_c_3) 90deg, var(--logo_border_c_4) 90deg, var(--logo_border_c_4) 180deg, var(--logo_border_c_1) 180deg, var(--logo_border_c_1) 270deg, var(--logo_border_c_2) 270deg) 1;}
	75%      {border-image:conic-gradient(var(--logo_border_c_2) 0deg, var(--logo_border_c_2) 90deg, var(--logo_border_c_3) 90deg, var(--logo_border_c_3) 180deg, var(--logo_border_c_4) 180deg, var(--logo_border_c_4) 270deg, var(--logo_border_c_1) 270deg) 1;}
}

.main_container > .nav_container{z-index:1;position:absolute;top:0;left:calc(15em + 1.5em);width:calc(100% - 15em - 3em);height:100%;display:flex;justify-content:right;gap:.5em;background-color:transparent;}
.nav_container div{position:relative;width:10em;display:block;background-color:transparent;}
.nav_container div:last-child{width:5em;display:none;}
.nav_container a{text-decoration:none;}
.nav_container button{height:100%;width:100%;background-color:var(--header_color_button);color:var(--header_color_text_p);font-family:"Lato", serif;font-weight:650;font-size:1em;border:none;outline:none;text-align:left;padding-left:.6em;transition-property:background-color;}
.nav_container button::after{position:absolute;top:calc(50% - (2.4em / 2));right:.6em;content:"";display:inline-block;background-color:#C3DCDD;background-image:url('../images/welcome_bar_icon.png');background-size: 100% 100%;background-position:50% 50%;background-repeat:no-repeat;width:2em;height:2em;border:.2em solid var(--header_color_button_border_p);border-radius:50%;transition-property:border;}
.nav_container button[def="projects"]::after{background-image:url('../images/projects_bar_icon.png');background-size: auto 90%;background-color:#CDEBF9;}
.nav_container button[def="publications"]::after{background-image:url('../images/publication_bar_icon.png');background-color:#424873;}
.nav_container button[def="about_me"]::after{background-image:url('../images/about_bar_icon.png');background-color:#E2F1F6;}
.nav_container button[def="mobile_bar"]::after{background-image:url('../images/mobile_menu_bar_icon.png');border:.2em solid var(--header_color_button_border_s);}
.nav_container button[def="mobile_bar"]{background-color:transparent;}

.nav_container ul{opacity:0;visibility:hidden;list-style-type:none;width:100%;background-color:var(--header_color_secondary);font-family:"Lato", serif;font-weight:400;font-size:1em;margin-top:.5em;padding:1em;border-radius:10px;transform:translate(-20%, 1rem);transition-property:opacity, visibility, transform;}
.nav_container ul li{text-align:left;margin-bottom:.3em;background-color:transparent;border:1px solid transparent;border-radius:.8rem;padding-left:.5rem;transition-property:padding-top, padding-bottom;}
.nav_container ul li::after{content:"➤";color:var(--header_color_arrow_p);padding-left:.5rem;opacity:.25;transition-property:padding-left;font-family: sans-serif;}
.nav_container ul a{text-decoration:none;color:var(--header_color_li_text);text-align:center;}

.nav_container div:hover:not(:last-child) button{cursor:pointer;background-color:var(--header_color_select);color:var(--header_color_text_s);}
.nav_container div:hover button::after{border:.2em solid var(--header_color_button_border_s);transition-property:border;}
.nav_container div:hover > ul{opacity:1;visibility:visible;transform:translate(0,0);}
.nav_container ul li:hover{background-color:var(--header_color_select);border:1px solid var(--header_color_select);padding-top:.8rem;padding-bottom:.8rem;}
.nav_container ul li:hover::after{padding-left:1rem;opacity:1;}

.nav_container button,
.nav_container button::after,
.nav_container ul
{transition-duration: .25s; transition-timing-function: ease-in-out;}
.nav_container ul li,
.nav_container ul li::after
{transition-duration: 1s; transition-timing-function: var(--elastic-easing);}

.mobile_header_side{z-index:1000;visibility:hidden;position:fixed;top:0;left:100vw;width:100%;height:100vh;background-color:var(--header_color_secondary);font-family:"Lato", serif;font-weight:750;transition-property:left, visibility;transition-duration:1s; transition-timing-function:var(--bounce-easing);}
.mobile_header_side div:not(.media_links){position:absolute;top:0;left:0;width:calc(100% - 5rem);height:100%;background-color:transparent;}
.mobile_header_side button{position:absolute;top:0;right:0;width:5rem;height:5rem;background-color:var(--header_color_button_border_s);color:transparent;border:none;outline:none;padding-top:0.3em;cursor:pointer;}
.mobile_header_side button img{width:95%;height:auto;}
.mobile_header_side a{text-decoration:none;outline:none;}
.mobile_header_side > div ul {list-style-type:none;}
.mobile_header_side > div > ul ul li{position:relative;font-size:.8em;line-height:200%;color:var(--header_color_li_text);}
.mobile_header_side > div > ul ul li::before{content:"➤";color:var(--header_color_arrow_p);padding-right:.3em;}
.mobile_header_side li.main_m_nav_button{position:relative;color:var(--header_color_select);font-size:1.2em;padding-top:.6em;padding-bottom:.6em;padding-left:.6em;}
.mobile_header_side li.main_m_nav_button::before{position:absolute;top:0.1em;left:-2em;content:"";display:inline-block;background-color:#C3DCDD;background-image:url('../images/welcome_bar_icon.png');background-size: 100% 100%;background-position:50% 50%;background-repeat:no-repeat;width:2em;height:2em;border:.2em solid var(--header_color_select);border-radius:50%;}
.mobile_header_side li.main_m_nav_button[def="projects"]::before{background-image:url('../images/projects_bar_icon.png');background-size: auto 90%;background-color:#CDEBF9;}
.mobile_header_side li.main_m_nav_button[def="publications"]::before{background-image:url('../images/publication_bar_icon.png');background-color:#424873;}
.mobile_header_side li.main_m_nav_button[def="about_me"]::before{background-image:url('../images/about_bar_icon.png');background-color:#E2F1F6;}
.mobile_header_side div.media_links{position:absolute;bottom:1em;right:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5em;width:5rem;height:calc(100% - 5rem - 2em);background-color:transparent;}
.mobile_header_side div.media_links a{text-align:center;}
.mobile_header_side div.media_links img{width:80%;}

.mobile_header_side.opened{visibility:visible;left:0;transition-duration:1s; transition-timing-function:var(--bounce-easing);}

/* Responsive screen configurations. */
@media screen and (max-width: 990px){
	.nav_container div:not(:last-child):not(:nth-child(2)){display:none;}
	.nav_container div:last-child{display:block;width:3.5em;}
	.nav_container div:last-child button::after{position:absolute;right:calc(50% - (3em/2));top:calc(50% - (3em/2));background-size: 2.6em 2.6em;width:2.6em;height:2.6em;}
}
@media screen and (max-width: 580px){
	:root{
		--main_item_spacing: 5em;
	}
	.nav_container div:not(:last-child){display:none;}
	.logo_container:hover{width:20em;height:10em;}
}
@media screen and (max-width: 369px){
	.main_container > .logo_container{width:12em;}
	.logo_container:hover{width:15em;height:10em;}
}
@media screen and (max-height: 540px){
	.mobile_header_side > div > ul ul li{font-size:.6em;}
	.mobile_header_side li.main_m_nav_button{font-size:.9em;}
	.mobile_header_side div.media_links img{width:60%;}
}
@media screen and (max-height: 430px){
	.mobile_header_side{overflow-y:auto;}
	.mobile_header_side div.media_links img{display:none;}
	.main_container > .logo_container{width:12em;}
	.logo_container:hover{width:15em;height:10em;}	
}
/* HEADER End */

/* FOOTER Start */
.main_footer{position:relative;width:100%;background-color:var(--footer_color_p);background-image:url('../images/footer_img.png');background-blend-mode:darken;background-repeat:round;font-family:"Lato", serif;font-weight:600;padding-top:2em;}
.footer{position:relative;width:var(--footer_container_w);max-width:95%;display:grid;grid-auto-rows:var(--footer_row);grid-template-columns:repeat(auto-fill, var(--footer_column));grid-gap:var(--footer_gap);justify-content:center;background-color:transparent;padding:0;margin:auto;}
.footer > div{background-color:var(--footer_color_s);border-radius:.8em;}
.footer a{text-decoration:none;outline:none;}
.footer > div ul {list-style-type:none;}
.footer > div > ul ul li{position:relative;font-size:1em;line-height:200%;color:var(--footer_color_text);margin-left:-1em;}
.footer > div > ul ul li::before{content:"➤";color:var(--footer_color_arrow_p);padding-right:.35em;transition-property:padding-right;}
.footer li.main_f_nav_button{position:relative;color:var(--footer_color_text_h_p);font-size:1.2em;padding-top:.7em;padding-bottom:.7em;padding-left:.8em;transition-property: padding-left;}
.footer li.main_f_nav_button::before{position:absolute;top:0.1em;left:-1.9em;content:"";display:inline-block;background-color:#C3DCDD;background-image:url('../images/welcome_bar_icon.png');background-size: 100% 100%;background-position:50% 50%;background-repeat:no-repeat;width:2em;height:2em;border:.2em solid var(--footer_color_text_h_p);border-radius:50%;transition-property:background-size, width, height;}
.footer li.main_f_nav_button[def="projects"]::before{background-image:url('../images/projects_bar_icon.png');background-size: auto 90%;background-color:#CDEBF9;}
.footer li.main_f_nav_button[def="publications"]::before{background-image:url('../images/publication_bar_icon.png');background-color:#424873;}
.footer li.main_f_nav_button[def="about_me"]::before{background-image:url('../images/about_bar_icon.png');background-color:#E2F1F6;}

.footer > div > ul ul li:hover::before{color:var(--footer_color_arrow_s);padding-right:1em;}
.footer li.main_f_nav_button:hover{color:var(--footer_color_text_h_s);padding-left:2em;}
.footer li.main_f_nav_button:hover::before{top:-0.4em;background-size: 3em 3em;width:3em;height:3em;border:.2em solid var(--footer_color_text_h_s);}

.footer_end{display:flex;justify-content:center;align-items:center;gap:0;width:100%;height:2em;background-color:transparent;text-align:center;overflow:hidden;padding-bottom:1em;}
.footer_end p{font-size:1.3em;color:var(--footer_color_copyr_text);}
.footer_end.social{gap:.6em;height:5em;margin-top:2em;margin-bottom:1.5em;padding-bottom:0;background-color:var(--footer_color_social_b);}
.footer_end.social img{display:block;height:4em;transition-property:height;}

.footer_end.social img:hover{display:block;height:4.3em;}

.footer > div > ul ul li::before,
.footer li.main_f_nav_button,
.footer li.main_f_nav_button::before,
.footer_end.social img
{transition-duration: 1s; transition-timing-function: var(--elastic-easing);}

/* Responsive screen configurations. */
@media screen and (max-width: 1000px){
	:root{
		--footer_container_w: calc((2 * var(--footer_column)) + (3 * var(--footer_gap)));
	}
}
@media screen and (max-width: 600px){
	:root{
		--footer_row: 15em; --footer_column: 10em;
		--footer_gap: .5em;
	}
	.footer > div > ul ul li{font-size:.6em;line-height:200%;margin-left:-1em;}
	.footer > div > ul ul li::before{padding-right:.35em;}
	.footer li.main_f_nav_button{font-size:1em;padding-top:.7em;padding-bottom:.7em;padding-left:.8em;}
	.footer li.main_f_nav_button::before{top:0.1em;left:-1.9em;background-size: 2em 2em;width:2em;height:2em;}	
	
	.footer li.main_f_nav_button:hover::before{top:-0.2em;background-size: 2.4em 2.4em;width:2.4em;height:2.4em;}
    .footer li.main_f_nav_button:hover{padding-left:1.2em;}	
	
	.footer_end{height:2em;}
	.footer_end p{font-size:.8em;}
	.footer_end.social{height:4em;}
	.footer_end.social img{height:2em;}
	.footer_end.social img:hover{height:2.3em;}
}
/* FOOTER End */

/* Loading screen Start. */
section.loading_screen{z-index:1000;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--loading_color_background);}
section.loading_screen > svg{width:85%;height:auto;background-image:url("../images/loader_logo.webp");background-size:100% 100%;background-position:50% 50%;background-repeat:no-repeat;}

section.loading_screen.loaded{display:none;}

section.loading_screen > svg .cls-1
{stroke:var(--loading_color_stroke_1);stroke-width:25px;animation-name:loading_border;animation-duration:2s;animation-iteration-count:infinite;}

@keyframes loading_border{
	0%     {stroke:var(--loading_color_stroke_1);stroke-width:1em;stroke-dashoffset:20%;stroke-dasharray:0 45%;}
	80%    {stroke:var(--loading_color_stroke_2);stroke-width:.5em;stroke-dashoffset:-20%;stroke-dasharray:45% 0;}
	100%   {stroke:var(--loading_color_stroke_3);stroke-width:.7em;stroke-dashoffset:-20%;stroke-dasharray:45% 0;}

}

/* Responsive screen configurations. */
@media screen and (max-width: 600px){
	section.loading_screen svg{width:95%;}
}
/* Loading screen End. */


/* Cursor selection. */ 
::selection {color: #E2F1F6; background-color: #2A4D70;}
/* Scrollbar settings. */ 
::-webkit-scrollbar {width:.5em;height:.5em;}
::-webkit-scrollbar-track {background-color: #408DEE;border-radius:100vw;margin-block:.5em;}
::-webkit-scrollbar-thumb {background-color: #80503A;border-radius:100vw;}
::-webkit-scrollbar-thumb:hover {background-color: #F0F0E8;}
::-webkit-scrollbar-corner{background-color:#95ACBE;}
@supports not selector(::-webkit-scrollbar){
	* {scrollbar-color:#80503A #408DEE; scrollbar-width:thin;}
}