:root{  
    --background-dark-color: rgb(28, 14, 41);
    --background-light-color: #f5f5f5;
    --background-dark-color-alpha: rgb(28, 14, 41, 0.8);
    --background-dark-color-alpha: rgba(245, 245, 245, 0.8);

    --icon-color : #a9a9a9;

    /*gradient*/
    --size: 500px;
    --speed: 50s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);

    /*links*/
    --link-dark-color: #1e1c85;
    --link-light-color: #7235ff;
    --link-color-secondary: #f5f5f5;

    /*titles*/
    --title-light-color: #f09433;
    --title-dark-color: #c53500;
}

html {
    scroll-behavior: smooth;
}

/*@import url("https://www.nerdfonts.com/assets/css/webfont.css");*/

/* Importa la fuente con @font-face */
@font-face {
    font-family: 'CaskaydiaCove';
    src: url('../fonts/CaskaydiaCoveNF-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "CaskaydiaCove", sans-serif;
    background-color: light-dark(var(--background-dark-color), var(--background-light-color));
    color: light-dark(var(--background-light-color), var(--background-dark-color));
    transition: all 1s ease;
}

.fa {
    font-family: "CaskaydiaCove", sans-serif;
    font-style: normal;
}

.fa-map-marker::before {
    content: "\f034e";
}

.fa-theme::before {
    content: "\f050e";
}

.fa-mail::before {
    content: "\f0e0";
}

.fa-linkedin::before {
    content: "\f0e1";
}

.fa-github::before {
    content: "\f09b";
}

.fa-file::before {
    content: "\f15b";
}

.fa-python::before {
    content: "\e73c";
}

.fa-django::before {
    content: "\e71d";
}

.fa-flask::before {
    content: "\f0c3";
}

.fa-javascript::before {
    content: "\f031e";
}

.fa-html5::before {
    content: "\e736";
}

.fa-css3::before {
    content: "\e749";
}

.fa-linux::before {
    content: "\ebc6";
}

.fa-git::before{
    content: "\f02a2";
}

.fa-blender::before {
    content: "\f00ab";
}

.fa-godot::before {
    content: "\e65f";
}

.fa-unity::before {
    content: "\f06af";
}

.fa-postgresql::before {
    content: "\e76e";
}

.fa-person::before {
    content: "\f4ff";
}

.fa-project::before {
    content: "\eb30";
}

.fa-link::before {
    content: "\f0c1";
}

.fa-language::before {
    content: "\f1ab";
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'CaskaydiaCove', sans-serif;
    font-weight: 700;
    font-style: normal;
    color: light-dark(var(--title-light-color), var(--title-dark-color));
    filter: drop-shadow(10px 10px 10px var(--link-dark-color));
    transition: all 0.6s ease;
}

p {
    font-weight: 400;
    font-style: normal;
    font-size: large;
}

a {
    font-weight: 700;
    font-style: normal;
    color: light-dark(var(--background-light-color), var(--background-dark-color));
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 5px;
    align-items: center;
}

a:hover {
    text-decoration: none;
    background-color: light-dark(var(--link-dark-color), var(--link-light-color));
    border-radius: 5px;
}

b {
    color: light-dark(var(--title-light-color), var(--title-dark-color));
}   

hr {
    border-color: light-dark(var(--background-light-color), var(--background-dark-color));
    border-style: solid;
    transition: all 0.3s ease;
}

.btn{
    font-family: "CaskaydiaCove", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: larger;
    color: var(--link-color-secondary);
    background-color: light-dark(var(--link-dark-color), var(--link-light-color));
    border-radius: 10px;
    border-width: 5px;
    border: none;
    padding: 10px;
    align-items: center;
    transition: all 0.3s ease;
}

.btn:hover {
    text-decoration: none;
    background-color: light-dark(var(--link-light-color), var(--link-dark-color));
    border-radius: 10px;
}

.badge {
    /*font-family: "Play", sans-serif;*/
    background-color: light-dark(var(--link-dark-color), var(--link-light-color));
    color: light-dark(var(--background-light-color), var(--background-dark-color));
    padding: 4px 8px;
    vertical-align: middle;
    text-align: center;
    border-radius: 5px;
    font-size: larger;
  }

.gradient {
    width: var(--size);
    height: var(--size);
    background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    position: fixed;
    top: 20%;
    left: 35%;
    /*transform: translate(50%, 50%);*/
    z-index: -1;
    filter: blur(100px);

    /* Añadir la animación con la duración (velocidad) deseada */
    animation: rotate 5s linear infinite; /* 5 segundos para una rotación completa */
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media (max-width : 768px) {
    .project {
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /*margin: 0;*/ /* Elimina el margen para evitar desalineaciones */
        padding: 20px;

        width: 120px;
        height : 300px;
        right : -100px;
        top : 20px;
    }
}

@media (min-width : 768px) {
    /*.profile_info {
        display: grid;
        grid-template-columns: 20% 1fr;
    }*/
    
    .profile_info {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        justify-items: center;
    }

    .about_content {
        display: grid;
        grid-template-columns: 360px 1fr;
    }
    .menu{
        width: 600px;
        top: 20px; /* Ajusta la distancia desde la parte superior de la ventana */
        left: 50%; /* Centra el menú horizontalmente */
    }
}

/*Divs*/

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

.menu {
    display: flex;
    justify-content: space-around;
    margin: 0; /* Elimina el margen para evitar desalineaciones */
    padding: 20px;
    background-color: light-dark(var(--background-dark-color-alpha), var(--background-light-color-alpha));
    backdrop-filter: blur(10px);
    filter: drop-shadow(10px 10px 10px var(--background-light-color-alpha));
    border-radius: 20px;
    border-color: light-dark(var(--link-dark-color), var(--link-light-color));
    border-width: 2px;
    border-style: solid;
    position: fixed; /* Posiciona el menú de forma fija */
    transform: translateX(-50%); /* Centra el menú con precisión en la pantalla */
    z-index: 1000; /* Asegura que el menú esté sobre otros elementos */
}

.presentation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 70%;
    border-radius: 20px;
    margin: 20px;
    padding: 20px;
    color: light-dark(var(--background-light-color), var(--background-dark-color));
}

.profile_info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 50px;
}

.info{
    text-align: left;
}

.summary {
    text-align: left;
}

.logo {
    width: 100px;
    height: 100px;
    border-radius: 20px;
}

.icon{
    width: 32px;
}

.company {
   display: block;
   grid-template-rows: 120px 1fr;
   grid-gap: 20px;
   margin: 20px;
   padding: 20px;
   background-color: light-dark(var(--background-light-color-alpha), var(--background-dark-color-alpha));
   
   border-radius: 20px;
   border-width: 5px;
}

.company_header {
    text-align: left;
    display:  flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:left;
    grid-gap: 20px;
    align-items:center;
    width:90%
}

.description{
    display: block;
}

.project {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    grid-gap: 20px;
    padding: 20px;
}

.project_links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 20px;
    padding: 20px;
}

.project_info {
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    justify-content: center;
}

.project_image {
    display: inline-block;
    width: 340px;
    height: 200px;
    border-radius: 20px;
}

.project_icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    grid-gap: 10px;
}

.about_content {
    display: grid;
    grid-template-rows: 260px 1fr;
    justify-content: center;
    grid-gap: 20px;
    align-items: center;
}

.skill_icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    grid-gap: 10px;
}

.extras {
    display: none;
    width: 100%;
    text-align: left;
}

.contact {
    display: block;
    width:100%;
    text-align: left;
}

.contact_buttons {
    display: flex;
    flex-direction:inherit;
    justify-content:left;
    align-items: center;
    grid-gap: 10px;
}


/*Classes*/

#profile_photo {
    border-radius: 50%;
    width: 30%;
    /*height: 180px;*/
 }

 /*Experimental*/

 /* Estilo del contenedor de la barra de scroll */
::-webkit-scrollbar {
    width: 12px; /* Ancho de la barra de scroll */
    height: 12px; /* Altura de la barra de scroll horizontal */
  }
  
  /* Estilo de la "pista" de la barra de scroll */
  ::-webkit-scrollbar-track {
    background: light-dark(var(--background-light-color-alpha), var(--background-dark-color-alpha)); /* Color de fondo de la pista */
    border-radius: 6px; /* Bordes redondeados de la pista */
    transition: all 0.6s ease-in-out;
  }
  
  /* Estilo del "pulgar" de la barra de scroll (la parte que se mueve) */
  ::-webkit-scrollbar-thumb {
    background: light-dark(var(--link-dark-color), var(--link-light-color)); /* Color del pulgar */
    border-radius: 6px; /* Bordes redondeados del pulgar */
    transition: all 0.9s ease-in-out;
  }
  
  /* Estilo del pulgar al pasar el mouse sobre él */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover-color, #555); /* Color del pulgar al pasar el ratón */
    transition: all 0.3s ease-in-out;
  }