/* --------------------------------------------------------------
   VARIABLES
	"Rajdhani",
-------------------------------------------------------------- */

:root 
{ --blur:				4px;
  --color-menubar:		rgba(0,0,0,0.8);
  --color-dropshadow: 	rgba(0,0,0,0.2);
  --fonts:				"Rajdhani Semibold","Helvetica Neue LT Std","Helvetica Neue",Helvetica,Arial,sans-serif,Ubuntu,-apple-system;
}

/* --------------------------------------------------------------
   BASE ELEMENTS
-------------------------------------------------------------- */

body,html
    {background-size:var(--bg-behavior);overflow:var(--overflow-behavior);margin:0;font-family:var(--fonts);font-size:1rem;font-weight:400;line-height:1.5;color:var(--color-text);text-align:left;background:var(--color-bg);background-attachment:fixed;text-decoration:none;text-box: trim-both cap alphabetic;letter-spacing: 0.05rem;}
p
    {font-size:1rem;font-weight:400;text-decoration:none}
a
    {color:var(--color-accent);font-weight:500;text-decoration:none}
a:link,a:visited,a:hover,a:active
    {text-decoration:none}
a:hover
    {cursor:pointer}
img,video
    {border:0}
h1,h2,h3,h4
    {line-height:.8}


/* --------------------------------------------------------------
   LAYOUT UTILITIES, IMAGERY AND POSITIONING
-------------------------------------------------------------- */

.abscenter
    {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;vertical-align:middle;}
.all_max
    {max-height:100%;max-width:100%}
.all_min
    {min-height:100%;min-width:100%}
.bg
    {background-color:var(--color-bg)}
.centerBack,.centerFront,.centerFull
    {position:absolute;width:100%;height:100%;visibility:visible;overflow:hidden;text-align:center;vertical-align:middle}
.clearfix::after
    {content:"";clear:both;display:table}
.contain
    {object-fit:contain}
.cover
    {object-fit:cover}
.dropshadow
    {box-shadow:0px 2px 16px var(--color-dropshadow)}
.hide
    {display:none}
.imagery
    {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.max_h
    {max-height:100%;width:auto}
.max_w
    {max-width:100%;height:auto}
.min_h
    {min-height:100%;width:auto}
.min_w
    {min-width:100%;height:auto}
.right
    {float:right;padding-right:50px;bottom:10px}
.scaledown
    {object-fit:scale-down}
.wh
    {width:100%;height:100%}
.description
    {position:absolute;width:100%;padding-left:16px;padding-right:16px;bottom:8px}
.z10 
	{z-index:10;}
.z100 
	{z-index:100;}
.z10neg 
	{z-index:-10;}
.z100neg
	{z-index:-100;}

/* --------------------------------------------------------------
   BUTTONS
-------------------------------------------------------------- */

.button
    {background-color:var(--color-bg);text-box: trim-both cap alphabetic;color:var(--color-text);font-size:1rem;border:none;border-radius:4px;display:inline-block;padding:12px 24px;vertical-align:middle;overflow:hidden;text-decoration:none;text-align:center;cursor:pointer;white-space:nowrap;text-box: trim-both cap alphabetic;}
.button:hover
    {background-color:var(--color-accent);text-decoration:none;text-box: trim-both cap alphabetic;}

/* --------------------------------------------------------------
   NAVIGATION & TOP BANNER
-------------------------------------------------------------- */

#logo
    {content:var(--logo-main); width: 150px;position:relative;top:2px;}
#menubar
    {position:fixed;top:0;left:0;width:100%;height:40px;padding:.5em;overflow:visible;visibility:visible;display:block;z-index:1000;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));color:var(--color-menubar)}
#icons,#icons_hidden
    {position:fixed;top:0;height:40px;right:24px;padding-top:14px;z-index:1001}
#icons_hidden
    {visibility:hidden;z-index:-1000}
#icons_h_p
    {background:var(--icon-portfolio-hover) center/cover no-repeat}
#icons_h_s
    {background:var(--icon-science-hover) center/cover no-repeat}
#icons_h_r
    {background:var(--icon-resume-hover) center/cover no-repeat}
#icons_h_e
    {background:var(--icon-email-hover) center/cover no-repeat}

.icon_p,.icon_s,.icon_r,.icon_e
    {color:var(--color-text);display:inline-flex;align-items:center;vertical-align:middle;text-decoration:none}
.icon_p .icon,.icon_s .icon,.icon_r .icon,.icon_e .icon
    {width:24px;height:24px;margin-right:4px;background-size:cover;background-repeat:no-repeat;background-position:center;vertical-align:middle}
.icon_p:hover,.icon_s:hover,.icon_r:hover,.icon_e:hover
    {color:var(--color-text-hover)}



.icon {
  width: 2rem;
  height: 2rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  color: var(--color-text, #000); /* Default color */
  transition: color 0.2s ease;
}

.icon-email      { background-image: var(--icon-email); }
.icon-portfolio  { background-image: var(--icon-portfolio); }
.icon-resume     { background-image: var(--icon-resume); }
.icon-science    { background-image: var(--icon-science); }

.icon:hover {
  color: var(--color-accent, #f90); /* Change color on hover */
}

.icon_p .icon
	{background:var(--icon-portfolio) center/cover no-repeat}
.icon_s .icon
	{background:var(--icon-science) center/cover no-repeat}
.icon_r .icon
	{background:var(--icon-resume) center/cover no-repeat}
.icon_e .icon
	{background:var(--icon-email) center/cover no-repeat}

.icon_p:hover .icon
    {background:var(--icon-portfolio-hover) center/cover no-repeat}
.icon_s:hover .icon
    {background:var(--icon-science-hover) center/cover no-repeat}
.icon_r:hover .icon
    {background:var(--icon-resume-hover) center/cover no-repeat}
.icon_e:hover .icon
    {background:var(--icon-email-hover) center/cover no-repeat}
.iconlabel
    {skew(0deg,16deg); letter-spacing: 0.086rem;text-box: trim-both cap alphabetic;font-weight:400;font-size:0.925rem;margin-right:4px;text-transform: uppercase; padding-left:2px;padding-right:8px;}

/* --------------------------------------------------------------
   MEDIA QUERIES
-------------------------------------------------------------- */

@media screen and (max-width:1024px)
{

	.imagery
		{width:100%;height:100%;object-fit:cover}
	.iconlabel
		{letter-spacing: 0.05rem;position:relative;top:0;font-size:0.925rem;display:none;text-box: trim-both cap alphabetic;text-transform: uppercase;}
}