@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Belanosima:wght@400;600;700&display=swap');

html {
	font-size: 14px;
	background-color: #0F161A;
	scroll-behavior: smooth;
	text-shadow: 3px 3px 8px rgba(32, 32, 32, 0.48);
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
	position: relative;
	min-height: 100%;
}

body {
	font-family: 'Rubik', sans-serif;
	background-color: #0F161A;
	color: #f8f7f9;
}

/* main {
	position: relative;
	top: 50px;
} */

section, #about-koa, #forte, #movie-thing, #pong {
	overflow: hidden;
}

#skills, #experience, #work, #outro {
		padding-top: 50px !important;
		margin-top: -50px !important;
}



.text-underline {
	text-decoration: underline;
}

@media(max-width: 768px) {
	.background-top, .background-bottom {
		width: 200% !important;
	}
}

nav {
	font-family: 'Belanosima', sans-serif;
	backdrop-filter: blur(15px);
	background: rgba(255, 255, 255, 0.9);
	color: #f8f7f9;
	height: 50px !important;
	position: fixed !important;
    z-index: 10000;
    width: 100%;
	text-shadow: none !important;
}

.navbar-brand {
	font-family: 'Belanosima', sans-serif;
	font-weight: 400;
	color: #000;
	font-size: 36px;
}

.navbar button i {
	color: #000;
	font-size: 30px;
}


#navbarDropdown.show, #navbarDropdown.collapsing {
	backdrop-filter: blur(15px);
	background: rgba(255, 255, 255, 0.9);
}

@media(min-width: 576px) {
	#navbarDropdown.show, #navbarDropdown.collapsing {
		backdrop-filter: blur(0px);
		background: transparent;
	}
}

.navbar-brand:hover {
	color: #000 !important;
}

.nav-item a {
	line-height: 1;
	border: none !important;
}
.nav-item a:hover {
 background-color: #258cfb !important;
 transition: ease .5s ;
 color: white !important;

}

@media(max-width: 576px) {
	.navbar-brand {
		line-height: 0;
		font-size: 25px;
	}

	
	#navbarDropdown {
		top: 6px;
		position: relative;
	}
}

.navbar-brand span {
	position: relative;
	left: 4px;
}

.nav-link {
	color: #000 !important;
}

@media(max-width: 576px) {
	
	
	.nav-link {
		font-size: 1.25em;
	}
}


/* START SHIFTING COLOR TEXT */
.shifting-color-text {
	--bg-size: 400%;
	--color-one: #628fa7;
	--color-two: #bd719d;
	font-family: sans-serif;
	font-size: clamp(3rem, 25vmin, 8rem);
	background: linear-gradient( 90deg, var(--color-one), var(--color-two), var(--color-one) ) 0 0 / var(--bg-size) 100%;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: none !important;
}

@media (prefers-reduced-motion: no-preference) {
	.shifting-color-text {
		animation: move-bg 15s linear infinite;
	}

	@keyframes move-bg {
		to {
			background-position: var(--bg-size) 0;
		}
	}
}
/* END SHIFTING COLOR TEXT */

/* START OF INTRO STYLES */

#intro, #skills, #experience, #work {
	min-height: 100vh;
}

#intro:target, #skills:target, #experience:target, #work:target, #outro:target {
	scroll-margin-top: 50px;
   }

   #outro {
		min-height: 75vh;
	}

@media(max-width: 576px) {
	#outro {
		min-height: 90vh;
	}
	
}

#intro {
	position: relative;
}

#intro .background-top {
	width: 100%;
    height: auto;
    position: absolute;
    top: -50px;
}

@media(max-width: 576px) {
	#intro .background-top {
		top: 0px;
	}
}

#intro h1 {
	font-family: 'Rubik', sans-serif;
	font-weight: 800;
	font-size: 65px;
}

#intro .container {
	z-index: 5000;
}

@media(max-width: 768px) {
	#intro .container {
		margin-top: 50px !important;
		padding-bottom: 50px !important;
		
	}
}

#intro .container div img {
	height: 150px;
	border-radius: 50%;
}

#intro .container div:last-child {
	position: absolute;
	bottom: 0;
}
#intro .container div:last-child a{
	color: white;
}
#scrollDownIntro.show {
	opacity: 1;
	transition: ease .5s ;
}
#scrollDownIntro.hide {
	opacity: 0;
	transition: ease .5s ;
}
/* END OF INTRO STYLES */

/* START GLASS EFFECT */
.glass{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.37);
}

/* END GLASS EFFECT */

/* START SKILLS SECTION */
#skills {
	position: relative;
}

#skills .glass {
	border-radius: 20px;
}

.glass {
	z-index: 10;
}
@media(min-width: 768px) {
	#skills .glass {
		max-width: 75%;
	}
}

.progress-bar {
	background: #f8f7f9;
	height: 10px;
	border-radius: 5px;
}

.progress-bar div {
	height: 10px;
	border-radius: 5px;
	width: 0%;
}

.progress-bar div span {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	background: #fff;
	float: right;
	margin-top: -15px;
	margin-right: -20px;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
}

.html.animation{
	background-color: #258cfb;
	animation: html 1.5s ease forwards;
}
.css.animation{
	background-color: #258cfb;
	animation: css 1.5s ease forwards;
}
.javascript.animation{
	background-color: #258cfb;
	animation: javascript 1.5s ease forwards;
}
.bootstrap.animation{
	background-color: #258cfb;
	animation: bootstrap 1.5s ease forwards;
}
.jquery.animation{
	background-color: #258cfb;
	animation: jquery 1.5s ease forwards;
}
.csharp.animation{
	background-color: #258cfb;
	animation: csharp 1.5s ease forwards;
}
.python.animation{
	background-color: #258cfb;
	animation: python 1.5s ease forwards;
}

@keyframes html {
	100% {
		width: 90%;
	}
}
@keyframes css {
	100% {
		width: 85%;
	}
}
@keyframes javascript {
	100% {
		width: 70%;
	}
}
@keyframes bootstrap {
	100% {
		width: 88%;
	}
}
@keyframes jquery {
	100% {
		width: 76%;
	}
}
@keyframes csharp {
	100% {
		width: 30%;
	}
}
@keyframes python {
	100% {
		width: 22%;
	}
}

.skills-logo img{
	max-width: 36px;
	max-height: 36px;
}

#skills .background-bottom {
	width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
}
/* END SKILLS SECTION */

/* START EXPERIENCE SECTION */
#experience {
	position: relative
}

#experience .background-top {
	width: 100%;
    height: auto;
    position: absolute;
    top: 0;
}

#experience .background-top svg, #outro .background-top svg, #intro .background-top svg, footer .background-bottom svg{
	transform: scale(-1, 1);
  transform-origin: center;
}

#experience .container-fluid h2 {
	z-index: 100;
}

/* ================ The Timeline ================ */

.timeline {
	position: relative;
	width: 700px;
	margin: 0 auto;
	margin-top: 20px;
	padding: 1em 0;
	list-style-type: none;
  }
  
  .timeline:before {
	position: absolute;
	left: 50%;
	top: 0;
	content: ' ';
	display: block;
	width: 6px;
	height: 100%;
	margin-left: -3px;
	background: rgb(80,80,80);
	background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
	background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
	background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
	background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
	background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
	
	z-index: 5;
  }
  
  .timeline li {
	padding: 1em 0;
  }

  .timeline li div{
	opacity: 0;
  }

  .timeline li div.fade-in {
	opacity: 1;
	transition: ease 1s ;
  }
  
  .timeline li:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
  }
  
  .direction-l {
	position: relative;
	width: 320px;
	float: left;
	text-align: right;
  }
  
  .direction-r {
	position: relative;
	width: 320px;
	float: right;
  }
  
  .flag-wrapper {
	position: relative;
	display: inline-block;
	text-align: center;
  }
  
  .flag {
	position: relative;
	display: inline;
	padding: 6px 10px;
	border-radius: 5px;
	color: #FFF;
	font-weight: 600;
	text-align: left;
  }
  
  .direction-l .flag:before,
  .direction-r .flag:before {
	position: absolute;
	top: 50%;
	right: -65px;
	content: ' ';
	display: block;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #fff;
	border-radius: 10px;
	border: 4px solid #737373;
	z-index: 10;
  }
  
  .direction-r .flag:before {
	left: -65px;
  }
  
  .time-wrapper {
	display: inline;
	line-height: 1em;
	font-size: 0.66666em;
	vertical-align: middle;
  }

  @media(max-width: 576px) {
	.flag {
		font-size: 1.2em;
	}
	.time-wrapper {
		font-size: .9em;
	  }
	.desc {
		font-size: 1em !important;
	}
  }
  
  .direction-l .time-wrapper {
	float: left;
  }
  
  .direction-r .time-wrapper {
	float: right;
  }
  
  .time {
	display: inline-block;
	padding: 4px 6px;
  }
  
  .desc {
	margin: 1em 0.75em 0 0;
	
	font-size: 0.77777em;
	font-style: italic;
	line-height: 1.5em;
  }
  
  .direction-r .desc {
	margin: 1em 0 0 0.75em;
  }
  
  /* ================ Timeline Media Queries ================ */
  
  @media screen and (max-width: 767px) {
  
  .timeline {
	   width: 100%;
	  padding: 4em 0 1em 0;
  }
  
  .timeline li {
	  padding: 2em 0;
  }
  
  .direction-l,
  .direction-r {
	  float: none;
	  width: 100%;
  
	  text-align: center;
  }
  
  .flag-wrapper {
	  text-align: center;
  }
  
  .flag {
	  z-index: 15;
  }
  
  .direction-l .flag:before,
  .direction-r .flag:before {
	position: absolute;
	top: -45px;
	  left: 50%;
	  content: ' ';
	  display: block;
	  width: 20px;
	  height: 20px;
	  margin-left: -9px;
	  border-radius: 10px;
	  border: 4px solid #737373;
	  z-index: 10;
  }

  .direction-r:first-child .flag:before {
	  margin-left: -10px;
  }
  
  .time-wrapper {
	  display: block;
	  position: relative;
	  margin: 4px 0 0 0;
	  z-index: 14;
  }
  
  .direction-l .time-wrapper {
	  float: none;
  }
  
  .direction-r .time-wrapper {
	  float: none;
  }
  
  .desc {
	  position: relative;
	  margin: 1em 0 0 0;
	  padding: 1em;
	  -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	  -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	  box-shadow: 0 0 1px rgba(0,0,0,0.20);
	  
	z-index: 15;
  }
  
  .direction-l .desc,
  .direction-r .desc {
	  position: relative;
	  margin: 1em 1em 0 1em;
	  padding: 1em;
	  
	z-index: 15;
  }
  
  }
  

/* END EXPERIENCE SECTION */

/* START WORK SECTION */

#work {
	position: relative;
}

#work .container .row .col-sm-6 {
	height: 400px;
}

#work .card-body {
	position: relative;
}

#work .container .row div .card .card-body a {
	position: absolute;
	bottom: 0;
}

.card-img-top {
	border-radius: 10px;
}

#work .card .bg-image {
	background-position: center;
	background-size: cover;
	height: 150px;
	border-radius: 10px;
}

#work .container .row .col-sm-6:nth-child(1) .card .bg-image, #experienceCarousel .carousel-inner .carousel-item:nth-child(1) .card .bg-image {
	background-image: url("/content/images/koa.jpg");
}

#work .container .row .col-sm-6:nth-child(2) .card .bg-image, #experienceCarousel .carousel-inner .carousel-item:nth-child(2) .card .bg-image {
	background-image: url("/content/images/forte.jpg");
}

#work .container .row .col-sm-6:nth-child(3) .card .bg-image, #experienceCarousel .carousel-inner .carousel-item:nth-child(3) .card .bg-image {
	background-image: url("/content/images/movie-thing.jpg");
}

#work .container .row .col-sm-6:nth-child(4) .card .bg-image, #experienceCarousel .carousel-inner .carousel-item:nth-child(4) .card .bg-image {
	background-image: url("/content/images/pong.jpg");
}

#experienceCarousel .carousel-indicators {
	bottom: -50px;
}

#work .btn-primary {
	background-color: #628fa7;
	border: 0;
}

#work .btn-primary:hover {
	background-color: #405d6d;
	transition: ease .5s ;
}

#work .container .row div .card{
	opacity: 0;
	z-index: 5000;
  }

  #work .container .row div  .card.fade-in {
	opacity: 1;
	transition: ease 1s ;
  }

#work .container .row .col-sm-6, #work .container .carousel .carousel-inner .carousel-item{
	height: 425px;
}
#experienceCarousel .carousel-inner .carousel-item .card {
	background-color: transparent;
	border: none;
}

#experienceCarousel .carousel-inner .carousel-item .card .bg-image {
	background-position: top;
	height: 250px;
}

#work .background-bottom {
	width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
}

/* END WORK SECTION */

/* START OUTRO SECTION */
#outro {
	position: relative;
}

#outro .background-top {
	width: 100%;
    height: auto;
    position: absolute;
    top: 0;
}
#outro .container{
	position:relative;
	top: -50px;
	z-index: 5000;
  }
#outro .container p{
	opacity: 0;
	line-height: 45px;
  }

  #outro .container p.fade-in {
	opacity: 1;
	transition: ease 1.5s ;
  }

#outro .container p a {
	color: #8ad6ff;
}
/* END OUTRO SECTION */

/* START FOOTER */
footer {
	text-shadow: none !important;
}

footer a{
    color: white;
}

footer .glass {
	border-radius: 0 !important;
	border: none !important;
    height: 250px;
    color: white;
	font-family: 'Belanosima', sans-serif;
	position: relative;
}

footer .container .row div:first-child a:hover{
    color: #FFF !important;
	text-decoration: none;
}

footer .glass .container .row div a:hover, footer .container .row ul li a:hover{
    color: #628fa7;
	text-decoration: none;
}

footer .glass .container .row ul {
	list-style-type: none;
}

footer .glass .container .row .footer-copyright {
	font-family: 'Rubik', sans-serif;
}

/* END FOOTER */

/* START WORK PAGES */
#about-koa, #forte, #movie-thing, #pong {
	position: relative;
	top: 0px !important;
}
#about-koa section, #forte section, #movie-thing section, #pong section {
	min-height: 90vh;
}

@media(max-width: 768px) {
	#about-koa section, #forte section,  #movie-thing section, #pong section {
		min-height: 110vh;
	}
}

@media(max-width: 576px) {
	#about-koa section, #forte section, #movie-thing section, #pong section {
		min-height: 120vh;
	}
}

#about-koa .background-top, #forte .background-top, #movie-thing .background-top, #pong .background-top {
	width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
}
/* END ABOUT KOA PAGE */