/*
///////////////////////////////////////////////////////////////////	
	Variables
///////////////////////////////////////////////////////////////////
*/

:root {

	--link: #0079A8;
	--link-hover: #00638A;
	--link-pressed: #005779;
	--link-underline: rgba(0, 125, 166, 0.20);
	--grey-10: #343A40;
	--grey-06: #495057;
	--grey-05: #6c757D;
	--grey-04: #ADB5BD;
	--grey-03: #CED4DA;
	--grey-02: #DEE2E6;
	--grey-01: #F8F9FA;
	--background: rgba(255, 255, 255, .90);
	--color-opal: #93b7be;
	--color-blue: #00a8e8;
	--color-blue-transparent: rgba(133, 189, 222, .1);
	--color-yellow: #f4ebd9;
	--color-beige: #a39a92;
	--select: #C9E0E9;
}


/*
///////////////////////////////////////////////////////////////////	
	Getting rid of focus rings
///////////////////////////////////////////////////////////////////
*/

/* Show focus only for keyboard users */
*:focus { outline: none; box-shadow: none; }
*:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }


/*
///////////////////////////////////////////////////////////////////	
	Basics
///////////////////////////////////////////////////////////////////
*/


html {
	background-color: var(--grey-01);
	font-family: 'Roboto', sans-serif;
	position: relative;
	min-height: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
}

body {
 	background-color: var(--grey-01);
 	font-family: 'Roboto', sans-serif;
	color: var(--grey-10);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased; /* Chrome, Safari */
	-moz-osx-font-smoothing: grayscale; /* Firefox */
	-webkit-overflow-scrolling: touch;
	font-feature-settings: "kern" 1, "zero" 1;
	-moz-font-feature-settings: "kern" 1, "zero" 1;
	-webkit-font-feature-settings: "kern" 1, "zero" 1;
	-ms-font-feature-settings: "kern" 1, "zero" 1;	
	-o-font-feature-settings:"kern" 1, "zero" 1; 
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
	font-variant-numeric: oldstyle-nums;
}


img {
    image-rendering: high-quality;
}

.img-brightness {
	filter: brightness(0.75);
	-webkit-filter: brightness(0.75);	
}

.img-brightness:hover {
	filter: brightness(1);
	-webkit-filter: brightness(1);
}

::selection {
	background-color: var(--select); /* WebKit/Blink Browsers */
	color: var(--grey-10);
}
::-moz-selection {
	background-color: var(--select); /* Gecko Browsers */
	color: var(--grey-10);
}


/*
///////////////////////////////////////////////////////////////////	
	Homepage Jumbotron Background Image
///////////////////////////////////////////////////////////////////
*/

.jumbotron-fluid {
    height: 100vh;
}

.home-bg {
	background: url('https://www.lowdiameter.com/images/me/2020_04_me_f1.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;	
}

@media only screen and (max-width: 767px) {
  .home-bg {
    background-image: none;
  }
}


/*
///////////////////////////////////////////////////////////////////	
	Typography
///////////////////////////////////////////////////////////////////
*/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6  {
	font-family: 'Alfa Slab One', sans-serif;
	font-weight: 400;
}


.card-subtitle {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

.text-secondary {
	color: var(--grey-05)!important;
}

/*
///////////////////////////////////////////////////////////////////	
	Navbar Elements	Bootstrap 5 (05-2021)
///////////////////////////////////////////////////////////////////
*/

.navbar {
	padding-top: env(safe-area-inset-top);
}

.nav-link {
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	font-weight: 800;
	font-size: 0.875rem;
}

.navbar-custom {
	background-color: var(--background);
	border-bottom: 1px solid var(--grey-02);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
	color: var(--grey-06);
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
	color: var(--link);
	font-weight: 600;
}

/* change the color of active */
.navbar-custom .nav-item.active .nav-link {
	color: var(--grey-05);
}

/* change the color of hovered links */
.navbar-custom .nav-item:hover .nav-link {
	filter: brightness(50%);
	text-decoration: none;
}

/* change the color of disabled */
.navbar-custom .navbar-nav .nav-link.disabled {
	color: var(--grey-04)
}


/* for dropdown only - change the color of dropdown */
.navbar-custom .dropdown-menu {
	background-color: var(--grey-10);
}

.navbar-custom .dropdown-item {
	color: var(--grey-10);
}

.navbar-toggler:active,
.navbar-toggler:focus {	
	box-shadow: none;
}

button .navbar-togger {
	color: var(--grey-10);
	background-color: var(--grey-10);
}


/*
///////////////////////////////////////////////////////////////////	
	Links	
///////////////////////////////////////////////////////////////////
*/

 
a {
    color: var(--link);
    word-wrap: break-word;
    font-weight: 700;
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: var(--link-hover);
    text-decoration: underline;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

/* Fancy Underline Effect */

a.underline {
	text-decoration: none;
	position: relative;
	font-weight: 700;
}

a.underline:hover,
a.underline:focus {
    color: var(--link);
    text-decoration: none;
    outline: 0;
}

a.underline:after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 2px;
	width: 0%;
	border-bottom: 10px solid var(--link-underline);
	transition: 0.2s;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;

}
a.underline:hover:after {
	width: 102%;
}


/*
///////////////////////////////////////////////////////////////////	
	Buttons	
///////////////////////////////////////////////////////////////////
*/

.btn {
	-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
	-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
	-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
	-o-transition: color 0.1s ease-in, background 0.1s ease-in;
	transition: color 0.1s ease-in, background 0.1s ease-in;
}

.btn.focus, .btn:focus {
	box-shadow: none;
}

.btn:before,
.btn:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

.btn-primary {
	background-color: var(--link);
}

.btn-primary:hover {
	color: var(--grey-01);
	background-color: var(--link-hover);
	border-color: var(--link-hover);
	text-decoration: none;
}

.btn-primary:focus {
	color: var(--grey-01);
}

.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show>.btn-primary.dropdown-toggle {
	color: var(--grey-01);
	background-color: var(--link-pressed);
	border-color: var(--link-pressed);
}

.btn-primary:not(:disabled):not(.disabled).active:focus, 
.btn-primary:not(:disabled):not(.disabled):active:focus, 
.show>.btn-primary.dropdown-toggle:focus {
	box-shadow: none;
}

.btn-outline-secondary {
	color: var(--grey-05);
	border-color: var(--grey-05);
}

.btn-outline-secondary:focus {
	color: var(--grey-06);
}

.btn-outline-secondary:hover {
	background-color: var(--grey-05);
	border-color: var(--grey-05);
	text-decoration: none;
}

.btn-outline-secondary:not(:disabled):not(.disabled).active, 
.btn-outline-secondary:not(:disabled):not(.disabled):active, 
.show>.btn-outline-secondary.dropdown-toggle {
	color: var(--grey-02);
	background-color: var(--grey-06);
	border-color: var(--grey-06);
}

.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
 .btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
  .show>.btn-outline-secondary.dropdown-toggle:focus {
	box-shadow: none;
}



/*
///////////////////////////////////////////////////////////////////	
	Scaffolding
///////////////////////////////////////////////////////////////////
*/

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--grey-02);
    margin: 1.5rem 0 3rem 0;
    padding: 0;
}

.bg-primary {
	background-color: var(--link)!important;
}

.bg-primary-span {
	color: var(--link);
}


/*
///////////////////////////////////////////////////////////////////	
	Carousel
///////////////////////////////////////////////////////////////////
*/

.carousel-indicators li {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 100px;
	margin-left: 4px;
	margin-right: 4px;
}

.carousel-control-next, .carousel-control-prev {
	width: 8%;
	opacity: 0.2;
}

.carousel-opal {
	border-radius: 1rem;
	background-color: var(--color-opal);
}

.carousel-blue {
	border-radius: 1rem;
	background-color: var(--color-blue);
}

.carousel-eggshell {
	border-radius: 1rem;
	background-color: var(--color-yellow);
}

.carousel-beige {
	border-radius: 1rem;
	background-color: var(--color-beige);
}

.carousel-gray {
	border-radius: 1rem;
	background-color: var(--grey-04);
}

.iphone-rounded {
  border-radius: 38px; /* tweak if needed */
  overflow: hidden; /* ensures corners actually clip the gif */
  display: block;
}



/*
///////////////////////////////////////////////////////////////////	
	Discography / Music
///////////////////////////////////////////////////////////////////
*/
.card-disco {
	background: var(--color-blue-transparent);
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.badge-disco {
	background-color: var(--grey-02);
	color: var(--grey-05);
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
}


li.disco {
	font-size: 0.815rem;
	padding-bottom: .5rem;
}

/*
///////////////////////////////////////////////////////////////////	
	Work Experience
///////////////////////////////////////////////////////////////////
*/

.work-label {
	color: var(--grey-06);
}

/*
///////////////////////////////////////////////////////////////////	
	Route Spinner
///////////////////////////////////////////////////////////////////
*/

/* Focus handling for <main id="route-outlet"> */
#route-outlet:focus { outline: none; box-shadow: none; }
#route-outlet:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
/* Temporarily suppress ring after programmatic focus from click/touch */
#route-outlet.focus-stealth:focus,
#route-outlet.focus-stealth:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

#route-outlet .carousel-control-prev:focus,
#route-outlet .carousel-control-next:focus,
#route-outlet .slick-slider a:focus,
#route-outlet .gallery a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Make #route-outlet host an overlay we can fade */
#route-outlet {
  position: relative;
  contain: paint;            /* keeps the overlay cheap */
}
#route-outlet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0,0,0,.12);  /* dim; tweak alpha if you want */
  opacity: 0;
  transition: opacity .18s ease;
  will-change: opacity;
}
#route-outlet.is-swapping::after { opacity: 1; }

#route-outlet.fade { transition: opacity .25s linear; }