:root {
	--text-color:black;
	--border-color:#e5e5e5;
	
}

@import "https://unpkg.com/open-props/easings.min.css";

.sun-and-moon > :is(.moon, .sun, .sun-beams) {
  transform-origin: center;
}

.sun-and-moon > :is(.moon, .sun) {
  fill: var(--icon-fill);
}

.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {
  fill: var(--icon-fill-hover);
}

.sun-and-moon > .sun-beams {
  stroke: var(--icon-fill);
  stroke-width: 2px;
}

.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams {
  stroke: var(--icon-fill-hover);
}

[data-theme="dark"] .sun-and-moon > .sun {
  transform: scale(1.75);
}

[data-theme="dark"] .sun-and-moon > .sun-beams {
  opacity: 0;
}

[data-theme="dark"] .sun-and-moon > .moon > circle {
  transform: translateX(-7px);
}

@supports (cx: 1) {
  [data-theme="dark"] .sun-and-moon > .moon > circle {
    cx: 17;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sun-and-moon > .sun {
    transition: transform .5s var(--ease-elastic-3);
  }

  .sun-and-moon > .sun-beams {
    transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3);
  }

  .sun-and-moon .moon > circle {
    transition: transform .25s var(--ease-out-5);
  }

  @supports (cx: 1) {
    .sun-and-moon .moon > circle {
      transition: cx .25s var(--ease-out-5);
    }
  }

  [data-theme="dark"] .sun-and-moon > .sun {
    transition-timing-function: var(--ease-3);
    transition-duration: .25s;
    transform: scale(1.75);
  }

  [data-theme="dark"] .sun-and-moon > .sun-beams {
    transition-duration: .15s;
    transform: rotateZ(-25deg);
  }

  [data-theme="dark"] .sun-and-moon > .moon > circle {
    transition-duration: .5s;
    transition-delay: .25s;
  }
}

.theme-toggle {
  --size: 2rem;
  --icon-fill: hsl(0deg 0% 70%);
  --icon-fill-hover: hsl(0deg 0% 43%);

  background: none;
  border: none;
  padding: 0;

  inline-size: var(--size);
  block-size: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  outline-offset: 5px;

  & > svg {
    inline-size: 100%;
    block-size: 100%;
    stroke-linecap: round;
  }

  @nest [data-theme="dark"] & {
    --icon-fill: hsl(0deg 0% 0%);
    --icon-fill-hover: hsl(0deg 0% 0%);
  }

  @media (hover: none) {
    --size: 48px;
  }
}

.uk-navbar-item,.uk-navbar-nav>li>a,.uk-navbar-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: .25em;
	box-sizing: border-box;
	min-height: 80px;
	font-size: 18px;
	text-decoration: none
	}

.uk-navbar-nav>li>a {
	padding: 0 0;
	color: #666; 
	transition: .1s ease-in-out;
	transition-property: color,background-color,border-color,box-shadow;
	position: relative;
	z-index: 1;
	font-weight: 400;
	text-transform: capitalize
	}

.uk-navbar-nav>li>a::before {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	bottom: -1px;
	height: 3px;
	background-color: var(--text-color);
	transition: .3s ease-in-out;
	transition-property: background-color,border-color,box-shadow,height,left,right,opacity;
	--uk-navbar-nav-item-line-margin-horizontal: 0;
	left: var(--uk-navbar-nav-item-line-margin-horizontal);
	right: 100%
	}

.uk-navbar-primary .uk-navbar-nav>li>a {
	font-size: 18px
	}

.uk-navbar-primary .uk-navbar-nav>li>a {
	font-weight: 400
	}

.uk-navbar-nav>li:hover>a,.uk-navbar-nav>li>a[aria-expanded=true] {
	 color: #000; 
	}

.uk-navbar-nav>li:hover>a::before,.uk-navbar-nav>li>a[aria-expanded=true]::before {
	right: var(--uk-navbar-nav-item-line-margin-horizontal)
	}

.uk-navbar-nav>li>a:active {
	color: #000; 
	}

.uk-navbar-nav>li.uk-active>a {
	 color: #000; 
	}

.uk-navbar-nav>li.uk-active>a::before {
	right: var(--uk-navbar-nav-item-line-margin-horizontal)
	}


.uk-height-expand {
	height: calc(100vh - 5rem);
	}

.uk-card-default > .uk-card-body, .uk-card-default > div {
	color: #333;
	}	

.uk-text-meta {
    color: #333;
}

a, .uk-link {
	color: #333;
	text-decoration: none;
	cursor: pointer;
	}

a:hover {
	color: #333;
	text-decoration: none;
	}

.progressBar {
	position: fixed;
	top: 0;
	left: 0;
	height: 8px;
	background: linear-gradient(to right, var(--text-color) ,  var(--text-color) );
	width: 0%;
	z-index: 100;
	transition: width 0.2s ease-out;
	}

.nav-border-bottom {
	border-bottom: 2px solid var(--border-color);
	
	}


.icon-bounce {
	background-color: #fff;
	color: #000;
	border-radius: 50%;
	opacity: 0.8;
	-webkit-animation: bounce 2s infinite 2s;
	animation: bounce 2s infinite 2s;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
	}

@keyframes bounce {
	0%,
	100%,
	20%,
	50%,
	80% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		}
	40% {
		-webkit-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		transform: translateY(-10px);
		}
	60% {
		-webkit-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		transform: translateY(-5px);
		}
	}

	mark{
		background: orange;
		color: black;
	}
	
	.page-load-status {
		display: none; /* hidden by default */
		padding-top: 20px;
		text-align: center;
		color: #777;
	}