:root{
	--color_primary_main: #323850;
	
	--header_color_primary: rgba(128,80,58,0.65); --header_color_secondary: #80503A; --header_color_select: #408DEE;
	--header_color_button: #2A4D70; --header_color_button_border_p: #EEA94F; --header_color_button_border_s: #F5C274;
	--header_color_text_p: #EEA94F; --header_color_text_s: #F5C274; --header_color_li_text: #F5C274;--header_color_arrow_p: #EEA94F; 

    --header_color_game_background: #2A4D70; --header_color_game_text_p: #95ACBE; --header_color_game_text_s: #F5C274;
	--header_color_game_text_h: #EEA94F; --header_color_game_border_p: #2A4D70; --header_color_game_border_s: #408DEE;
    --header_game_indicator_color_1: #80503A; --header_game_indicator_color_2: #A45627; --header_game_indicator_color_3: #EEA94F; --header_game_indicator_color_4: #F5C274;

    --logo_background_color: white;
	--logo_border_c_1: #7CF3FD; --logo_border_c_2: transparent; --logo_border_c_3: transparent; --logo_border_c_4: #FD9B60;
	
	--footer_color_p: rgba(0,0,0,0.65); --footer_color_s: rgba(128,80,58,0.85); --footer_color_text_h_p: #408DEE; --footer_color_text_h_s: #F0F0E8; --footer_color_text: #F5C274; --footer_color_copyr_text: #F0F0E8;
	--footer_color_social_b: rgba(238,169,79,0.65); --footer_color_arrow_p: #EEA94F; --footer_color_arrow_s: #F0F0E8;

    --loading_color_background: #323850; --loading_color_stroke_1: #7CF3FD; --loading_color_stroke_2: #066A45; --loading_color_stroke_3: #317683;

    --intro_color_background: #471C31;	--intro_color_p_text: #F0F0E8; --intro_color_p_highlight_text: #58A5CC;
	
	--intro_color_img_bor: #CAD184;
	--intro_color_img_h2_p: #CAD184; --intro_color_img_h2_s: #F0F0E8;
	
	--intro_color_button_bg_p: #33574B; --intro_color_button_bg_s: #4C8877;
	--intro_color_button_t_p: #E2F1F6; --intro_color_button_t_s: #F0F0E8;
	--intro_color_button_bor_p: #E2F1F6; --intro_color_button_bor_s: #F0F0E8;
	
	--sponsor_color_border_1: #33574B; --sponsor_color_border_2: #4C8877; --sponsor_color_border_3: #908B54; --sponsor_color_border_4: #CAD184;
	--sponsor_color_text: #F0F0E8;
	
	--card_showcase_color_p: #33574B; --card_showcase_color_s: #3357AC; --card_showcase_color_button_p: #A45627; --card_showcase_color_button_s: #EEA94F; --card_showcase_color_button_t: #E2F1F6;
    --card_showcase_color_i: #F0F0E8;
	
	
	--header_main_h: 3em;
 	--game_instructions_h: 1.5em;

    --main_section_spacing: 10px; --main_item_spacing: 10em;

	--intro_logo_size_r: 5vw; --intro_path_border: 2em; --intro_total_h: max(85vh, 450px);
	
	--intro_main_h_font_s: 1.8em; --intro_main_h_h: calc(var(--intro_main_h_font_s) * 4);
	--intro_main_h_logo_s: calc(var(--intro_main_h_h) - 0.2em);
	--intro_main_h_logo_pad: calc(var(--intro_main_h_logo_s) * 1.2);	
	--intro_main_h_logo_bor: .3em;	
	
	--intro_button_w: 80%; --intro_button_h: 4em; --intro_button_f_s: calc(var(--intro_button_h) / 2);
	--intro_button_logo_h: calc(var(--intro_button_h) - 0.5em);	
	  
	--sponsor_panel_height:500px; --sponsor_panel_spacing:6em; --sponsor_panel_brands_width:3760px; --sponsor_panel_brands_height:5em;

    --sponsor_panel_animation_padding: calc((100vw - var(--sponsor_panel_spacing) * 2) - (var(--sponsor_panel_spacing) / 2));

	--card_showcase_link_h: 3em; --card_showcase_link_w: 80%;
	--card_showcase_link_f_s: calc(var(--card_showcase_link_h) / 2);

    --footer_row: 20em; --footer_column: 15em;
	--footer_gap: .5em;
	--footer_container_w: calc((4 * var(--footer_column)) + (5 * var(--footer_gap)));

	--elastic-easing: linear(
		0, 0.2178 2.1%, 0.862 6.46%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%,
		1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%,
		0.941 24.01%, 0.8912 25.91%, 0.877 26.86%, 0.8694 27.84%, 0.8698 29.21%,
		0.8824 30.71%, 0.9066 32.36%, 0.981 36.36%, 1.0122 38.33%, 1.0357,
		1.046 42.71%, 1.0461 44.14%, 1.0416 45.7%, 0.9961 53.26%, 0.9877,
		0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1
	);

	--bounce-easing: linear(
		0 0% 0.7%, 0.001 0.8% 1.3%, 0.002 1.4% 1.7%, 0.003 1.8% 2.1%, 0.004, 0.004,
		0.005, 0.005, 0.006, 0.007, 0.007, 0.008, 0.009, 0.01, 0.01, 0.011, 0.012,
		0.013, 0.014, 0.015, 0.016, 0.017, 0.018, 0.019, 0.02, 0.021, 0.022, 0.023,
		0.024, 0.026, 0.027, 0.028, 0.03, 0.031, 0.032, 0.034, 0.035, 0.037,
		0.038 7.1%, 0.041, 0.044 7.7%, 0.046, 0.048, 0.05, 0.051 8.2%, 0.055, 0.059,
		0.063, 0.066, 0.071, 0.075, 0.079, 0.084, 0.088, 0.093, 0.098, 0.103, 0.108,
		0.113, 0.118, 0.124, 0.129, 0.135, 0.141, 0.147, 0.153, 0.159, 0.165, 0.172,
		0.178, 0.185, 0.191, 0.198, 0.205, 0.212, 0.22, 0.227, 0.235, 0.242, 0.25,
		0.258, 0.266, 0.274, 0.282, 0.291, 0.299, 0.308, 0.317, 0.325, 0.335, 0.343,
		0.353, 0.362, 0.371, 0.381, 0.391, 0.4, 0.41, 0.42, 0.431, 0.441, 0.451,
		0.462, 0.473, 0.483, 0.494, 0.505, 0.516, 0.528, 0.539, 0.551, 0.563, 0.574,
		0.586, 0.598, 0.61, 0.622, 0.635, 0.647, 0.66, 0.673, 0.685, 0.699, 0.712,
		0.725, 0.738, 0.751, 0.765, 0.779, 0.793, 0.806, 0.821, 0.835, 0.849, 0.864,
		0.879, 0.893, 0.908, 0.923, 0.938, 0.953, 0.969, 0.984, 1, 0.992, 0.985,
		0.977, 0.97, 0.962, 0.955, 0.948, 0.941, 0.935, 0.928, 0.922, 0.915, 0.909,
		0.903, 0.897, 0.891, 0.885, 0.879, 0.874, 0.868, 0.863, 0.858, 0.853, 0.848,
		0.843, 0.838, 0.834, 0.829, 0.825, 0.821, 0.817, 0.813, 0.809, 0.805,
		0.801 46.3%, 0.8, 0.798, 0.794, 0.791, 0.788, 0.787, 0.785, 0.784, 0.782,
		0.781, 0.78, 0.778, 0.777, 0.776, 0.774, 0.773, 0.772, 0.771, 0.77, 0.769,
		0.768, 0.767, 0.766, 0.765, 0.764, 0.763, 0.762, 0.761, 0.76, 0.76, 0.759,
		0.758, 0.757, 0.757, 0.756, 0.756, 0.755, 0.754, 0.754, 0.753 52.4% 52.7%,
		0.752 52.8% 53.1%, 0.751 53.3% 53.7%, 0.75 53.8% 55.3%, 0.751 55.4% 55.8%,
		0.752 56% 56.2%, 0.753 56.4% 56.7%, 0.754, 0.754, 0.755, 0.755, 0.756,
		0.757, 0.757, 0.758, 0.759, 0.76, 0.76, 0.761, 0.762, 0.763, 0.764, 0.765,
		0.766, 0.767, 0.768, 0.769, 0.77, 0.771, 0.772, 0.773, 0.774, 0.776, 0.777,
		0.778, 0.78, 0.781, 0.782, 0.784, 0.785, 0.787, 0.788 61.6%, 0.791,
		0.794 62.2%, 0.796, 0.798, 0.801, 0.805, 0.809, 0.813, 0.817, 0.821, 0.825,
		0.829, 0.834, 0.838, 0.843, 0.848, 0.852, 0.857, 0.863, 0.868, 0.873, 0.879,
		0.885, 0.891, 0.897, 0.903, 0.909, 0.915, 0.921, 0.928, 0.935, 0.941, 0.948,
		0.955, 0.962, 0.97, 0.977, 0.985, 0.992, 1, 0.996, 0.992, 0.989, 0.985, 0.982,
		0.981, 0.979 74.4%, 0.976 74.7%, 0.974, 0.973, 0.971, 0.97, 0.968, 0.967,
		0.966, 0.965, 0.963, 0.962, 0.961, 0.96, 0.959, 0.957, 0.956, 0.955, 0.954,
		0.953, 0.952, 0.951, 0.95, 0.949, 0.949, 0.948, 0.947, 0.946, 0.946, 0.945,
		0.944, 0.944, 0.943, 0.942, 0.942, 0.941, 0.941, 0.94 79.8% 80.1%,
		0.939 80.2% 80.5%, 0.938 80.7% 83%, 0.939 83.1% 83.4%, 0.94 83.5% 83.8%,
		0.941, 0.941, 0.942, 0.942, 0.943, 0.944, 0.944, 0.945, 0.945, 0.946, 0.947,
		0.948, 0.949, 0.949, 0.95, 0.951, 0.952, 0.953, 0.954, 0.955, 0.956, 0.957,
		0.958, 0.959, 0.961, 0.962, 0.963, 0.964, 0.966, 0.967, 0.968, 0.97, 0.971,
		0.973, 0.974, 0.976, 0.977, 0.979, 0.982 89.5%, 0.984, 0.985, 0.987, 0.989,
		0.992, 0.996, 1 90.9%, 0.999, 0.998, 0.997, 0.996, 0.995, 0.995, 0.994, 0.993,
		0.992, 0.992, 0.991, 0.99, 0.99, 0.989, 0.989, 0.988, 0.988,
		0.987 93.5% 93.7%, 0.986 93.9% 94.2%, 0.985 94.3% 95%, 0.984 95.2% 95.7%,
		0.985 95.9% 96.6%, 0.986 96.7% 97%, 0.987 97.1% 97.4%, 0.988, 0.988,
		0.989, 0.989, 0.99, 0.99, 0.991, 0.992, 0.992, 0.993, 0.994, 0.995, 0.995,
		0.996, 0.997, 0.998, 0.999, 1
	); 
	  
}

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

canvas{position:relative;background:black;cursor:none;}
.canvas_project_img{display:none;}

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

/* Content card showcase Start. */
#main > .content_card_container{position:relative;width:100%;height:500px;background-color:transparent;margin-bottom:var(--main_item_spacing);}
.content_card_container div[def="cards"]{z-index:2;display:flex;justify-content:center;align-items:center;gap:10px;position:absolute;top:0;left:0;width:900px;height:100%;background-color:var(--card_showcase_color_p);}
.content_card_container a{text-decoration:none;outline:none;}

.content_card_container div[def="card_subject_img"]{display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:900px;width:calc(100vw - 900px);height:100%;background-color:var(--card_showcase_color_s);}
.content_card_container div[def="card_subject_img"] > img{z-index:1;height:95%;}
.content_card_container div[def="card_subject_img"]:hover{cursor:pointer;}
.content_card_container div[def="card_subject_img"]:hover::before{z-index:3;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.55);}
.content_card_container div[def="card_subject_img"]:hover::after{z-index:4;content:"View All Projects 🚀";position:absolute;top:calc(50% - (var(--card_showcase_link_h) / 2));left:calc(50% - (var(--card_showcase_link_w) / 2));width:var(--card_showcase_link_w);height:var(--card_showcase_link_h);background-color:var(--card_showcase_color_p);box-sizing:border-box;border:.2em solid var(--card_showcase_color_i);border-radius:1em;font-family:"Lato", serif;font-weight:650;font-size:var(--card_showcase_link_f_s);color:var(--card_showcase_color_i);text-align:center;align-content:center;}
  
.content_card_container div[def="cards"] > .content-card{position:relative;width:100%;height:70%;overflow:hidden;background-image:url('../images/card_background_1.png');background-color:rgba(0,0,0,0.55);background-blend-mode:darken;background-repeat:round repeat;border:.2em solid var(--card_showcase_color_i);border-radius:20px;font-family: "Comic Neue", serif;font-weight: 400;font-style: normal;}
#card_showcase_2 .content-card{background-image:url('../images/card_background_2.png');}
#card_showcase_3 .content-card{background-image:url('../images/card_background_3.png');}
.content_card_container div[def="cards"] > .content-card:nth-child(1){z-index:1;transform:rotate(-30deg) scale(80%, 80%) translate(20px, 120px);}
.content_card_container div[def="cards"] > .content-card:nth-child(2){z-index:2;transform:rotate(-15deg) scale(90%, 90%) translate(10px, 25px);}
.content_card_container div[def="cards"] > .content-card:nth-child(3){z-index:3;} /* center */
.content_card_container div[def="cards"] > .content-card:nth-child(4){z-index:2;transform:rotate(15deg) scale(90%, 90%) translate(-10px, 25px);}
.content_card_container div[def="cards"] > .content-card:nth-child(5){z-index:1;transform:rotate(30deg) scale(80%, 80%) translate(-20px, 120px);}

.content-card img{width:100%;}
.content-card h2{font-size:1em;padding-left:.4em;padding-right:.4em;color:var(--card_showcase_color_i);}
.content-card p{font-size:.75em;padding-left:.6em;padding-right:.6em;color:var(--card_showcase_color_i);}
.content-card button{position:absolute;bottom:0;font-size:.8em;outline:none;width:100%;height:2em;border:none;background-color:var(--card_showcase_color_button_p);color:var(--card_showcase_color_button_t);font-weight:bold;}
.content-card button:hover{cursor:pointer;background-color:var(--card_showcase_color_button_s);}

.content-card.animated_1{animation-name:card_scale_up_1;animation-duration:3s;animation-iteration-count:2;}
@keyframes card_scale_up_1{
	0%, 100% {z-index:10;transform:rotate(-30deg) scale(80%, 80%) translate(20px, 120px);}
	50%      {transform:rotate(-30deg) scale(100%, 100%) translate(20px, 120px);}
}

.content-card.animated_2{animation-name:card_scale_up_2;animation-duration:3s;animation-iteration-count:2;}
@keyframes card_scale_up_2{
	0%, 100% {z-index:10;transform:rotate(-15deg) scale(90%, 90%) translate(10px, 25px);}
	50%      {transform:rotate(-15deg) scale(120%, 120%) translate(10px, 25px);}
}

.content-card.animated_3{animation-name:card_scale_up_3;animation-duration:3s;animation-iteration-count:2;}
@keyframes card_scale_up_3{
	0%, 100% {transform:scale(1, 1);}
	50%      {transform:scale(135%, 135%);}
}
.content-card.animated_4{animation-name:card_scale_up_4;animation-duration:3s;animation-iteration-count:2;}
@keyframes card_scale_up_4{
	0%, 100% {z-index:10;transform:rotate(15deg) scale(90%, 90%) translate(-10px, 25px);}
	50%      {transform:rotate(15deg) scale(120%, 120%) translate(-10px, 25px);}
}

.content-card.animated_5{animation-name:card_scale_up_5;animation-duration:3s;animation-iteration-count:2;}
@keyframes card_scale_up_5{
	0%, 100% {z-index:10;transform:rotate(30deg) scale(80%, 80%) translate(-20px, 120px);}
	50%      {transform:rotate(30deg) scale(100%, 100%) translate(-20px, 120px);}
}

#card_showcase_1{z-index:99;margin-top:var(--main_item_spacing);} #card_showcase_2{z-index:98;} #card_showcase_3{z-index:97;}

/* Responsive screen configurations. */
@media screen and (max-width: 1200px){
	.content_card_container div[def="card_subject_img"]:hover::after{font-size:1em;width:100%;left:0;}
}
@media screen and (max-width: 1055px){
	.content_card_container div[def="card_subject_img"]:hover::after{content:"🚀";}
}
@media screen and (max-width: 930px){
	.content_card_container div[def="card_subject_img"]:hover::after{display:none;}
}
@media screen and (max-width: 680px), (max-height:400px){
	#main > .content_card_container{height:160vw;}
	.content_card_container div[def="card_subject_img"]{top:80vw;left:0;width:100%;height:80vw;}
	.content_card_container div[def="card_subject_img"]:hover::after{display:block;content:"View All Projects 🚀";left:calc(50% - (var(--card_showcase_link_w) / 2));width:var(--card_showcase_link_w);font-size:var(--card_showcase_link_f_s);}
	
	.content_card_container div[def="cards"]{top:0;left:0;width:100%;height:80vw;}
	.content_card_container div[def="cards"] > .content-card{height:50%;}
	.content_card_container div[def="cards"] > .content-card:nth-child(1){transform:rotate(-30deg) scale(80%, 80%) translate(10px, 85px);}
	.content_card_container div[def="cards"] > .content-card:nth-child(2){transform:rotate(-15deg) scale(90%, 90%) translate(5px, 25px);}
	.content_card_container div[def="cards"] > .content-card:nth-child(3){} /* center */
	.content_card_container div[def="cards"] > .content-card:nth-child(4){transform:rotate(15deg) scale(90%, 90%) translate(-5px, 25px);}
	.content_card_container div[def="cards"] > .content-card:nth-child(5){transform:rotate(30deg) scale(80%, 80%) translate(-10px, 85px);}

    .content-card h2{font-size:.4em;padding-left:.2em;padding-right:.2em;}
    .content-card p{font-size:.35rem;padding-left:.3em;padding-right:.3em;}
	.content-card button{font-size:.4em;height:1.6em;}
	
	.content-card.animated_1{animation-name:card_scale_up_m_1;}
	@keyframes card_scale_up_m_1{
		0%, 100% {z-index:10;transform:rotate(-30deg) scale(80%, 80%) translate(10px, 85px);}
		50%      {transform:rotate(-30deg) scale(135%, 135%) translate(10px, 85px);}
	}
	
	.content-card.animated_2{animation-name:card_scale_up_m_2;}
	@keyframes card_scale_up_m_2{
		0%, 100% {z-index:10;transform:rotate(-15deg) scale(90%, 90%) translate(5px, 25px);}
		50%      {transform:rotate(-15deg) scale(130%, 130%) translate(5px, 25px);}
	}

	.content-card.animated_3{animation-name:card_scale_up_m_3;}
	@keyframes card_scale_up_m_3{
		0%, 100% {transform:scale(1, 1);}
		50%      {transform:scale(165%, 165%);}
	}

	.content-card.animated_4{animation-name:card_scale_up_m_4;}
	@keyframes card_scale_up_m_4{
		0%, 100% {z-index:10;transform:rotate(15deg) scale(90%, 90%) translate(-5px, 25px);}
		50%      {transform:rotate(15deg) scale(130%, 130%) translate(-5px, 25px);}
	}

	.content-card.animated_5{animation-name:card_scale_up_m_5;}
	@keyframes card_scale_up_m_5{
		0%, 100% {z-index:10;transform:rotate(30deg) scale(80%, 80%) translate(-10px, 85px);}
		50%      {transform:rotate(30deg) scale(135%, 135%) translate(-10px, 85px);}
	}	
}
@media screen and (max-width: 325px){
    .content-card h2{font-size:.3em;padding-left:.4em;padding-right:.4em;}
    .content-card p{font-size:.2rem;padding-left:.5em;padding-right:.5em;}
	.content-card button{font-size:.2em;height:3.2em;}	
}
/* Content card showcase End. */

/* Bio-introduction Start. */
.introduction_main{position:relative;width:100vw;height:var(--intro_total_h);background-color:transparent;margin-top:var(--main_item_spacing);font-family:"Lato", serif;font-weight:650;overflow:hidden;}
.introduction_main a{text-decoration:none;border:none;outline:none;margin:0;padding:0;}
.introduction_main > div:nth-child(1){z-index:2;position:absolute;top:var(--intro_logo_size_r);left:var(--intro_logo_size_r);display:flex;justify-content:center;align-items:center;width:calc(100vw - var(--intro_logo_size_r) * 2);height:calc(var(--intro_total_h) - var(--intro_logo_size_r)* 2);background-color:transparent;background-image:url('../images/introduction_border_layout.png');background-size:var(--intro_path_border) auto;background-repeat:space;border-radius:calc(var(--intro_path_border) / 2);}
.introduction_main > div:nth-child(1) > div{position:relative;display:block;width:calc(100% - var(--intro_path_border) * 2);height:calc(100% - var(--intro_path_border) * 2);background-color:var(--intro_color_background);box-sizing:border-box;padding:2em;overflow:hidden;overflow-y:auto;}
.introduction_main > div:nth-child(1) > div > img{float:left;margin-right:2em;width:45%;height:auto;border:.3em solid var(--intro_color_img_bor);border-radius:10%;}
.introduction_main > div:nth-child(1) > div > h2{position:relative;font-size:var(--intro_main_h_font_s);height:var(--intro_main_h_h);letter-spacing:.1em;color:var(--intro_color_img_h2_p);padding-left:var(--intro_main_h_logo_pad);align-content:center;transition-property:color;}
.introduction_main > div:nth-child(1) > div > h2::before{position:absolute;top:calc((100% - var(--intro_main_h_logo_s)) / 2);left:0;content:"";background-image:url('../images/about_introduction_logo.png');background-position:50% 50%;background-size:var(--intro_main_h_logo_s) var(--intro_main_h_logo_s);width:var(--intro_main_h_logo_s);height:var(--intro_main_h_logo_s);box-sizing:border-box;border:var(--intro_main_h_logo_bor) solid var(--intro_color_img_h2_p);border-radius:50%;transition-property:border;}
.introduction_main > div:nth-child(1) > div > h2:hover{color:var(--intro_color_img_h2_s);cursor:url("../images/custom_project_cursor.png"), crosshair;}
.introduction_main > div:nth-child(1) > div > h2:hover::before{border-color:var(--intro_color_img_h2_s);}
.introduction_main > div:nth-child(1) > div > h2[def="about_exp"]{margin-top:2em;}
.introduction_main > div:nth-child(1) > div > h2[def="about_exp"]::before{background-image:url('../images/about_experience_logo.png');}
.introduction_main > div:nth-child(1) > div > h2[def="about_port"]::before{background-image:url('../images/about_portfolio_logo.png');}
.introduction_main > div:nth-child(1) > div > p{font-size:1.2em;line-height:200%;letter-spacing:.15em;color:var(--intro_color_p_text);}
.introduction_main > div:nth-child(1) > div > h2[def="about_intro"] + p{color:var(--intro_color_p_highlight_text);}

.introduction_main > div:nth-child(1) > div button.more{position:relative;display:block;outline:none;background-color:var(--intro_color_button_bg_p);color:var(--intro_color_button_t_p);width:var(--intro_button_w);height:var(--intro_button_h);font-family: "Comic Neue", serif;font-weight:750;font-style:normal;font-size:var(--intro_button_f_s);letter-spacing:.2em;box-sizing:border-box;border:.2em solid var(--intro_color_button_bor_p);border-radius:.5em;margin:auto;margin-top:2em;margin-bottom:.5em;transition-property:transform,border;}
.introduction_main > div:nth-child(1) > div button.more::after{content:"";position:absolute;top:calc(50% - (var(--intro_button_logo_h) / 2));left:.5em;width:var(--intro_button_logo_h);height:var(--intro_button_logo_h);background-image:url('../images/about_introduction_logo.png');background-size:100% 100%;background-position:50% 50%;background-repeat:no-repeat;box-sizing:border-box;border:.2em solid var(--intro_color_button_bor_p);border-radius:50%;}
.introduction_main > div:nth-child(1) > div button.more:hover{transform:scale(1.2);border-color:var(--intro_color_button_bor_s);background-color:var(--intro_color_button_bg_s);color:var(--intro_color_button_t_s);cursor:pointer;}
.introduction_main > div:nth-child(1) > div button.more:hover::after{border-color:var(--intro_color_button_bor_s);}

.introduction_main > div:nth-child(2){z-index:1;position:absolute;top:0;left:var(--intro_logo_size_r);width:calc(var(--intro_logo_size_r) * 2);height:calc(var(--intro_logo_size_r) * 2);background-color:transparent;background-image:url('../images/introduction_logo.png');background-size: 100% 100%;background-repeat:no-repeat;border-radius:50%;animation-name:introduction_indicate;animation-duration:20s;animation-iteration-count:infinite;}

@keyframes introduction_indicate{
	0%      {top:0;left:0;transform:rotate(0deg);}
	25%     {top:0;left:calc(100vw - var(--intro_logo_size_r) * 2);transform:rotate(0deg);}
	30%     {top:0;left:calc(100vw - var(--intro_logo_size_r) * 2);transform:rotate(90deg);}
	50%     {top:calc(var(--intro_total_h) - var(--intro_logo_size_r) * 2);left:calc(100vw - var(--intro_logo_size_r) * 2);transform:rotate(90deg);}
	55%     {top:calc(var(--intro_total_h) - var(--intro_logo_size_r) * 2);left:calc(100vw - var(--intro_logo_size_r) * 2);transform:rotate(180deg);}
	75%     {top:calc(var(--intro_total_h) - var(--intro_logo_size_r) * 2);left:0;transform:rotate(180deg);}
	80%     {top:calc(var(--intro_total_h) - var(--intro_logo_size_r) * 2);left:0;transform:rotate(270deg);}
	95%     {top:0;left:0;transform:rotate(270deg);}
	100%    {top:0;left:0;transform:rotate(360deg);}
}

.introduction_main > div:nth-child(1) > div > h2,
.introduction_main > div:nth-child(1) > div > h2::before
{transition-duration: .25s; transition-timing-function: ease-in-out;}

.introduction_main > div:nth-child(1) > div button.more,
.introduction_main > div:nth-child(1) > div button.more::after
{transition-duration: 1s; transition-timing-function: var(--elastic-easing);}

/* Responsive screen configurations. */
@media screen and (max-width: 1100px){
	.introduction_main > div:nth-child(1) > div button.more{padding-left:calc(var(--intro_button_logo_h) + 1em);}
}
@media screen and (max-width: 1020px){
	.introduction_main > div:nth-child(1) > div > img{float:none;width:100%;}
	.introduction_main > div:nth-child(1) > div > h2[def="about_intro"]{margin-top:1em;margin-bottom:1em;}
}
@media screen and (max-width: 900px){
    .introduction_main > div:nth-child(1) > div{padding:.8em;}
}
@media screen and (max-width: 680px){
	:root{
		--intro_logo_size_r:10vw;--intro_path_border:1.6em;
		--intro_main_h_font_s: 1.2em;
		--intro_button_h: 3em;
		--intro_button_f_s: calc(var(--intro_button_h) / 4);
	}
	.introduction_main > div:nth-child(1) > div > p{font-size:.8em;line-height:180%;letter-spacing:.1em;}
}
@media screen and (max-width: 450px){
	:root{
		--intro_main_h_font_s: 1em;
	}	
}
/* Bio-introduction End. */

/* Sponsor panel Start. */
.sponsor_panel_main{position:relative;display:flex;justify-content:center;align-items:center;width:100vw;height:var(--sponsor_panel_height);background-color:transparent;margin-top:var(--main_item_spacing);font-family:"Lato", serif;font-weight:650;}
.sponsor_panel_main > div{z-index:1;position:relative;width:calc(100vw - var(--sponsor_panel_spacing) * 2);height:calc(var(--sponsor_panel_height) - var(--sponsor_panel_spacing) * 2);background-color:transparent;border:calc(var(--sponsor_panel_spacing) / 4) solid var(--sponsor_color_border_1);border-radius:1em;overflow:hidden;animation-name:sponsor_border_color_change;animation-duration:2s;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out;}
.sponsor_panel_main > div::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#E2F1F6;filter:grayscale(100%);}

.sponsor_panel_main > div > .sponsor_img_container{position:absolute;left:0;top:calc(50% - var(--sponsor_panel_brands_height) / 2);display:inline-flex;justify-content:center;align-items:center;width:var(--sponsor_panel_brands_width);height:var(--sponsor_panel_brands_height);background-color:transparent;/*filter:grayscale(80%);*/overflow:hidden;animation-name:sponsor_panel_show;animation-duration:12s;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:var(--bounce-easing);}
.sponsor_panel_main > div > .sponsor_img_container > img{height:calc(var(--sponsor_panel_brands_height) - 1em);margin-left:1em;-webkit-user-drag: none;}

.sponsor_panel_main button{z-index:2;position:absolute;top:calc((var(--sponsor_panel_spacing) / 2) - (var(--sponsor_panel_spacing) / 4) + (var(--sponsor_panel_spacing) / 16));left:calc(var(--sponsor_panel_spacing) * 1.2);outline:none;border:none;border-radius:.5em;padding:.4em;width:auto;height:calc(var(--sponsor_panel_spacing) / 2);font-size:calc(var(--sponsor_panel_spacing) / 4);font-weight:bold;background-color:var(--sponsor_color_border_1);color:var(--sponsor_color_text);animation-name:sponsor_back_color_change;animation-duration:2s;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out;}
.sponsor_panel_main button[def="sponsor_more_button"]{top:auto;left:auto;bottom:calc((var(--sponsor_panel_spacing) / 2) - (var(--sponsor_panel_spacing) / 4) + (var(--sponsor_panel_spacing) / 16));right:calc(var(--sponsor_panel_spacing) * 1.2);transition-property:transform;transition-duration:.25s; transition-timing-function:var(--elastic-easing);}
.sponsor_panel_main button[def="sponsor_more_button"]:hover{cursor:pointer;transform:scale(1.2,1.2);}

@keyframes sponsor_panel_show{
	0%       {left:0;}
	25%      {left:calc((var(--sponsor_panel_brands_width) - var(--sponsor_panel_animation_padding)) * -1 / 8);}
	50%      {left:calc((var(--sponsor_panel_brands_width) - var(--sponsor_panel_animation_padding)) * -1 / 4);}
	75%      {left:calc((var(--sponsor_panel_brands_width) - var(--sponsor_panel_animation_padding)) * -1 / 2);}
	100%     {left:calc((var(--sponsor_panel_brands_width) - var(--sponsor_panel_animation_padding)) * -1);}
}

@keyframes sponsor_border_color_change{
	0%       {border-color:var(--sponsor_color_border_1);}
	50%      {border-color:var(--sponsor_color_border_2);}
	75%      {border-color:var(--sponsor_color_border_3);}
	100%     {border-color:var(--sponsor_color_border_4);}
}

@keyframes sponsor_back_color_change{
	0%       {background-color:var(--sponsor_color_border_1);}
	50%      {background-color:var(--sponsor_color_border_2);}
	75%      {background-color:var(--sponsor_color_border_3);}
	100%     {background-color:var(--sponsor_color_border_4);}
}

/* Responsive screen configurations. */
@media screen and (max-width: 680px){
	:root{
		--sponsor_panel_spacing:3em; --sponsor_panel_brands_width:2880px; --sponsor_panel_brands_height:4em;
	}
	
	.sponsor_panel_main > div > .sponsor_img_container{animation-duration:24s;}
	
	.sponsor_panel_main button{top:calc((var(--sponsor_panel_spacing) / 2) - (var(--sponsor_panel_spacing) / 4) + (var(--sponsor_panel_spacing) / 4));left:calc(var(--sponsor_panel_spacing) * 2.1);padding:.8em;height:calc(var(--sponsor_panel_spacing) * 1.5);}
	.sponsor_panel_main button[def="sponsor_more_button"]{bottom:calc((var(--sponsor_panel_spacing) / 2) - (var(--sponsor_panel_spacing) / 4) + (var(--sponsor_panel_spacing) / 8));right:calc(var(--sponsor_panel_spacing) * 2.1);}
}
@media screen and (max-width: 325px){
	.sponsor_panel_main button{left:calc(var(--sponsor_panel_spacing) * 1.6);}
	.sponsor_panel_main button[def="sponsor_more_button"]{right:calc(var(--sponsor_panel_spacing) * 1.6);}
}
/* Sponsor panel 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;}
.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);}

.header > .game_instructions_container{position:relative;display:block;margin:auto;margin-top:.5em;padding:0;font-family:"Lato", serif;font-weight:650;width:80%;height:var(--game_instructions_h);overflow:hidden;background-color:var(--header_color_game_background);border:.3em solid var(--header_color_game_border_p);border-radius:10px;transition-property:height, padding;transition-duration:.5s; transition-timing-function:var(--bounce-easing);}
.game_instructions_container > h2{color:var(--header_color_game_text_h);font-size:calc(var(--game_instructions_h) / 2);margin-top:calc(var(--game_instructions_h) / 4);margin-left:.5em;}
.game_instructions_container > h2::after{content:'🔎';position:absolute;right:.5em;color:var(--header_game_indicator_color_1);animation-name:game_highlight_instructions;animation-duration:2s;animation-iteration-count:infinite;animation-direction:alternate;}
.game_instructions_container i{color:var(--header_color_game_text_s);}
.game_instructions_container > p{color:var(--header_color_game_text_p);}
.game_instructions_container > p:not(:nth-child(2)){font-size:1.3em;}
.game_instructions_container > ul{line-height:200%;list-style-type:none;}
.game_instructions_container > ul li{position:relative;color:var(--header_color_game_text_p);}
.game_instructions_container > ul li::before{position:absolute;top:.3em;left:-1.6em;content:"";display:inline-block;background-image:url('../images/game_plasma_logo.png');background-size: 1.2em 1.2em;width:1.2em;height:1.2em;border:.1em solid var(--header_color_game_border_p);border-radius:50%;}
.game_instructions_container > ul:last-child li:last-child{margin-bottom:3em;}

.game_instructions_container:hover{cursor:pointer;border:.35em solid var(--header_color_game_border_s);}
.game_instructions_container:hover > ul li::before{border:.1em solid var(--header_color_game_border_s);}

.game_instructions_container.opened{height:auto;padding:1em;padding-top:0;transition-duration:.5s; transition-timing-function:var(--bounce-easing);}
.game_instructions_container.opened > h2{font-size:2em;margin-top:.5em;margin-left:initial;padding-left:2.6em;margin-bottom:1.5em;}
.game_instructions_container.opened > h2::after{font-size:.5em;bottom:.5em;animation-name:game_highlight_instructions_c;}
.game_instructions_container.opened > h2::before{position:absolute;top:.1em;left:.1em;content:"";display:inline-block;background-image:url('../images/game_plasma_logo.png');background-size: 2em 2em;width:2em;height:2em;border:.2em solid var(--header_color_game_border_p);border-radius:50%;}
.game_instructions_container.opened:hover > h2::before{border:.2em solid var(--header_color_game_border_s);}

@keyframes game_highlight_instructions{
	0%     {color:var(--header_game_indicator_color_1);content:'🔎';}
	3%     {color:var(--header_game_indicator_color_1);content:'🔎 C';}
	6%     {color:var(--header_game_indicator_color_1);content:'🔎 Cl';}
	9%     {color:var(--header_game_indicator_color_1);content:'🔎 Cli';}
	12%    {color:var(--header_game_indicator_color_1);content:'🔎 Clic';}
	15%    {color:var(--header_game_indicator_color_1);content:'🔎 Click';}
	18%    {color:var(--header_game_indicator_color_1);content:'🔎 Click ️';}
	21%    {color:var(--header_game_indicator_color_1);content:'🔎 Click t';}
	24%    {color:var(--header_game_indicator_color_1);content:'🔎 Click to';}
	27%    {color:var(--header_game_indicator_color_1);content:'🔎 Click to ';}
	30%    {color:var(--header_game_indicator_color_2);content:'🔎 Click to v';}
	33%    {color:var(--header_game_indicator_color_2);content:'🔎 Click to vi';}
	36%    {color:var(--header_game_indicator_color_2);content:'🔎 Click to vie';}
	39%    {color:var(--header_game_indicator_color_2);content:'🔎 Click to view';}
	42%    {color:var(--header_game_indicator_color_2);content:'🔎 Click to view ';}
	45%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view i';}
	48%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view in';}
	51%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view ins';}
	54%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view inst';}
	57%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view instr';}
	60%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view instru';}
	63%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view instruc';}
	66%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view instruct';}
	69%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view instructi';}
	72%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view instructio';}
	75%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view instruction';}
	78%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to view instructions';}
	81%    {color:var(--header_game_indicator_color_4);content:'🔎 Click to view instructions ️';}
	84%    {color:var(--header_game_indicator_color_4);content:'🔎 Click to view instructions 🕹️';}
	87%    {color:var(--header_game_indicator_color_4);content:'🔎 Click to view instructions 🕹️';}
	100%   {color:var(--header_game_indicator_color_4);content:'🔎 Click to view instructions 🕹️';}
}

@keyframes game_highlight_instructions_c{
	0%     {color:var(--header_game_indicator_color_1);content:'🔎';}
	3%     {color:var(--header_game_indicator_color_1);content:'🔎 C';}
	6%     {color:var(--header_game_indicator_color_1);content:'🔎 Cl';}
	9%     {color:var(--header_game_indicator_color_1);content:'🔎 Cli';}
	12%    {color:var(--header_game_indicator_color_1);content:'🔎 Clic';}
	15%    {color:var(--header_game_indicator_color_1);content:'🔎 Click';}
	18%    {color:var(--header_game_indicator_color_1);content:'🔎 Click ';}
	21%    {color:var(--header_game_indicator_color_1);content:'🔎 Click t';}
	24%    {color:var(--header_game_indicator_color_1);content:'🔎 Click to';}
	27%    {color:var(--header_game_indicator_color_1);content:'🔎 Click to ';}
	30%    {color:var(--header_game_indicator_color_2);content:'🔎 Click to c';}
	33%    {color:var(--header_game_indicator_color_2);content:'🔎 Click to cl';}
	36%    {color:var(--header_game_indicator_color_2);content:'🔎 Click to clo';}
	39%    {color:var(--header_game_indicator_color_2);content:'🔎 Click to clos';}
	42%    {color:var(--header_game_indicator_color_2);content:'🔎 Click to close';}
	45%    {color:var(--header_game_indicator_color_2);content:'🔎 Click to close ';}
	48%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to close i';}
	51%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to close in';}
	54%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to close ins';}
	57%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to close inst';}
	60%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to close instr';}
	63%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to close instru';}
	66%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to close instruc';}
	69%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to close instruct';}
	72%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to close instructi';}
	75%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to close instructio';}
	78%    {color:var(--header_game_indicator_color_3);content:'🔎 Click to close instructions';}
	81%    {color:var(--header_game_indicator_color_4);content:'🔎 Click to close instructions ';}
	84%    {color:var(--header_game_indicator_color_4);content:'🔎 Click to close instructions 🎮';}
	87%    {color:var(--header_game_indicator_color_4);content:'🔎 Click to close instructions 🎮';}
	100%   {color:var(--header_game_indicator_color_4);content:'🔎 Click to close instructions 🎮';}
}

.mobile_header_side{z-index:1000;visibility:hidden;position:fixed;top:0;left:100vw;width:100vw;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: 650px){
	.game_instructions_container > h2{font-size:calc(var(--game_instructions_h) / 3);margin-top:calc(var(--game_instructions_h) / 3 * 2);}
	.game_instructions_container.opened > h2{font-size:1.2em;}
	.game_instructions_container.opened > h2::after{font-size:.7em;}
	.game_instructions_container.opened > p, .game_instructions_container.opened > ul{font-size:.8em;}
	.game_instructions_container.opened > p:not(:nth-child(2)){font-size:1em;}
}
@media screen and (max-width: 369px){
	.game_instructions_container.opened > h2{font-size:.8em;}
	.game_instructions_container.opened > h2::after{font-size:.7em;}
	.game_instructions_container.opened > p, .game_instructions_container.opened > ul{font-size:.6em;}
	.game_instructions_container.opened > p:not(:nth-child(2)){font-size:.8em;}
	.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:#F0F0E8;}
/* hide scrollbar on the body and add settings for Firefox */
body::-webkit-scrollbar{display: none;}
@supports not selector(::-webkit-scrollbar){
	* {scrollbar-color:#80503A #408DEE; scrollbar-width:thin;}
	html, body{scrollbar-width:none;}
}