/* global variables */
:root {
	--primary-clr: #495579;
}
/* call variable example h1{
	color: var(--primary-clr)
} */

html, body{
	font-size:16px;
	color: #dfdfdf;
	background-color: #495579;
}
h1{
	color: black;
	text-align: center;
	padding: 40px;
	font-weight: bold;
	text-transform: uppercase;
}
h2{
	color: black;
padding: 20px;
font-weight: bold;
text-transform: uppercase;
}
/* li{
	color: black;
} */
h3{
	color: black;
padding: 20px;
}
h4 {
	color: #666;
	font-size: 20px;
}
a {
  color: #00d1b2;
}

a:hover {
  color: #00d1b2;
}
p{
	text-align: justify;
	padding: 10px;
}

div img{
	display: block;
	object-fit: contain;
	margin: auto;
	max-height: 70%;
	max-width: 70%;
}

ul{
	list-style: circle;
}

ul li::before{
	color: black;
}

main-rp{
	padding: 0px 10px;
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto auto;
	column-gap: 15px;
	row-gap: 0;
	align-content: space-evenly;
}

.index{
	overflow-y: auto;
	position: sticky;
	top: 0;
	border-collapse: collapse;
	background: rgb(38,49,89);
	height: auto;
	border: 2px solid rgb(0,49,89);
	grid-column: 1/2;
}
.avatar-index{
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle,  rgba(216,205,181,1) 30%, rgba(38,49,89,1) 57%);
}

.rp{
	grid-column: span 2;
	grid-row: span 2;
}

/* figures */

figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
	height: 80%;
}

figure img{
	width: 70%;
	aspect-ratio: 16/9;
	object-fit: contain;
	mix-blend-mode: color-burn;
}

figcaption {
  background-color: black;
  color: rgba(216,205,181,1);
  font-style: italic;
  padding: 2px;
	text-align: center;
}

/* cv section */

.cv{
	display: contents;
	text-align: center;
	padding: 2px;
	/* border: 2px solid rgba(7, 59, 79, 0.5); */
}


.nav-list {
  background-color: rgb(38,49,89);
  /* border: 1px solid #ccc; */
  padding: 10px;
	grid-column: 1/2;
	overflow-y: auto
	max-height: calc(100vh - 50px); /* Set the maximum height of the table of contents */
}

.nav-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin: 0;
  padding: 0;
}

.nav-list a {
  text-decoration: none;
	color: rgba(216,205,181,1);
}

.nav-list a:hover {
  text-decoration: underline;
}

.nav-list ul ul {
  margin-left: 10px;
}

.nav-list li:before {
  content: "• ";
  font-size: 18px;
  line-height: 1;
  margin-right: 5px;
	color: rgba(216,205,181,1);
}


section{
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.section-1 {
	background: rgb(38,49,89);
/* background: radial-gradient(circle,  rgba(216,205,181,1) 10%, rgba(38,49,89,1) 35%); */
}

.section-2 {
	background-color: rgb(38,49,89);
}

.section-3 {
	background-color: #0E282E;
}

.section-4 {
	background-color: #063647;
	padding: 0.2rem;
}

a.nav-item {
	color: #dfdfdf;
}

a.nav-item:hover {
	color: #fff;
}

.avatar{
	height:400px;
	border-radius: 50%;
	background: radial-gradient(circle,  rgba(216,205,181,1) 45%, rgba(38,49,89,1) 62%);
	animation:blur-in-expand 1.5s linear both} @keyframes blur-in-expand{0%{transform:scale(0);filter:blur(12px);opacity:0}100%{transform:scale(1);filter:blur(0);opacity:1}
}
/* .avatar:hover  {
animation:rotate-center 0.4s} @keyframes rotate-center{0%{transform:rotate(0)}100%{transform:rotate(360deg)}
} */
/* ----------------------------------------------
  Generated by AnimatiSS
  Licensed under FreeBSD License
  URL: https://xsgames.co/animatiss
  Twitter: @xsgames_
---------------------------------------------- */

.blur-in-expand{}

.intro-description{
	padding-top: 1rem;
}

.social-container img{
	max-width:100%;
	max-height:175px;
	margin-bottom:15px;
}

/* projects */

.title{
	background: #495579;
}
.project{
	display: grid;
	grid-template-columns: auto auto auto;
	/* overflow: hidden; */
}

/* ----------------------------------------------
	Generated by AnimatiSS
	Licensed under FreeBSD License
	URL: https://xsgames.co/animatiss
	Twitter: @xsgames_
---------------------------------------------- */

.jello-horizontal:hover {animation:jello-horizontal .9s linear both} @keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}


.project-figure {
	margin: 0 auto 1rem auto;
	max-height: 256px;
	max-width: 256px;
}

.box {
	background-color: #77898B;
	border: 2px solid rgba(7, 59, 79, 0.5);
}

.title {
	color: #fff;
	text-align: left;
	margin-bottom: 2rem;
}

.intro {
	text-align: center;
	width: 80%;
	margin: 0 auto;
}
.footer{
	padding: 15px;
	background: transparent;
	text-align: right;
}
.footer img{
	max-height: 40px;
}

.void-background {
	background-color: transparent;
}

/* download buttom */

.download-button {
    background-color:  #495579;
    border: none;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		animation:blur-in-expand 0.4s linear both}
		@keyframes blur-in-expand{0%{transform:scale(0);filter:blur(12px);opacity:0}
		100%{transform:scale(1);filter:blur(0);opacity:1}
		}

  .download-button:hover {
		animation:blur-out-expand 0.4s linear both} @keyframes blur-out-expand{0%{transform:scale(1);filter:blur(.01px);} 100%{transform:scale(2);filter:blur(12px);opacity:0}
    background-color:  #2980b9;
  }

  .download-button:active {
    background-color: #1c6ea4;
  }

/* scrollbar */

.scroll-container {
	height: 200px;
	overflow-y: scroll;
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 2.5px;
}

::-webkit-scrollbar-thumb:hover {
	background: #555;
}


/* canva */

.canva{
	width: auto;
	height: 500px;
	box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16);
	overflow: hidden;
	border-radius: 8px;
	will-change: transform;
	border: 1px #cccccc solid;
	padding: 4px;
	margin: auto;
	text-align: center;
}

.canva iframe{
	display: 	block;
	position: relative;
	width: 70%;
	height: 95%;
	top: 0;
	border: none;
	padding: 0;
	margin: 0 auto;
	text-align: center;
}
.canva li{
	  background-color: black;
	  color: rgba(216,205,181,1);
	  font-style: italic;
	  padding: 2px;
		text-align: center;
}


/* for code listing */

pre{
    counter-reset: line;
}
code{
    counter-increment: line;
}
code:before{
    content: counter(line);
}

code:before{
    -webkit-user-select: none;
}

	/* filter */

	.filter-sections {
		padding: 1rem;
		display: grid;
		grid-template-columns: repeat(3, auto);
		grid-gap: 5px;
	}

	.filterItems {
		/* background-color: #222f3e; */
		border-radius: 5px;
		display: none;
		overflow: hidden;
		/* height: 150px; */
	}

	.filterItems > img{
		width: 100%;
	}

	.show {
		display: block;
		animation: 350ms showing linear;
	}

	#sort-options{
		margin-top: 15px;
	}

	.btn {
		border: none;
		padding: 12px 16px;
		background-color: #495579;
		cursor: pointer;
		color: #CAD3C8;
		font-size: 0.9rem;
		/* font-family: sans-serif; */
		border-radius: 4px;
		transition: 350ms;
	}

	.btn:hover {
		color: #CAD3C8;
		background-color: #8395a7;
	}

	.btn:focus{
		outline: none;
		background-color: rgb(38,49,89);
		color: white;
		font-weight: bold;
	}

	.btn:active {
		background-color: #3B3B98;
		color: white;
	}

	@keyframes showing{
		from{
			opacity: 0;
		}to{
			opacity: 1;
		}
	}

/* imgessssssss */

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
img {
  vertical-align: middle;
}

/* cellphone */

@media only screen and (max-width: 768px) {
	.nav-menu {
		background-color: #063647;
	}
body{
	padding: 1%;
}
	.nav-toggle:hover {
		background-color: transparent;
	}

	.nav-toggle span {
		background-color: #dfdfdf;
	}

	.nav-toggle span:hover {
		background-color: #fff;
	}

	.nav-list {
    overflow: auto;
  }

  .nav-list ul {
    display: inline-block;
    margin-left: -20px;
  }

  .nav-list li {
    display: block;
    margin-left: 20px;
  }

  .nav-list li:before {
    content: none;
  }

}

/* For navegation list of titles and subtitles */