@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

:root {
    --marfil: #E4E4E4;
    --pink: #FF3660;
    --gray: #9F9F9F;
    --hoverBg: radial-gradient(circle at 0% 0%, #FF5E82, #2B2B2B);
    --Bg: radial-gradient(circle, #5f5f5f, #323232);

}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    font-family: "Hanken Grotesk", sans-serif;
    color: var(--marfil);
    font-weight: 200;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #171717;
    background: radial-gradient(circle, #303030, #171717);
    z-index: -1;
}

ul > li ,
.links-project > li{
    list-style: none;
}
a {
    text-decoration: none;
    color: var(--marfil);
}

/*Barra dezplazadora*/

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: rgb(14, 14, 14);
}
  
::-webkit-scrollbar-thumb {
    background: rgb(82, 82, 82); 
    border-radius: 8px; 
    width: 8px;
    height: 8px;
  }

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}

/*header*/

.main-mobile {
    display: none;
}

.social-media-mobile {
    display: none;
}

header {
    padding: 1.8rem 7%;
    position: fixed;
    width: 100%;
    background: linear-gradient(to bottom, #171717, #30303000);
    z-index: 2;
}

main {
    padding: 1.8rem 7%;
}

.header, .main-items, .social-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .logo img.logo-principal {
    height: 50px;
}

.logo-mobile, .icon-links {
    display: none;
}

.main-items {
    gap: 10px;
}

.social-items {
    gap: 20px;
}

.social-items li, .main-items li {
    font-size: 15px;
    font-weight: 300;
}

.main-items li {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--Bg);
    width: 115px;
    border-radius: 50px;
}

li.select {
    border: 1px solid #7c7c7c;
}

.main-items li a {
    padding: 5px 25px;
    border-radius: 50px;
}

.social-items li.item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.social-items a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
}
/*hover*/

.main-items li:hover {
    background: var(--hoverBg);
    border: 1px solid #7c7c7c;
}

.social-items a:hover {
    color: var(--pink);
}

/*Sección proyectos*/
/*Screen*/

.presentation {
    height: 80vh;
    background: linear-gradient(to bottom,#2f2f2f88, #1c1c1c00 );
    margin-top: 13vh;
    border-radius: 30px;
    padding: 50px 80px;
    animation: fade-up 0.5s;
}

.circle-colors {
    display: flex;
    align-items: center;
    gap: 10px;
}

.circle-screen {
    height: 27px;
    width: 27px;
    border: 1px solid #E4E4E4;
    border-radius: 50%;
}

.circle-screen.red {
    background: #F8466B;
    box-shadow: 0px 0px 15px #f46e5ccb;
}

.circle-screen.green {
    background: #F3BD4E;
    box-shadow: 0px 0px 15px #f3bc4ec0;
}

.circle-screen.yellow {
    background: #57C353;
    box-shadow: 0px 0px 15px #57c353c5;
}

.title h2 {
    font-size: 72px;
    font-weight: 500;
    letter-spacing: -1px;
    margin-top: 13vh;
    line-height: 83px;
}

.title h2 > span {
    color: var(--pink);
}

.subtitle {
    background: radial-gradient(circle, #353535c5, #2525255d);
    border: 1px solid #7c7c7c62;
    padding: 18px 20px;
    border-radius: 20px;
    width: 650px;
    margin-top: 5vh;
}

.subtitle h4,.subtitle h3 {
    font-size: 22px;
}  
.subtitle h3{
    font-weight: 400;
}  
.subtitle h4{
    font-weight: 300;
    color: var(--gray);
    font-size: 20px;
}  

/*Proyectos*/
.projects {
    padding: 3rem 0;
}

.projects .info-project,
.projects .info-project-reverse {
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #35353583, #25252521);
    border: 2px solid #7c7c7c54;
    border-radius: 25px;
    padding: 80px 110px 80px 40px;
}

.card-header, .links-project, .links-project a{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.links-project {
    gap: 14px;
}
.links-project a {
    gap: 5px;
    font-size: 18px;
    transition: 0.2s;
}

.links-project a i {
    color: #c4c4c4;
    transition: 0.2s;
}

.links-project a:hover i {
    color: var(--pink);
}

.links-project a:hover {
    transition: 0.2s;
    font-weight: 300;
    color: var(--pink);
}

.title-project h3 {
    font-size: 26px;
    font-weight: 400;
}

.card-reverse {
    margin: 30px 0px;
}

.title-project h3 > span,
.card-body li.items > span {
    color: var(--pink);
}
.card-body p {
    margin: 20px 0 10px;
    font-size: 18px;
}

.card-body li.items {
    font-size: 15px;
}

.card-body li.items span {
    font-weight: 400;
}

.card-technology .technology {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.card-technology li {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgb(58, 58, 58);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 14px;
}

.card-technology li img {
    height: 15px;
}

.content-card {
    display: flex;
    align-items: center;
}

.projects .info-project-reverse {
    padding: 80px 40px 80px 110px;
    z-index: 0;
}

.img-project {
    margin-left: -65px;
}

.img-project-reverse {
    margin-right: -65px;
}

.img-project img, .img-project-reverse img {
    border-radius: 15px;
    transition: 0.5s;
}

.img-project-reverse img {
    position: relative;
    z-index: 1;
}

.img-project a img:hover,
.img-project-reverse a img:hover{
    transform: scale(1.05);
    transition: 0.5s;
}

.projects .card,
.projects .card-reverse {
    animation: reveal linear both 1s;
    animation-timeline: view();
    animation-range: entry 20% cover 50%;
}

@keyframes reveal {
    from {
        opacity: 0;
        translate: 0 60px;
        scale: .9;
    }
    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
    
}

/*More projects*/

.more-projects h3, 
.container-about h3,
.container-skills h3{
    font-size: 15px;
    font-weight: 400;
    color: var(--gray);
    font-family: "Montserrat", sans-serif;
}

.title-more-projects {
    display: flex;
    align-items: center;
    gap: 5px;
    animation: reveal-right linear both 1s;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
}

@keyframes reveal-right {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.title-more-projects .circle {
    height: 10px;
    width: 10px;
    background: var(--pink);
    border-radius: 50px;
}

.card-project {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px; 
    margin-top: 30px;
}

.card-project .card-content {
    padding: 30px 20px;
    background: linear-gradient(to bottom, #2c2c2c5b, #16161646);
    border: 2px solid #7c7c7c54;
    border-radius: 20px;
}

.card-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.card-content h4 {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 15px;
}

.card-content h4 > span {
    color: var(--pink);
    font-weight: 400;
}

.card-content p {
    font-size: 16px;
    font-weight: 200;
}

.card-content .card-technology li {
    background-color: #2e2e2e;
    font-size: 13px;
}

.card-content .card-technology .technology {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.button-more {
    margin-top: 20px;
    width: 100%;
    background: rgba(20, 20, 20, 0.151);
    border: 2px solid #444444;
    border-radius: 15px;
    transition: 0.2s;
    animation: reveal-right linear both 1s;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
}

.button-more, .button-more a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.button-more a {
    padding: 15px;
    width: 100%;
    font-size: 17px;
    font-style: oblique;
    font-weight: 300;
}

.button-more:hover {
    transform: scale(1.02);
    transition: 0.2s;
    background:radial-gradient(circle at 0% 0%, #FF5E82, #2B2B2B);
}

.card-buttons a i:hover {
    transform: scale(1.02);
    transition: 0.2s;
    color: var(--pink);
}

.card-project {
    animation: reveal-right linear both 1s;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
}

/*Footer*/

footer {
    padding: 1.8rem 7% 3.6rem 7%;
}

.img-logo-footer img {
    height: 40px;
}

.content-one, .content-two {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-one {
    margin-bottom: 15px;
}

.copy, .update  {
    font-size: 14px;
    font-weight: 200;
    color: var(--gray);
}

.copy .copyright, 
.update .email {
    font-size: 16px;
    font-weight: 300;
    color: var(--marfil);
}

.content-two .update {
    text-align: right;
}

/*About & Skills*/
.about {
    margin-top: 130px;
}

.container-flex-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.skill-item {
    display: inline;
}

.skills {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
    margin-bottom: 30px;
}

.skill-item .img-flex-contain {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.skill-item .img-flex-contain img {
    filter: grayscale(30%);
}

.skill-item p {
    text-align: center;
    font-size: 14px;
    color: rgb(194, 194, 194);
}

.skills-items {
    background: linear-gradient(to bottom, #35353583, #25252521);
    border: 2px solid #7c7c7c54;
    border-radius: 25px;
    padding: 40px 30px;
    margin-top: 30px;
}

.about-phrase {
    margin-top: 20px;
}

.about-phrase h2 {
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 400;
    font-size: 40px;
    color: white;
}

.about-phrase h2 > span {
    color: var(--pink);
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
}

.about-phrase h2 > span.white {
    color: var(--white);
    font-family: "Montserrat", sans-serif;
}

.about-phrase h2 > span.my_name {
    font-family: "Libre Baskerville", serif;
    font-style: italic;
    font-size: 42px;
}

.about-phrase h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 21px;
    color: rgb(224, 224, 224);
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 300;
    line-height: 27px;
    width: 90%;
}

.about-phrase .contain-text {
    margin-bottom: 10px;
}

.about-phrase p {
    font-size: 16px;
    color: rgb(201, 201, 201);
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 200;
    text-align: left;
    line-height: 22px;
    width: 87%;
}

.about-phrase a {
    font-size: 16px;
    font-weight: 300;
    color: rgb(228, 144, 173);
    font-style: italic;
    padding-bottom: 1px;
    border-bottom: 1px solid rgb(228, 144, 173);
    transition: 0.2s;
}

.about-phrase a:hover {
    transition: 0.2s;
    color: var(--pink);
    border-bottom: 1px solid var(--pink);
}

.img-container-about {
    display: flex;
    align-items: center;
    justify-content: left;
}

.img-about {
    height: 65px;
    width: 65px;
    background-image: url(/src/img/photo-about-v1.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 100%;
    margin-right: 15px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.541);
}

.contain-container-skills {
    display: flex;
    align-items: center;
    width: 100%;
}

.container-skills {
    width: 100%;
}

.container-about, 
.contain-container-skills {
    animation: reveal-right linear both 1s;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
}

/*
.btn-about a.btn-linkedin {
    background: radial-gradient(circle, #5f5f5f60, #32323294);
    border-radius: 50px;
    border: 1px solid #7c7c7c;
    padding: 8px 20px;
    position: relative;
    display: inline-block;
    transition:  .5s;
    overflow: hidden;
}

a.btn-linkedin:first-child{
    filter: hue-rotate(225deg);
}

a.btn-linkedin:last-child{
    filter: hue-rotate(90deg);
}

a.btn-linkedin span{
    position: absolute;
    display: block;
}

a.btn-linkedin span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #03e9f4);
    animation: animated1 1s infinite;
}

@keyframes animated1{
    0%{
        left: -100%;
    }
    100%{
        left: 100%;
    }
}

a.btn-linkedin span:nth-child(2){
    top: -100%;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #03e9f4);
    animation:  animated2 1s infinite;
    animation-delay: .25s;
}

a.btn-linkedin span:nth-child(2){
    top: -100%;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #03e9f4);
    animation:  animated2 1s infinite;
    animation-delay: .25s;
}

@keyframes animated2{
    0%{
        top: -100%;
    }
    100%{
        top: 100%;
    }
}

a.btn-linkedin span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(270deg, transparent, #03e9f4);
    animation: animated3 1s infinite;
    animation-delay: .5s;
}

@keyframes animated3{
    0%{
        right: -100%;
    }
    100%{
        right: 100%;
    }
}

a.btn-linkedin span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 1px;
    height: 100%;
     background: linear-gradient(360deg, transparent, #03e9f4);
    animation: animated4 1s infinite;
    animation-delay: .75s;
}

@keyframes animated4{
    0%{
        bottom: -100%;
    }
    100%{
        bottom: 100%;
    }
}
*/

@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}

.conic {
	position: relative;
	z-index: 0;
	width: 210px;
	height: 30px;
	border-radius: 50px;
	overflow: hidden;
	padding: 21px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conic::before {
	content: '';
	position: absolute;
	z-index: -2;
	left: -50%;
	top: -300%;
	width: 200%;
	height: 700%;
	background-color: #2c2c2c;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-image: conic-gradient(transparent, #c4335ec4, transparent 60%);
	animation: rotate 4s linear infinite;
}
	
.conic::after {
	content: '';
	position: absolute;
	z-index: -1;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	background: radial-gradient(circle, #424242, #222222);
	border-radius: 50px;
}

.conic a.btn-linkedin {
    font-size: 15px;
    font-weight: 200;
    padding: 8px 20px;
    border-radius: 50px;
    cursor: pointer;
}

.conic a.btn-linkedin:hover  {
    background: radial-gradient(circle, #5f5f5f, #323232);
    border: 1px solid #7c7c7c;
}


/*contacto*/

section.contact {
    margin-top: 130px;
    margin-bottom: 50px;
    animation: reveal-right linear both 1s;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
}

/*Contacto Screen body*/
.container-more-information {
    background: linear-gradient(to bottom,#2f2f2f88, #1c1c1c00 );
    border-radius: 30px;
    padding: 40px 45px;
}

.container-info-contact h2{
    font-size: 48px;
    font-weight: 500;
}

.container-info-contact h2 > span {
    color: var(--pink);
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
}

.container-info-contact p {
    font-size: 18px;
    font-weight: 200;
    margin-top: 18px;
    margin-bottom: 18px;
    color: rgb(216, 216, 216);
    width: 80%;
}

.container-info-contact a.mail {
    font-size: 17px;
    font-weight: 300;
    color: white;
    font-style: italic;
    padding-bottom: 1px;
    transition: 0.2s;
    border-bottom: 1px solid white;

}

.container-info-contact a:hover {
    transition: 0.2s;
    color: var(--pink);
}

.container-info-contact a.mail:hover {
    border-bottom: 1px solid var(--pink);
}

.items-social {
    margin-top: 15px;
}

.items-social a {
    font-size: 20px;
}

.container-contact-flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.container-info-contact {
    display: flex;
    align-items: center;
    justify-content: left;
}

.contact-form .field-group,
.contact-form .field {
    display: grid;
}

.contact-form .field-group.flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form .field-group {
    margin-bottom: 15px;
}

.contact-form .field-group label {
    color: rgb(160, 160, 160);
    font-weight: 200;
    font-size: 15px;
    margin-bottom: 5px;
}

.contact-form .field-group input,
.contact-form .field-group textarea, 
.contact-form input.btn{
    background: linear-gradient(to bottom, #35353583, #25252521);
    border: 2px solid #7c7c7c54;
    border-radius: 10px;
    padding: 8px 15px;
    color: rgb(216, 216, 216);
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 200;
    font-size: 16px;
    width: 100%;
}

.contact-form input.btn {
    background: radial-gradient(circle, #5f5f5f, #323232);
    border: 1px solid #7c7c7c00;
    color: rgb(231, 231, 231);
    font-size: 16px;
    width: 100%;
    padding: 10px 15px;
    cursor: pointer;
    transition: 0.2s;
}

.contact-form input.btn:hover {
    border: 1px solid #7c7c7c;
    transform: scale(1.02);
    transition: 0.2s;
    background:radial-gradient(circle at 0% 0%, #FF5E82, #2B2B2B);
}


.skills-mobile {
    display: none;
}



/*Media Queries*/

@media (max-width: 900px) {
    .header .logo img.logo-principal {
        display: none;
    }
    .logo-mobile {
        display: block;
        height: 45px;
        position:absolute;
        left: 7%;
        top: 1.5rem;
    }
   .icon-links {
        display: contents;
    }
    .dropdown {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--Bg);
        height: 30px;
        width: 32px;
        border-radius: 100%;
    }
    .dropdown:hover {
        background: var(--hoverBg);
        border: 1px solid #7c7c7c;
    }
    .social-media {
        display: none;
    }
    .header {
        display: flex;
        align-items: center;
        justify-content: right;
        gap: 10px;
    }
    .main-items li {
        width: 100px;
    }
    li.select {
        border: 1px solid #7c7c7c;
    }
    .main-items li a {
        padding: 5px 15px;
        border-radius: 50px;
    }
    .show {
        display: block;
    }
    .social-media-mobile {
        position: absolute;
        margin-top: 9rem;
        background: radial-gradient(circle, #5f5f5f6c, #3232323b);
        backdrop-filter: blur(10px);
        padding: 10px;
        border-radius: 15px;
    }
    .social-media-mobile .social-items {
        display: block;
        width: 100%;
    }
    .social-media-mobile .social-items a {
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 20px;
        padding: 5px 10px;
        background: var(--Bg);
        border-radius: 10px;
    }
    .social-media-mobile .social-items a:hover {
        background: var(--hoverBg);
        border: 1px solid #7c7c7c;
        color: var(--marfil);
    }

    /*Proyectos - Presentación*/
    .presentation {
        height: 100%;
        margin-top: 11vh;
        padding: 50px;
    }
    .circle-screen {
        height: 25px;
        width: 25px;
    }
    .title h2 {
        font-size: 52px;
        margin-top: 14vh;
        line-height: 65px;
    }
    .subtitle {
        width: 100%;
        margin-bottom: 1vh;
    }

    /*About*/
    .about {
        margin-top: 80px;
    }
    .container-flex-about {
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .about-phrase h4,
    .about-phrase p {
        width: 90%;
    }

    /*Contacto*/
    .container-contact-flex {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .container-info-contact h2{
        margin-top: 50px;
    }

    section.contact {
        margin-top: 80px;
    }
}

@media (max-width: 1050px) {
    /*Proyectos - Presentación*/
    .presentation {
       height: 100%;
       margin-top: 12vh;
       border-radius: 30px;
       padding: 60px;
   }
   .circle-screen {
       height: 25px;
       width: 25px;
   }
   .title h2 {
       font-size: 60px;
       margin-top: 8vh;
       line-height: 65px;
   }
   .subtitle {
       width: 100%;
   }

   /*Proyecto*/
    /*Proyectos*/
    .content-card {
        display: grid;
    }
    .projects .info-project,
    .projects .info-project-reverse {
        padding: 50px 40px;
    }
    .img-project {
        margin-left: 0px;
        width: 100%;
    }
    .img-project img, .img-project-reverse img {
        width: 100% !important;
        height: 100%;
    }
    
    .img-project-reverse {
        margin-right: 0px;
        width: 100%;
    }

    .card .content-card .info-project {
        order: 2;
    }
    /*Contacto*/
    .container-info-contact p {
        width: 90%;
    }
}

@media (max-width: 800px) {
     /*Proyectos - Presentación*/
     .presentation {
        height: 100%;
        margin-top: 14vh;
        border-radius: 30px;
        padding: 70px 30px;
    }
    .circle-screen {
        height: 24px;
        width: 24px;
    }
    .title h2 {
        font-size: 44px;
        margin-top: 8vh;
        line-height: 56px;
    }
    .subtitle {
        width: 100%;
    }
}

@media (max-width: 700px) {
    /*footer*/
    .content-two {
        display: grid;
        margin-top: 30px;
    }
    
    .content-two .update {
        text-align: left;
        margin-top: 10px;
    }
}

@media (max-width: 600px) {
    .logo-mobile {
        height: 40px;
    }
    .icon-links {
        display: none;
    }
    .social-media {
        display: block;
    }
    .main-items{
        display: none;
    }
    .main-mobile {
        display: block;
    }
    .main-items-mobile {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 99%;
        background: radial-gradient(circle, #5f5f5f6c, #3232323b);
        backdrop-filter: blur(10px);
        padding: 10px;
        border-radius: 50px;
    }
    .main-items-mobile li {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
    }
    li.select {
        border: 1px solid #7c7c7c;
        background: var(--Bg);
    }
    .main-items-mobile li a {
        padding: 5px 18px;
        border-radius: 50px;
        font-size: 14px;
    }
    .main-items-mobile li:hover {
        background: var(--hoverBg);
        border: 1px solid #7c7c7c;
    }
    .social-media-mobile {
        display: none;
    }
    .presentation {
        margin-top: 17vh;
    }
    /*Proyectos*/
    .card-header{
        display: grid;
        align-items: center;
        justify-content: space-between;
    }
    .links-project{
        display: flex;
        align-items: center;
        justify-content:left;
    }

    .title-project {
        order: 2;
    }

    .title-project h3 {
        font-size: 22px;
        margin-top: 8px;
    }

    .card-body p {
        margin: 10px 0px;
        font-size: 16px;
    }
    
    .card-body li.items {
        font-size: 14px;
    }

    .card-technology .technology {
        margin-top: 15px;
    }

    .card-technology li {
        font-size: 13px;
    }
    .card-technology li img {
        height: 13px;
    }

    .projects .info-project, .projects .info-project-reverse {
        padding: 30px;
    }

    /*About*/
    .about {
        margin-top: 80px;
    }

    .container-flex-about {
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .about-phrase h4,
    .about-phrase p {
        width: 100%;
    }

    .about-phrase h4 {
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 19px;
    }

    .about-phrase p {
        font-size: 15px;
        line-height: 22px;
    }

    .skills {
        display: none;
    }
    .skills-mobile {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(66px, 1fr));
        grid-template-rows: auto;
        gap: 20px;
    }

    /*Contacto*/
    .contact-form .field-group.flex {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .container-info-contact p {
        width: 100%;
    }
}

@media (max-width: 500px) {
    /*Proyectos - Presentación*/
    .presentation {
       height: 100%;
       margin-top: 20vh;
       border-radius: 30px;
       padding: 40px 30px;
   }
   .circle-screen {
       height: 23px;
       width: 23px;
   }
   .title h2 {
       font-size: 40px;
       margin-top: 5vh;
       line-height: 50px;
   }
   .subtitle {
       width: 100%;
        margin-top: 3vh;
   }
   .subtitle h4,.subtitle h3 {
    font-size: 19px;
    }  
    .subtitle h4{
        font-size: 18px;
    }  
    .container-info-contact h2 {
        font-size: 40px;
    }
    .container-more-information {
        padding: 40px 35px;
    }

    .skills-items {
        padding: 30px 20px;
    }
}