@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url('./stars-space.css');

/* Para navegadores baseados em WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 10px; 
    background-color: #e0e0e0; 
    border-radius: 10px; 
}

::-webkit-scrollbar-thumb {
    background-color: #007bff; 
    border-radius: 5px; 
}

::-webkit-scrollbar-thumb:hover {
    background-color: #0056b3;
}

::-webkit-scrollbar-button {
    display: none; 
}

*::-webkit-scrollbar-button {
    display: none; 
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
    scrollbar-width: thin; 
    scrollbar-color: #c5c5c5 #5e5e5e;
}

:root {
    --bg-color: #000000;
    --second-bg-color: #2a2c30;
    --text-color: #fff;
    --main-color: rgb(221, 0, 255);
    --one-color: #fff;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    background: var(--bg-color); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-color);
    overflow: hidden;
}

section {
    min-height: 115vh;
    padding: 10rem 9% 2rem;
}

/* Header Styles */
.header {
    user-select: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.1rem 5%; 
    background: rgba(0, 0, 0, 0.0); 
    display: flex;
    align-items: center;
    z-index: 100;
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.0); 
}

.header.sticky {
    border-bottom: .1rem solid rgba(0, 0, 0, .2);
}

header .logo {
    cursor: pointer;
    font-size: 2.5rem;
    color: var(--text-color);
    font-weight: 600;
}

.navbar {
    display: flex;
    gap: 2rem; 
    margin-left: auto;
    align-items: center;
}

.navbar a {
    font-size: 1.7rem;
    font-weight: 100;
    color: var(--text-color);
    margin-left: 4rem;
    transition: color .3s;
}

.navbar a:hover,
.navbar a.active {
    color: var(--main-color);
    cursor: pointer;
}

#menuIcon {
    font-size: 3.6rem;
    color: var(--text-color);
    display: none;
}

/* Home Styles */
.home {
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.home-img img {
    width: 25vw; 
    max-width: 500px; 
    border-radius: 50%; 
    object-fit: cover; 
    box-shadow: 0 0 25px rgba(242, 0, 255, 0.5);
    border: rgb(0, 238, 255) 2px solid;
    animation: floatImage 4s ease-in-out infinite;
}

@keyframes floatImage {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2.4rem);
    }
}

.home-content h3 {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

span {
    color: var(--main-color);
}

.home-content h1 {
    font-size: 5.6rem;
    font-weight: 700;
    margin: 0.1rem 0;
}

.home-content p {
    font-size: 1.7rem;
}

/* Social Media Styles */
.social-media a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: transparent;
    border: .2rem solid var(--main-color);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--main-color);
    margin: 2rem 1.5rem 3rem 0;
    transition: background .5s ease, color .5s ease;
}

.social-media a:hover {
    background: var(--main-color);
    color: var(--second-bg-color);
    box-shadow: 0 0 1rem var(--main-color);
    cursor: pointer;
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 1rem 2.8rem;
    background: var(--main-color);
    color: var(--second-bg-color);
    border-radius: 4rem;
    box-shadow: 0 0 1rem var(--main-color);
    font-size: 1.6rem;
    letter-spacing: .1rem;
    font-weight: 600;
    transition: box-shadow .5s ease;
}

.btn:hover {
    box-shadow: none;
}

.about {
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    background: var(--second-bg-color);
}

.about-img img {
    width: 30vw;
    border-radius: 50rem;
    box-shadow: 0 0 25px rgba(242, 0, 255, 0.5);
    border: rgb(255, 187, 0) 2px solid;
    animation: floatImage 4s ease-in-out infinite;
    user-select: none;
}

.heading {
    text-align: left;
    font-size: 4.5rem;
    color: var(--main-color);
}

.about-content h2 {
    text-align: start;
    line-height: 1.2;
}

.about-content h3 {
    font-size: 2.6rem;
}

.about-content p {
    font-size: 1.8rem;
    margin: 2rem 0;
}

.services h2 {
    user-select: none;
    margin-bottom: 5rem;
    text-align: center;
    font-size: 5rem;
}

.services-container {
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem 4rem;
}

.services-box {
    flex: 1 1 calc(30% - 4rem); 
    padding: 2rem 1.5rem 3rem; 
    border-radius: 1.5rem; 
    text-align: center;
    border: 0.15rem solid var(--main-color); 
    transition: 0.5s ease;
    box-sizing: border-box;
}

.services-box:hover {
    border-color: var(--main-color);
    transform: scale(1.08);
}

.services-box i {
    font-size: 8rem;
    color: var(--main-color);
}

.services-box h3 {
    font-size: 2.6rem;
    margin: 2rem 0;
}

.services-box p {
    font-size: 1.6rem;
    margin: 1rem 0 3rem;
}

.portfolio {
    background: var(--second-bg-color);
    user-select: none;
}

.portfolio h2 {
    text-align: center;
    font-size: 5rem;
    margin-bottom: 4rem;
    user-select: none;
}

.portfolio-container {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    align-items: center;
    gap: 2.5rem;
}

.portfolio-box {
    position: relative;
    border-radius: 2rem;
    box-shadow: 0 0 1rem var(--bg-color);
    overflow: hidden;
    display: flex;
}

.portfolio-box img {
    width: 100%;
    transition: .5s ease;
}

.portfolio-box:hover img {
    transform: scale(1.1);
}

.portfolio-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, .4), var(--main-color));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 0 4rem;
    transform: translateY(100%);
    transition: .5s ease;
}

.portfolio-box:hover .portfolio-layer {
    transform: translateY(0);
}

.portfolio-layer h4 {
    font-size: 3rem;
}

.portfolio-layer p {
    font-size: 1.6rem;
    margin: .3rem 0 1rem;
}

.portfolio-layer a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    background: var(--text-color);
    border-radius: 50%;
}

.portfolio-layer a i {
    font-size: 2rem;
}

.languages {
    padding: 10rem 9% 2rem;
}

.skill-icons--javascript {
    display: inline-block;
    width: 56px;
    height: 56px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none'%3E%3Crect width='256' height='256' fill='%23f0db4f' rx='60'/%3E%3Cpath fill='%23323330' d='m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.889-3.092 12.889-15.12v-81.798h24.058v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.579c-17.357-7.388-28.871-16.668-28.871-36.258c0-18.044 13.748-31.792 35.229-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.731 12.029c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.139 14.778 14.608l6.014 2.577c20.449 8.765 31.963 17.699 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574'/%3E%3C/g%3E%3C/svg%3E");
  }

.skill-icons--typescript {
    display: inline-block;
    width: 56px;
    height: 56px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none'%3E%3Crect width='256' height='256' fill='%23007acc' rx='60'/%3E%3Cpath fill='%23fff' d='m56.611 128.849l-.081 10.484h33.32v94.679h23.569v-94.679h33.32v-10.281c0-5.689-.121-10.443-.284-10.565c-.122-.162-20.399-.244-44.983-.203l-44.739.122zm149.956-10.741c6.501 1.626 11.459 4.511 16.01 9.224c2.357 2.52 5.851 7.112 6.136 8.209c.081.325-11.053 7.802-17.798 11.987c-.244.163-1.22-.894-2.317-2.519c-3.291-4.795-6.745-6.868-12.028-7.233c-7.761-.529-12.759 3.535-12.718 10.321c0 1.991.284 3.169 1.097 4.795c1.706 3.535 4.876 5.648 14.832 9.955c18.326 7.884 26.168 13.085 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.141 17.879-28.323 20.277c-4.388.772-14.791.65-19.504-.203c-10.281-1.829-20.033-6.908-26.047-13.572c-2.357-2.601-6.949-9.387-6.664-9.875c.121-.162 1.178-.812 2.356-1.503c1.138-.65 5.446-3.129 9.509-5.486l7.355-4.267l1.544 2.276c2.154 3.291 6.867 7.802 9.712 9.305c8.167 4.308 19.383 3.698 24.909-1.259c2.357-2.154 3.332-4.389 3.332-7.68c0-2.967-.366-4.267-1.91-6.502c-1.991-2.844-6.054-5.242-17.595-10.24c-13.206-5.689-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.616-1.219-12.678-.447-16.335c2.722-12.759 12.353-21.658 26.25-24.3c4.511-.853 14.994-.528 19.424.569'/%3E%3C/g%3E%3C/svg%3E");
  }

  .skill-icons--react-dark {
    display: inline-block;
    width: 56px;
    height: 56px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none'%3E%3Crect width='256' height='256' fill='%2334363b' rx='60'/%3E%3Cpath fill='%2300d8ff' d='M128.001 146.951c10.304 0 18.656-8.353 18.656-18.656s-8.352-18.656-18.656-18.656s-18.656 8.353-18.656 18.656s8.353 18.656 18.656 18.656'/%3E%3Cpath stroke='%2300d8ff' stroke-width='8.911' d='M128.002 90.363c25.048 0 48.317 3.594 65.862 9.635C215.003 107.275 228 118.306 228 128.295c0 10.409-13.774 22.128-36.475 29.649c-17.162 5.686-39.746 8.654-63.523 8.654c-24.378 0-47.463-2.786-64.819-8.717C41.225 150.376 28 138.506 28 128.295c0-9.908 12.41-20.854 33.252-28.12c17.61-6.14 41.453-9.812 66.746-9.812z' clip-rule='evenodd'/%3E%3Cpath stroke='%2300d8ff' stroke-width='8.911' d='M94.981 109.438c12.514-21.698 27.251-40.06 41.249-52.24c16.864-14.677 32.914-20.425 41.566-15.436c9.017 5.2 12.288 22.988 7.463 46.41c-3.645 17.707-12.359 38.753-24.238 59.351c-12.179 21.118-26.124 39.724-39.931 51.792c-17.471 15.272-34.362 20.799-43.207 15.698c-8.583-4.946-11.865-21.167-7.747-42.852c3.479-18.323 12.21-40.812 24.841-62.723z' clip-rule='evenodd'/%3E%3Cpath stroke='%2300d8ff' stroke-width='8.911' d='M95.012 147.578c-12.549-21.674-21.093-43.616-24.659-61.826c-4.293-21.941-1.258-38.716 7.387-43.72c9.009-5.216 26.052.834 43.934 16.712c13.52 12.004 27.403 30.061 39.316 50.639c12.214 21.098 21.368 42.473 24.929 60.461c4.506 22.764.859 40.157-7.978 45.272c-8.574 4.964-24.265-.291-40.996-14.689c-14.136-12.164-29.26-30.959-41.933-52.849Z' clip-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
  }

  .skill-icons--nextjs-dark {
    display: inline-block;
    width: 56px;
    height: 56px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none'%3E%3Crect width='256' height='256' fill='%2334363b' rx='60'/%3E%3Cpath fill='%23fff' d='M121.451 28.054c-.43.039-1.799.176-3.031.273c-28.406 2.561-55.014 17.889-71.867 41.447C37.17 82.873 31.167 97.731 28.9 113.47c-.801 5.494-.899 7.117-.899 14.565c0 7.449.098 9.072.9 14.565c5.434 37.556 32.16 69.111 68.406 80.802c6.491 2.092 13.333 3.519 21.114 4.379c3.031.332 16.129.332 19.16 0c13.431-1.486 24.809-4.809 36.031-10.538c1.72-.879 2.053-1.114 1.818-1.309c-.156-.118-7.488-9.952-16.285-21.838l-15.992-21.603l-20.04-29.658c-11.026-16.305-20.097-29.639-20.176-29.639c-.078-.019-.156 13.158-.195 29.248c-.059 28.172-.078 29.306-.43 29.97c-.508.958-.899 1.349-1.721 1.78c-.625.312-1.173.371-4.125.371h-3.382l-.9-.567a3.65 3.65 0 0 1-1.31-1.427l-.41-.88l.04-39.198l.058-39.218l.606-.763c.313-.41.978-.938 1.447-1.192c.801-.391 1.114-.43 4.496-.43c3.989 0 4.653.156 5.69 1.29c.293.313 11.143 16.657 24.125 36.344a89122 89122 0 0 0 39.452 59.765l15.836 23.989l.802-.528c7.096-4.614 14.604-11.183 20.547-18.026c12.649-14.526 20.802-32.238 23.539-51.124c.801-5.493.899-7.116.899-14.565s-.098-9.071-.899-14.565c-5.435-37.556-32.161-69.11-68.407-80.801c-6.393-2.073-13.196-3.5-20.821-4.36c-1.877-.196-14.8-.41-16.422-.254m40.938 60.489c.938.469 1.701 1.368 1.975 2.306c.156.509.195 11.379.156 35.875l-.059 35.152l-6.197-9.502l-6.217-9.501v-25.552c0-16.52.078-25.807.195-26.257c.313-1.094.997-1.954 1.936-2.463c.801-.41 1.095-.45 4.164-.45c2.894 0 3.402.04 4.047.392'/%3E%3C/g%3E%3C/svg%3E");
  }

  .skill-icons--nodejs-dark {
    display: inline-block;
    width: 56px;
    height: 56px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none'%3E%3Crect width='256' height='256' fill='%2334363b' rx='60'/%3E%3Cpath fill='%2381cd39' d='M119.878 31.116c4.919-2.815 11.325-2.828 16.239 0c24.722 13.97 49.452 27.917 74.17 41.895c4.65 2.619 7.759 7.793 7.712 13.15v84.045c.035 5.579-3.382 10.877-8.287 13.436c-24.641 13.893-49.27 27.802-73.907 41.695c-5.019 2.87-11.554 2.649-16.418-.457c-7.387-4.282-14.787-8.544-22.175-12.822c-1.51-.9-3.212-1.616-4.278-3.08c.943-1.27 2.628-1.428 3.997-1.983c3.083-.981 5.916-2.555 8.748-4.082c.717-.49 1.591-.302 2.278.136c6.317 3.622 12.579 7.35 18.917 10.937c1.352.781 2.721-.256 3.877-.9c24.18-13.667 48.39-27.281 72.567-40.952c.896-.431 1.391-1.382 1.318-2.363c.017-27.725.004-55.454.009-83.18c.102-1.112-.542-2.136-1.549-2.592c-24.555-13.829-49.099-27.678-73.65-41.51a2.56 2.56 0 0 0-2.892-.005c-24.552 13.837-49.09 27.7-73.642 41.527c-1.003.457-1.676 1.464-1.557 2.58c.005 27.726 0 55.455 0 83.184a2.35 2.35 0 0 0 1.336 2.334c6.551 3.715 13.111 7.404 19.667 11.107c3.694 1.987 8.228 3.169 12.298 1.646c3.59-1.288 6.107-4.953 6.039-8.765c.034-27.563-.017-55.13.025-82.69c-.09-1.223 1.071-2.234 2.261-2.118c3.148-.022 6.3-.043 9.448.008c1.314-.03 2.218 1.288 2.056 2.52c-.013 27.738.034 55.476-.021 83.213c.008 7.393-3.029 15.437-9.867 19.054c-8.423 4.363-18.835 3.438-27.157-.746c-7.204-3.596-14.08-7.84-21.156-11.692c-4.918-2.545-8.318-7.864-8.283-13.439V86.161c-.052-5.468 3.182-10.736 7.975-13.317c24.637-13.903 49.27-27.818 73.902-41.728'/%3E%3Cpath fill='%2381cd39' d='M141.372 89.335c10.745-.692 22.248-.41 31.917 4.884c7.487 4.056 11.637 12.57 11.769 20.887c-.209 1.121-1.382 1.74-2.453 1.663c-3.117-.004-6.236.043-9.353-.021c-1.323.051-2.091-1.168-2.257-2.337c-.896-3.98-3.067-7.921-6.812-9.841c-5.75-2.878-12.416-2.733-18.686-2.673c-4.577.242-9.499.639-13.377 3.33c-2.977 2.039-3.881 6.155-2.819 9.47c1.002 2.38 3.749 3.148 5.998 3.856c12.949 3.387 26.671 3.049 39.373 7.506c5.259 1.817 10.403 5.35 12.203 10.856c2.355 7.38 1.323 16.2-3.928 22.124c-4.258 4.875-10.459 7.529-16.644 8.97c-8.228 1.835-16.767 1.882-25.123 1.067c-7.857-.896-16.034-2.96-22.099-8.313c-5.187-4.504-7.72-11.522-7.469-18.294c.06-1.144 1.199-1.942 2.295-1.848c3.139-.025 6.279-.034 9.418.005c1.255-.09 2.184.994 2.249 2.176c.578 3.791 2.003 7.771 5.31 10.018c6.38 4.117 14.387 3.835 21.693 3.95c6.053-.268 12.848-.349 17.787-4.35c2.606-2.282 3.378-6.1 2.674-9.384c-.763-2.773-3.664-4.065-6.155-4.91c-12.783-4.043-26.659-2.576-39.318-7.149c-5.14-1.816-10.11-5.25-12.084-10.53c-2.755-7.473-1.493-16.717 4.308-22.44c5.656-5.695 13.82-7.888 21.583-8.672'/%3E%3C/g%3E%3C/svg%3E");
  }

  .skill-icons--sqlite {
    display: inline-block;
    width: 56px;
    height: 56px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none'%3E%3Cg clip-path='url(%23skillIconsSqlite1)'%3E%3Cpath fill='%23d9d9d9' d='M60 0C26.863 0 0 26.863 0 60v136c0 33.137 26.863 60 60 60h108.46c-1.779-5.243-3.172-13.546-3.956-23.023c-.675-8.152-.899-17.171-.525-25.87c-.101-1.286-.162-2.122-.162-2.122s-1.874-12.61-4.571-22.969c-1.194-4.598-2.553-8.756-3.98-11.166c-.735-1.243.08-6.351 2.131-13.916c1.2 2.071 6.263 10.932 7.28 13.788c1.145 3.228 1.385 4.153 1.385 4.153s-2.777-14.272-7.333-22.6a303 303 0 0 1 3.542-11.066c1.578 2.767 5.165 9.121 6.461 12.132c.12.279.228.541.307.757c.184.522.339.965.478 1.371c.731 2.118.909 2.792.909 2.792s-.271-1.386-.775-3.524c-.213-.903-.478-1.965-.773-3.096c-1.148-4.409-2.892-10.181-5.125-14.704c5.732-29.794 24.181-68.807 44.057-89.868c1.713-1.814 3.434-3.511 5.158-5.041c11.619-10.3 23.392-13.78 33.115-5.118c7.034 6.267 9.912 14.925 9.917 24.89V60c0-33.137-26.863-60-60-60z'/%3E%3Cpath fill='url(%23skillIconsSqlite0)' d='M60 0C26.863 0 0 26.863 0 60v136c0 33.137 26.863 60 60 60h108.46c-1.779-5.243-3.172-13.546-3.956-23.023c-.675-8.152-.899-17.171-.525-25.87c-.101-1.286-.162-2.122-.162-2.122s-1.874-12.61-4.571-22.969c-1.194-4.598-2.553-8.756-3.98-11.166c-.735-1.243.08-6.351 2.131-13.916c1.2 2.071 6.263 10.932 7.28 13.788c1.145 3.228 1.385 4.153 1.385 4.153s-2.777-14.272-7.333-22.6a303 303 0 0 1 3.542-11.066c1.578 2.767 5.165 9.121 6.461 12.132c.12.279.228.541.307.757c.184.522.339.965.478 1.371c.731 2.118.909 2.792.909 2.792s-.271-1.386-.775-3.524c-.213-.903-.478-1.965-.773-3.096c-1.148-4.409-2.892-10.181-5.125-14.704c5.732-29.794 24.181-68.807 44.057-89.868c1.713-1.814 3.434-3.511 5.158-5.041c11.619-10.3 23.392-13.78 33.115-5.118c7.034 6.267 9.912 14.925 9.917 24.89V60c0-33.137-26.863-60-60-60z'/%3E%3Cpath fill='%23003b57' d='M246.083 36.91c-9.723-8.662-21.496-5.183-33.115 5.118c-1.724 1.53-3.445 3.227-5.158 5.04c-19.876 21.063-38.325 60.075-44.057 89.869c2.233 4.523 3.977 10.295 5.125 14.704c.295 1.131.56 2.193.773 3.096c.504 2.138.775 3.524.775 3.524s-.178-.674-.909-2.792c-.139-.406-.294-.849-.478-1.371a16 16 0 0 0-.307-.757c-1.296-3.011-4.883-9.365-6.461-12.132a303 303 0 0 0-3.542 11.066c4.556 8.328 7.333 22.6 7.333 22.6s-.24-.925-1.385-4.153c-1.017-2.856-6.08-11.717-7.28-13.788c-2.051 7.565-2.866 12.673-2.131 13.916c1.427 2.41 2.786 6.568 3.98 11.166c2.697 10.359 4.571 22.969 4.571 22.969s.061.836.162 2.122c-.374 8.699-.15 17.718.525 25.87c.893 10.791 2.575 20.062 4.719 25.023l1.455-.793c-3.148-9.774-4.427-22.584-3.867-37.358c.847-22.581 6.05-49.813 15.662-78.196c16.24-42.847 38.772-77.224 59.394-93.642c-18.796 16.956-44.235 71.839-51.85 92.163c-8.526 22.759-14.569 44.117-18.21 64.579c6.283-19.183 26.598-27.429 26.598-27.429s9.964-12.274 21.608-29.81c-6.975 1.589-18.428 4.309-22.265 5.919c-5.658 2.371-7.183 3.18-7.183 3.18s18.33-11.15 34.056-16.198c21.628-34.025 45.19-82.362 21.462-103.505M28.52 49c-3.063 0-5.554.895-7.463 2.683c-1.91 1.79-2.878 4.137-2.878 7.012c0 1.49.24 2.848.714 4.093c.474 1.247 1.212 2.403 2.203 3.447c.992 1.045 2.977 2.465 5.936 4.27c3.63 2.186 6.005 3.96 7.145 5.346c1.141 1.385 1.707 2.836 1.707 4.348c0 2.026-.675 3.642-2.064 4.858c-1.391 1.215-3.251 1.82-5.558 1.82c-2.433 0-4.552-.845-6.372-2.526c-1.82-1.682-2.738-3.908-2.759-6.698H18V87.78h1.131c.346-.959.824-1.45 1.45-1.45c.3 0 1.005.205 2.104.588c2.671.938 4.865 1.39 6.59 1.39c2.971 0 5.508-1.026 7.622-3.114c2.11-2.086 3.176-4.602 3.176-7.54c0-2.278-.704-4.305-2.084-6.071c-1.381-1.769-4.066-3.826-8.08-6.19c-3.452-2.046-5.694-3.713-6.728-5.013c-1.036-1.298-1.568-2.733-1.568-4.309c0-1.704.634-3.072 1.885-4.093c1.252-1.022 2.891-1.528 4.943-1.528c2.309 0 4.233.676 5.756 2.037c1.521 1.363 2.401 3.252 2.66 5.68h1.132v-8.774h-1.053q-.192.67-.357.861c-.106.128-.311.196-.615.196c-.366 0-1.019-.152-1.945-.45c-1.985-.66-3.815-.999-5.499-.999m36.98 0c-3.733 0-7.121.868-10.183 2.605c-3.066 1.734-5.493 4.14-7.285 7.207c-1.79 3.066-2.68 6.323-2.68 9.793c0 4.662 1.547 8.816 4.665 12.456c3.12 3.638 6.858 5.905 11.195 6.777c.992.51 2.41 1.826 4.268 3.956c2.093 2.404 3.864 4.138 5.32 5.17a16 16 0 0 0 4.684 2.292c1.661.499 3.457.744 5.4.744c2.351 0 4.457-.403 6.311-1.234l-.416-1.018a10.2 10.2 0 0 1-3.434.568c-1.642 0-3.3-.534-4.963-1.606c-1.66-1.075-3.736-3.125-6.213-6.15c-1.164-1.45-1.967-2.364-2.421-2.722c4.745-.915 8.648-3.184 11.691-6.816c3.043-3.63 4.565-7.774 4.565-12.417c0-5.514-1.988-10.147-5.935-13.925C76.12 50.9 71.262 49 65.5 49m23.085 0l.06 1.195c2.484 0 3.876.722 4.188 2.174c.115.52.169 1.478.178 2.86l-.02 26.42q-.03 2.96-.853 3.78c-.549.543-1.476.882-2.819 1.018l-.06 1.195h24.773l.635-5.993h-1.131c-.323 1.632-1.064 2.802-2.243 3.466c-1.183.67-3.273 1-6.293 1h-2.342c-2.717 0-4.289-.97-4.704-2.92a6 6 0 0 1-.12-1.253l.1-26.714c0-1.97.252-3.29.774-3.937c.528-.643 1.48-1.004 2.858-1.096L101.507 49zm-22.688 1.45c4.21 0 7.647 1.635 10.302 4.935s3.97 7.824 3.97 13.553q.001 8.14-4.01 13.044c-2.675 3.268-6.235 4.896-10.66 4.896c-4.25 0-7.696-1.679-10.34-5.053c-2.643-3.374-3.95-7.755-3.95-13.142c0-5.535 1.323-9.967 3.989-13.279c2.665-3.308 6.233-4.955 10.699-4.955m56.968 5.679c-.604 0-1.065.201-1.409.607c-.353.404-.461.894-.338 1.489c.119.576.449 1.082.973 1.508c.521.425 1.083.646 1.687.646c.584 0 1.03-.221 1.35-.646q.478-.64.298-1.508c-.124-.595-.442-1.085-.933-1.489c-.497-.406-1.044-.607-1.628-.607m16.336 4.054c-1.027 3.897-3.252 6.006-6.669 6.346l.039 1.116h3.99l-.079 13.2c.006 2.258.076 3.76.238 4.525c.393 1.83 1.605 2.761 3.632 2.761q4.402 0 9.23-5.288l-.972-.822c-2.324 2.32-4.379 3.486-6.173 3.486c-1.103 0-1.787-.626-2.045-1.86a4.7 4.7 0 0 1-.099-1.058l.04-14.944h6.093l-.059-1.782h-6.015v-5.68zm23.561 4.975c-3.408 0-6.181 1.632-8.336 4.877c-2.145 3.25-2.809 6.85-1.965 10.81c.496 2.32 1.484 4.12 2.997 5.387c1.51 1.267 3.426 1.9 5.716 1.9c2.133 0 5.103-.534 6.352-1.607c1.253-1.072 2.408-2.81 3.474-5.19l-.854-.881c-1.7 3.087-5.133 4.642-7.721 4.642c-3.559 0-5.738-1.927-6.55-5.758a14 14 0 0 1-.239-1.567c4.234-.662 7.442-1.833 9.608-3.526c2.163-1.693 4.336-3.489 3.93-5.386c-.242-1.127-.835-2.013-1.747-2.683c-.924-.67-3.324-1.018-4.665-1.018m-37.257.137l-7.344 1.665v1.292l2.54-.313c1.231 0 1.955.55 2.184 1.645c.077.367.125.881.139 1.528l-.08 11.849c-.02 1.64-.205 2.593-.575 2.879q-.561.43-2.958.43l-.04 1.117h11.652l-.02-1.116c-1.619 0-2.668-.126-3.136-.372c-.46-.245-.776-.69-.913-1.371c-.106-.492-.152-1.338-.159-2.507l.04-16.726zm35.392 2.194c.709 0 1.394.27 2.084.802c.68.531 1.095 1.122 1.23 1.763c.665 3.15-2.166 5.328-8.535 6.542c-.182-2.297.222-4.383 1.251-6.268c1.021-1.883 2.351-2.84 3.97-2.84'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='skillIconsSqlite0' x1='147.614' x2='147.614' y1='5.239' y2='241.763' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2397d9f6'/%3E%3Cstop offset='.92' stop-color='%230f80cc'/%3E%3Cstop offset='1' stop-color='%230f80cc'/%3E%3C/linearGradient%3E%3CclipPath id='skillIconsSqlite1'%3E%3Crect width='256' height='256' fill='%23fff' rx='60'/%3E%3C/clipPath%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");
  }

  .skill-icons--java-dark {
    display: inline-block;
    width: 56px;
    height: 56px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none'%3E%3Crect width='256' height='256' fill='%2334363b' rx='60'/%3E%3Cpath fill='%23fff' d='M101.634 182.619s-7.68 4.674 5.345 6.011c15.728 2.004 24.044 1.669 41.407-1.668c0 0 4.674 3.009 11.02 5.344c-39.075 16.696-88.497-1.002-57.772-9.687m-5.009-21.705s-8.35 6.346 4.674 7.679c17.028 1.669 30.391 2.004 53.433-2.667c0 0 3.009 3.341 8.015 5.01c-47.083 14.025-99.85 1.333-66.122-10.019zm92.17 38.07s5.676 4.674-6.346 8.35c-22.376 6.678-93.839 8.685-113.876 0c-7.009-3.009 6.347-7.352 10.686-8.015c4.342-1.002 6.678-1.002 6.678-1.002c-7.68-5.344-51.095 11.02-22.041 15.729c79.813 13.027 145.603-5.676 124.896-15.028zm-83.488-60.781s-36.402 8.685-13.028 11.687c10.019 1.333 29.721 1.002 48.089-.335c15.028-1.334 30.09-4.007 30.09-4.007s-5.345 2.338-9.017 4.674c-37.099 9.693-108.23 5.351-87.858-4.668c17.37-8.35 31.724-7.351 31.724-7.351m65.116 36.401c37.407-19.37 20.037-38.07 8.015-35.731c-3.009.667-4.342 1.334-4.342 1.334s1.001-2.004 3.34-2.667c23.709-8.35 42.413 25.046-7.679 38.07c0 0 .335-.335.666-1.002zm-61.444 52.76c36.067 2.339 91.168-1.334 92.505-18.369c0 0-2.667 6.678-29.72 11.688c-30.722 5.676-68.796 5.009-91.168 1.333c0 0 4.674 4.007 28.386 5.344z'/%3E%3Cpath fill='%23f58219' d='M147.685 28s20.704 21.039-19.702 52.76c-32.394 25.712-7.351 40.408 0 57.101c-19.035-17.028-32.722-32.059-23.377-46.085C118.331 71.083 156.062 61.064 147.685 28M137 123.842c9.683 11.02-2.667 21.039-2.667 21.039s24.711-12.686 13.359-28.387c-10.354-15.028-18.368-22.376 25.046-47.425c0 0-68.46 17.028-35.731 54.766z'/%3E%3C/g%3E%3C/svg%3E");
  }

  .skill-icons--python-dark {
    display: inline-block;
    width: 56px;
    height: 56px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none'%3E%3Crect width='256' height='256' fill='%2334363b' rx='60'/%3E%3Cpath fill='url(%23skillIconsPythonDark0)' d='M127.279 29c-50.772 0-47.602 22.018-47.602 22.018l.057 22.81h48.451v6.85H60.489S28 76.992 28 128.221s28.357 49.414 28.357 49.414h16.924v-23.773s-.912-28.357 27.905-28.357h48.054s26.999.436 26.999-26.094V55.546S180.338 29 127.279 29m-26.716 15.339a8.71 8.71 0 0 1 8.717 8.717a8.71 8.71 0 0 1-8.717 8.716a8.71 8.71 0 0 1-8.716-8.716a8.71 8.71 0 0 1 8.716-8.717'/%3E%3Cpath fill='url(%23skillIconsPythonDark1)' d='M128.721 227.958c50.772 0 47.602-22.017 47.602-22.017l-.057-22.811h-48.451v-6.849h67.696S228 179.966 228 128.736s-28.357-49.413-28.357-49.413h-16.924v23.773s.912 28.357-27.905 28.357H106.76s-27-.437-27 26.093v43.866s-4.099 26.546 48.961 26.546m26.716-15.339a8.71 8.71 0 0 1-8.717-8.716a8.71 8.71 0 0 1 8.717-8.717a8.71 8.71 0 0 1 8.717 8.717a8.71 8.71 0 0 1-8.717 8.716'/%3E%3Cdefs%3E%3ClinearGradient id='skillIconsPythonDark0' x1='47.22' x2='146.333' y1='46.896' y2='145.02' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23387eb8'/%3E%3Cstop offset='1' stop-color='%23366994'/%3E%3C/linearGradient%3E%3ClinearGradient id='skillIconsPythonDark1' x1='108.056' x2='214.492' y1='109.905' y2='210.522' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ffe052'/%3E%3Cstop offset='1' stop-color='%23ffc331'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");
  }

.languages p {
    font-size: 1.6rem;
    margin-top: 2rem;
    text-align: center;
    align-items: center;
}

.languages-header {
    text-align: center;
    margin-bottom: 15rem;
}

.languages-header h2 {
    font-size: 5rem;
    margin-top: 10rem;
}

.languages-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10rem;
}

.language-card {
    border: 0.1rem solid var(--one-color);
    border-radius: 2rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    width: 20rem;
    height: 16rem;
    margin-bottom: 2rem;
}

.language-card:hover {
    transform: translateY(-0.3rem);
}

.language {
    text-align: center;
    padding: 2rem;
}

.language i {
    font-size: 7rem;
    color: var(--main-color);
    margin-bottom: 2rem;
    display: block;
}

.language p {
    font-size: 2rem;
}

.contact {
    background-image: url(../images/outer-space.jpg);
    background-size: cover;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.contact h2 {
    user-select: none;
    margin-bottom: 3rem;
    text-align: center;
    font-size: 5rem;
}

.contact p {
    user-select: none;
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 3rem;
}

.contact form {
    max-width: 70rem;
    margin: 1rem auto;
    text-align: center;
    margin-bottom: 3rem;
}

.contact form .input-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact form .input-box input,
.contact form textarea {
    width: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color: var(--text-color);
    background: var(--second-bg-color);
    border-radius: .8rem;
    border: .2rem solid var(--main-color);
    margin: .7rem 0;
}

.contact form .input-box input {
    width: 49%;
}

.contact form textarea {
    resize: none;
}

.contact form .btn {
    margin-top: 2rem;
    cursor: pointer;
    user-select: none;
}

.footer {
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem 9%;
    background: var(--second-bg-color);
}

.footer-text p {
    font-size: 1.6rem;
    color: var(--text-color);
}

.footer-iconTop a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: .8rem;
    background: var(--main-color);
    border-radius: .8rem;
    transition: .5s ease;
}

.footer-iconTop a:hover {
    box-shadow: 0 0 1rem var(--main-color);
}

.footer-iconTop a i {
    font-size: 2.4rem;
    color: var(--second-bg-color);
}

/* Global Styles */
#menuIcon {
    display: none;
}

/* Responsive Media Queries */
/* Font size adjustments */
/* Responsive Media Queries */
/* Font size adjustments */
@media (max-width: 1200px) {
    html {
        font-size: 55%;
    }
    
    .navbar a {
        display: block;
        font-size: 1.6rem;
        margin: 3rem 1rem;
    }
}

@media (max-width: 1030px) {
    header .logo { 
        margin: -15px;
    }
    header .home-img-header {
        margin: -10px;
    }
    .navbar a {
        display: block;
        font-size: 1.6rem;
        margin: 3rem 1rem;
    }
}

@media (max-width: 617px) {
    html {
        font-size: 50%;
    }
}

/* General padding adjustments */
@media (max-width: 991px) {
    .header,
    .footer {
        padding: 2rem 3%;
    }

    section {
        padding: 10rem 3% 2rem;
    }

    .services,
    .portfolio {
        padding-bottom: 7rem;
    }

    .contact {
        min-height: auto;
    }
}

@media (max-width: 930px) {
    html {
        font-size: 45%;
    }
}

/* Navbar and menu icon adjustments */
@media (max-width: 780px) {
    #menuIcon {
        display: block; 
        margin-left: auto; 
    }

    .navbar {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 3%;
        background: var(--bg-color);
        border-top: .1rem solid rgba(0, 0, 0, .2);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
    }

    .navbar.active {
        display: block;
    }

    .navbar a {
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
    }

    .home {
        flex-direction: column;
        padding-top: 25rem;
    }

    .home-content p {
        flex-wrap: wrap;
    }

    .home-content h3 {
        font-size: 2.6rem;
    }

    .home-content h1 {
        font-size: 5rem;
    }

    .home-img img,
    .about-img img {
        width: 50vw;
        margin-top: 4rem;
    }

    .about {
        flex-direction: column-reverse;
    }

    .services h2,
    .portfolio h2 {
        margin-bottom: 3rem;
    }

    .portfolio-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Menu icon adjustments for specific breakpoints */
@media (max-width: 776px) {
    #menuIcon {
        margin-left: auto; 
    }
}

@media (max-width: 617px) {
    .portfolio-container {
        grid-template-columns: 1fr; 
    }

    .contact form .input-box input {
        width: 100%; 
    }
}

@media screen and (max-width: 768px) {
    header .home-img-header {
        margin: -10px;
    }
    header .logo { 
        margin: -15px;
    }
    .navbar {
        display: none; 
    }
    #menuIcon {
        display: block; 
        cursor: pointer;
    }
}

@media screen and (max-width: 430px) {
    header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 1rem 2%; 
    }

    header .logo { 
        margin: -15px;
    }

    header .home-img-header {
        margin: -10px;
    }

    .services-container {
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 3rem 2rem;
    }
    
    .services-box {
        flex: 1 1 26rem; 
        padding: .9rem 10rem 3rem; 
        border-radius: 1.5rem; 
        text-align: center;
        border: 0.15rem solid var(--main-color); 
        transition: 0.5s ease;
    }

    .services-box:hover {
        border-color: var(--main-color);
        transform: scale(1.03);
    }

    .languages-list {
        gap: 5rem; 
    }

    .language-card {
        flex-direction: row; 
        align-items: center; 
    }

    .skill-icons {
        width: 80px; 
        height: 80px;
    }

    #logo {
        display: flex;
        align-items: center;
        gap: 0.5rem; 
    }

    #logo img {
        width: 40px; 
        height: 40px;
        border-radius: 50%; 
    }

    #logo span {
        font-size: 1.4rem; 
        color: white; 
        white-space: nowrap; 
    }

    #menuIcon {
        margin-left: auto; 
    }

    .home-img img,
    .about-img img {
        width: 90vw; 
    }

    .footer {
        flex-direction: column-reverse; 
    }

    .footer-text p {
        text-align: center; 
        margin-top: 2rem;
    }
    
}

@media (max-width: 400px) {
    header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 1rem 2%; 
    }

    header .logo { 
        margin: -15px;
    }

    header .home-img-header {
        margin: -10px;
    }

    .services-container {
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 3rem 2rem;
    }
    
    .services-box {
        flex: 1 1 20rem; 
        padding: .9rem 10rem 3rem; 
        border-radius: 1.5rem; 
        text-align: center;
        border: 0.15rem solid var(--main-color); 
        transition: 0.5s ease;
    }

    .services-box:hover {
        border-color: var(--main-color);
        transform: scale(1.03);
    }

    .languages-list {
        gap: 5rem; 
    }

    .language-card {
        flex-direction: row; 
        align-items: center; 
    }

    .skill-icons {
        width: 80px; 
        height: 80px;
    }

    #logo {
        display: flex;
        align-items: center;
        gap: 0.5rem; 
    }

    #logo img {
        width: 40px; 
        height: 40px;
        border-radius: 50%; 
    }

    #logo span {
        font-size: 1.4rem; 
        color: white; 
        white-space: nowrap; 
    }

    #menuIcon {
        margin-left: auto; 
    }

    .home-img img,
    .about-img img {
        width: 90vw; 
    }

    .footer {
        flex-direction: column-reverse; 
    }

    .footer-text p {
        text-align: center; 
        margin-top: 2rem;
    }
}