/* CSS COLOR VARIABLES */
:root {
    --base-color:#F2EDEB;
    --secondary-color:#925E78;
    --tertiary-color:#FABC2A;
    --accent1-color:#F05365;
    --accent2-color:#BD93BD;
    --highlight-color:#FFFAFD;
}


/* FONTS */

@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto+Mono&display=swap');


/* BASIC ELEMENTS */

html {
  scroll-behavior: smooth;
  font-family: 'Montserrat', sans-serif;
}

body {
  background-color: var(--base-color);
  font-family: 'Montserrat', sans-serif;
}

h1 {
  color: var(--accent1-color);
}

h4 {
  color: var(--accent2-color);
}

p {
  color: var(--accent2-color);
  font-family: verdana;
  font-size: 20px;
}


/* NAVBAR */

.links ul {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  direction:ltr;
}

.links li {
  float: left;
  background-color: var(--secondary-color);
  margin: 5px;
  border-radius: 15px;
}

.links li a{
  display: block;
  color: var(--accent2-color);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: .5s;
  border-radius: 15px;
}

.links li a:hover{
  background-color: var(--tertiary-color);
  color: var(--base-color);
  transition: .5s;
  text-decoration: none;
}

.links .name{
    position: relative;
}

.links .name li{
  float: left;
  background-color: transparent;
}

.links .name li a{
  color: var(--accent1-color);
  background-color: transparent;
}

.links .name a:hover{
  color: var(--tertiary-color);
  background-color: transparent;
  text-decoration: none;
}

.navbar{
  display: inline-block;
  z-index: 10;
  position: sticky;
  top: 0;
  width: 100%;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, .15);
  backdrop-filter: blur(5px);
}

.nav-right{
  float: right;
}


/* SECTIONS */
/* SECTIONS - General*/

.section{
  margin: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.section h1{
  padding-top: 90px;
}

.text-body{
  height: 200px;
}

.left{
  float: left;
}

.right{
  float: right;
}

.overlay{
  position: absolute;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.text-body{
  height:100%;
}

/* SECTIONS - Big */
.big{
  position: relative;
  margin: 0px;
  background: rgb(250,188,42);
  background: radial-gradient(circle, var(--tertiary-color) 0%, var(--accent1-color) 57%, var(--accent2-color) 100%);
  background-size: 1500% 1000%;
  animation: gradient 30s ease infinite;
  height: 700px;
  text-align: center;
}

.big .gradient{
  top:600px;
  height: 100px;
	background: -moz-linear-gradient(top, transparent 0%, var(--base-color) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(137, 255, 241, 0)), color-stop(100%, var(--base-color))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, transparent 0%, var(--base-color) 100%); /* Chrome10+, Safari5.1+ */
	background: -o-linear-gradient(top, transparent 0%, var(--base-color) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, transparent 0%, var(--base-color) 100%); /* IE10+ */
	background: linear-gradient(to bottom, transparent 0%, var(--base-color) 100%); /* W3C */
	filter: progid: dximagetransform.microsoft.gradient(startColorstr='transparent', endColorstr='white', GradientType=0); /* IE6-9 */
}

.big h1{
  padding-top: 0px;
  z-index: 1;
  font-family: 'Roboto Mono', monospace;
  position: relative;
  color: var(--base-color);
  width: 15em;
  font-size: 50px;
  top: 45%;
  margin: 0 auto;
  border-right: 2px solid rgba(255,255,255,.75);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
  animation: typewriter 3s steps(25) 1s 1 normal both,
             blinkTextCursor 500ms steps(45) infinite normal;
}

.big h4{
  z-index: 1;
  position: relative;
  top: 300px;
}

.big .img-bg{
  position: absolute;
  z-index: 0;
  top: 0px;
  left: 0px;
  opacity: 10%;
  width: 100%;
  height: 100%;
  background-image: url("img/code1.gif");
  background-size: 100%;
}

/* SECTIONS - Skills */
.skills .row{
  height: 100%;
  margin-bottom: 5px;
}

.skills .col .text-body{
  background-color: var(--highlight-color);
  border-color: var(--base-color);
  border-radius: 100vw;
  border-left-width: 4vw;
  border-right-width: 4vw;
  border-style: solid;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

@media (max-width:1500px){
  .skills .col .text-body{
    margin: 0px;
    border-radius: 20px;
    border-left-width: 10px;
    border-right-width: 10px;
  }
}

.skills .text-body{
  //padding-left: 20%;
}

.skills .description{
  text-align: center;
}

.skills li{
  list-style: none;
}

/* SECTIONS - Experience */
.experience .text-body{
  height: 70vh;
}

.experience ol{
  position: relative;
  top: 75vh;
}

.experience .left{
  overflow: hidden;
}

.experience .left iframe{
  overflow: hidden;
  width: 45vw;
  height: 1000vh;
  position: absolute;
  top: 0px;
  left: 10px;
  animation: scrollIframe 8s infinite ease alternate;
}

.experience .left img{
  overflow: hidden;
  width: 45vw;
  position: absolute;
  top: 0px;
  left: 10px;
  animation: scrollImg 4s infinite ease alternate;
}

.experience .dark{
  width: 45vw;
  opacity: 0;
  background-color: black;
  margin-left: 10px;
  transition: 1s;
}

.experience .dark h4{
  text-align: center;
  font-size: 50px;
  padding-top: 30vh;
  color: var(--base-color);
}

.experience .dark:hover{
  opacity: .5;
  transition: 1s;
}

.experience .right{
  width: 40vw;
  height: 70vh;
}

.experience .carousel-indicators{
  z-index: 0;
}

.experience .carousel-indicators li {
  background-color: var(--accent2-color);
  transition: 1s;
}

.experience .carousel-indicators li.active {
  background-color: var(--secondary-color);
  transition: 1s;
}

.experience .carousel-control-prev-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f05365' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");}
.experience .carousel-control-next-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f05365' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");}

/* SECTION - Projects */
.projects{
  position: relative;
}

.projects .text-body{
  height: 100px;
}

.row{
  position: relative;
  margin-bottom: 20px;
  height: 50px;
}

.row .one{
  background-color: var(--tertiary-color);
}
.row .two{
  background-color: var(--accent1-color);
}
.row .three{
  background-color: var(--secondary-color);
}

.highlight{
  z-index: 1;
  top: 0px;
  position: relative;
  transition: top .5s, z-index 0s;
}

.highlight:hover{
  z-index: 2;
  top: -50px;
  transition: .5s;
  transition: top .5s, z-index 1s;
}

.highlight .description{
    margin: 10px;
}

.highlight .text-body{
    margin: 10px;
}

.date h4{
  position: relative;
  z-index: 1;
  text-align: right;
	text-shadow: -1px 1px 0 var(--base-color),
				  1px 1px 0 var(--base-color),
				 1px -1px 0 var(--base-color),
				-1px -1px 0 var(--base-color);
}

/* FOOTER */
.footer h1{
  text-align: center;
}

.footer ul{
  float: center;
}

.footer .links{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ANIMATIONS */
@keyframes typewriter{
  from{width: 0;}
  to{width: 15em;}
}

@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes scrollIframe{
  from{top: 0;}
  to{top: -200vh;}
}

@keyframes scrollImg{
  from{top: 0;}
  to{top: -20vh;}
}

@@keyframes bounceCard {
  from{top: 0;}
  to{top: -10px;}
}