html { behavior: smooth; }
body {
    font-family: 'Lato', sans-serif;
    margin: 0px;
    color: #575757;
    background-color: #FFFFFF;
}

.header-pic {
    width: 100%;
    height: 150px;
    background-image: url("../assets/photo-1515879218367-8466d910aaa4.webp");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.header-profile-pic {
    display: none;
    justify-content: center;
    clip-path: circle(49% at 50% 50%);
    position: absolute;
    top: 10%;
    left: calc((100% / 2) - 114px);
    z-index: 1;
}

.nav-container {
    position: relative;
}

li > a {
    text-decoration: none;
    color: #E94560;
}

.cursor {
    cursor: pointer;
}


.nav-ul {
    position: fixed;
    top: 46%;
    left: 2%;
    z-index: 3;
}

ul {
    list-style: none;
}

.bullet {
    background: #575757;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: inline-block;
}

.current {
    background: #E94560;
}

.bullet:hover {
    transition: .5s;
    transform: scale(1.1, 1.1);
    background: #E94560;
}

li {
    margin-top: .5em;
    color: #E94560;
}

#home {
    display: inline-block;
}

.about-container-body > p {
    line-height: 1.5em;
}

.nav-text {
    display: none;
}

#exp {
    margin-top: 2em;
}

.main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10em;
}

.main-no-col { 
    flex-direction: row !important; 
    flex-wrap: wrap;
    align-items: flex-start;
}

#hero-img {
    width: 100%
}

.hero-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.main-title {
    margin-top: 3em;
    padding: 0 13em;
}

.main-name {
    font-weight: bold;
    font-size: 5em;
    color: #575757;
}

.full-stack {
    color: #939393;
    font-weight: bold;
    margin-top: -1em;
    margin-top: -0.3em;
    font-size: 3.5em;
    letter-spacing: 1px;
}

.minor {
    font-weight: lighter;
    font-size: 20px;
    color: #878787;
    line-height: 28px;
}

.mt { margin-top: 10px;}
.mr { margin-right: 2em;}
.mt-2 { margin-top: 2em;}
.mb { margin-bottom: 10px; }
.mt-btn { margin-top: 1em; }
.mt-btn-see { margin-top: 4em; }
.no-mt { margin-top: 0;}

.link:link, .link:visited {
    text-decoration: none;
}

.CTA-btn {
    background-color: #E94560;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: large;
    color: white;
    padding: 1em;
    text-align: center;
    text-decoration: none;
    filter: drop-shadow(0px 4px 30px rgba(0, 0, 0, 0.1));
    border: none;
    border-radius: 8px;
    box-shadow: 2px 4px 30px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;   
    margin-right: 1em;
}

.CTA-btn:hover {
    transition: 0.5s;
    background-color: #9c2b3e;
}

.CTA-btn:focus {
    outline: none;
}

#about-sec {
    z-index: 2;
    position: relative;
    top: -11vh;
}

.divider-section {
    position: relative;
    margin-top: 5em;
    height: 200px;
    text-align: center;
}

.divider-section > p {
    position: absolute;
}

.section-title {
    color: white;
    font-weight: bold;
    font-size: 2em;
    top: 50%;
    left: calc((100% / 2) - (156px / 2));
}

.about-container {
    width: 50%;
}

.box {
    position: absolute;
    background: linear-gradient(177.33deg, #0B0E2C 23.34%, #E94560 157.52%);
    width: 100%;
    height: 300px;
    transform: skewY(-3deg);
}

.about-container-title {
    display: flex;
    margin-top: 5em;
}

.icon-title {
    margin-right: 1em;
}

.about-container-body {
    margin-top: 1em;
    color: #878787;
    font-size: 1.2em;
    font-weight: lighter;
    line-height: 1.3;
}

.title-card { margin-top: 0;}

.job-title {
    display: flex;
    align-items: flex-start;
}

.icon-title-job {
    width: 2%;
    padding-left: 3em;
    margin-right: 0.5em;
}

.job-title-text {
    font-weight: bold;
}

.job-text {
    padding-left: 4.5em;
    margin-top: 1em;
    margin-bottom: 2em;
}

#no-margin {
    margin-bottom: 0;
}

.portfolio-card > a {
    text-decoration: none;
    color: #575757;;
}

.about-container-body-stack {
    margin-top: 1em;
    display: grid;
    justify-items: center;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto;
    justify-content: space-between;
    align-content: space-between;
    grid-gap: 50px 10px;
    color: #878787;
    font-size: 1.2em;
    font-weight: lighter;
    line-height: 1.3;
}

.item-py {
    width: 46px;
    height: 43px;
    background: url("../assets/icons/python-gray-boris.svg") no-repeat;
}

.item-py:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
    background: url("../assets/icons/python-boris.svg") no-repeat;
}

.item-flask {
    width: 46px;
    height: 49px;
    background: url("../assets/icons/flask-gray-boris.svg") no-repeat;
}


.item-flask:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
    background: url("../assets/icons/flask-boris.svg") no-repeat;
}

.item-git {
    width: 46px;
    height: 49px;
    background: url("../assets/icons/git-gray-boris.svg") no-repeat;
}

.item-git:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
    background: url("../assets/icons/git-boris.svg") no-repeat;
}

.item-mysql {
    width: 57px;
    height: 39px;
    background: url("../assets/icons/mysql-gray-boris.svg") no-repeat;
}

.item-mysql:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
    background: url("../assets/icons/mysql-boris.svg") no-repeat;
}

.item-html {
    width: 43px;
    height: 43px;
    background: url("../assets/icons/html-gray-boris.svg") no-repeat;
}

.item-html:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
    background: url("../assets/icons/html-boris.svg") no-repeat;
}

.item-css {
    width: 51px;
    height: 51px;
    background: url("../assets/icons/css-gray-boris.svg") no-repeat;
}

.item-css:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
    background: url("../assets/icons/css-boris.svg") no-repeat;
}

.item-js {
    width: 51px;
    height: 51px;
    background: url("../assets/icons/js-gray-boris.svg") no-repeat;
}

.item-js:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
    background: url("../assets/icons/js-boris.svg") no-repeat;
}

.item-figma {
    width: 49px;
    height: 49px;
    background: url("../assets/icons/figma-gray-boris.svg") no-repeat;
}

.item-figma:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
    background: url("../assets/icons/figma-boris.svg") no-repeat;
}

.item-selenium {
    width: 45px;
    height: 47px;
    background: url("../assets/icons/selenium-gray-boris.svg") no-repeat;
}

.item-selenium:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
    background: url("../assets/icons/selenium-boris.svg") no-repeat;
}

.item-mongo {
    width: 176px;
    height: 46px;
    background: url("../assets/icons/mongo-gray-boris.svg") no-repeat;
}

.item-mongo:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
    background: url("../assets/icons/mongodb-boris.svg") no-repeat;
}

.item-spring {
    width: 86px;
    height: 63px;
    background: url("../assets/icons/spring-gray-boris.svg") no-repeat;
}

.item-spring:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
    background: url("../assets/icons/spring-boris.svg") no-repeat;
}

.item-stack:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
}

.portfolio-card {
    border-radius: 10px;
    width: 40em;
    margin-right: 2em;
    padding: 3em;
    margin-top: 2em;
    border: 0.5px solid rgba(230, 230, 230, 0.534);
    box-shadow: 2px 4px 30px 0 rgba(0, 0, 0, 0.1);
}

.portfolio-card:hover {
    transition: .5s;
}

.portfolio-card-grid {
    display: grid;
    grid-template-columns: 20% 50% 30%;
    grid-template-rows: auto auto auto;
}

@keyframes demobtn {
    from { margin-left: 0; }
    to { margin-left: 10px; }
}

.link-set > a:hover > i {
    animation: demobtn .5s 1;
    animation-fill-mode: forwards;
}

.portfolio-card-grid > h2 {
    margin-bottom: 0.2em;
}

.link-set{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon-card {
    width: 5em;
    grid-column: 1 / 2;
    grid-row: 1 / 4;

}

.contact-me {
    background: linear-gradient(177.33deg, #0B0E2C 23.34%, #E94560 157.52%);
    padding: 12em;
    margin-top: 4em;
}

.card-badge {
    display: flex;
    flex-wrap: wrap;
}

.card-body {
    font-size: 1.2em;
    font-weight: lighter;
}

.badge-container {
    display: flex;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 70%;
    line-height: 12px;
    margin-top: 5px;
    margin-right: 10px;
}

.badge-container-b {
    padding: 5px; 
    color: #FFFFFF;
    line-height: 12px;
    height: 12px;
}

.badge-text-container {
    background-color: #555;
    border-radius: 4px 0 0 4px;
}

.badge-right-container {
    border-radius: 0 4px 4px 0;
}

.blue {
    background-color: #007ec6;
}

.green {
    background-color: #97ca00;
}

.yellow {
    background-color: #dfb317;
}

.orange {
    background-color: #df7117;
}

.purple {
    background-color: rgb(173, 30, 173);
}

/* Stack section */

.rol-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.rol-card {
    background: #FFFFFF;
    border: 0.5px solid rgba(230, 230, 230, 0.534);
    width: 30%;
    padding: 2em;
    margin-right: 2em;
    box-sizing: border-box;
    box-shadow: 2px 4px 30px 0 rgb(0 0 0 / 10%);
    border-radius: 10px;
}

.rol-container > .rol-card:last-child { 
    margin-right: 0;
 }

.rol-style {
    font-size: 1.2em;
    font-weight: lighter;
    line-height: 1.3;
    color: #878787;
}

.rol-title { 
    font-weight: bold; 
}

/* Stack section */

/* CSS for free.html */
.free-wrapper {
    display: flex;
    justify-content: center;
}

.emoji > img{
    width: 15em;
    margin: 5em 0;
}

.wrapper {
    width: fit-content;
    text-align: center;
}

.lite-font {
    font-weight: 300;
    font-size: 2em;
}

/* CSS for free.html */

.no-shadow { filter: none !important; }

.btn-outline {
    background-color: #FFFFFF;
    color: #E94560;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: large;
    padding: 1em;
    text-align: center;
    text-decoration: none;
    filter: drop-shadow(0px 4px 30px rgba(0, 0, 0, 0.1));
    border: 1px solid #E94560;
    border-radius: 8px;
    cursor: pointer;   
}

.demo-btn { 
    padding: 10px !important;
    width: 50%;
    font-size: small;
}

.btn-outline:hover {
    background-color: #E94560;
    color: #FFFFFF;
    transition: 0.5s;
}

.contact-me > h2 {
    color: white;
    background-image: linea;
    text-align: center;
}

.contact-me-title {
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    margin-bottom: 3em;
}

.links {
    display: flex;
    justify-content: space-evenly;
    margin-top: 3em;
}

.links-icons {
    width: 30px;
}

.links-icons:hover {
    transition: .2s;
    transform: scale(1.2, 1.2);
}

footer {
    background-color: #120F2A;
    padding: 9em;
}

footer > p {
    font-size: small;
    text-align: center;
}

footer.p.span {
    line-height: 0%;
}