@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Megrim&family=Poppins:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

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

body {
    width: 100%;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    cursor: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 82 84" fill="none" > <path d="M41.5816 1.21606C39.7862 5.82482 40.3852 10.0977 40.5593 14.9633C40.7854 21.2812 40.9774 27.5593 41.4363 33.8661" stroke="%23000000" stroke-width="1.9" stroke-linecap="round" fill="%23000000" /> <path d="M41.0651 45.1798C39.7505 51.5096 40.3418 57.6794 40.8893 64.0791C41.4093 70.1568 42.1389 76.2117 42.8566 82.2682" stroke="%23000000" stroke-width="1.9" stroke-linecap="round" fill="%23000000" /> <path d="M1.13413 46.6647C5.16696 44.8703 8.96881 44.7974 13.3092 44.5029C19.8761 44.0572 26.2025 43.2089 32.656 41.952" stroke="%23000000" stroke-width="1.9" stroke-linecap="round" fill="%23000000" /> <path d="M47.2629 40.0959C58.4139 39.3819 69.3895 37.5305 80.4472 35.9965" stroke="%23000000" stroke-width="1.9" stroke-linecap="round" fill="%23000000" /> <path d="M49.3429 34.6508L52.917 28.1667" stroke="%23000000" stroke-width="1.9" stroke-linecap="round" fill="%23000000" /> <path d="M32.9786 50.3504L28.6387 54.6391" stroke="%23000000" stroke-width="1.9" stroke-linecap="round" fill="%23000000" /> <path d="M52.6361 48.6656L56.9506 51.5758" stroke="%23000000" stroke-width="1.9" stroke-linecap="round" fill="%23000000" /> <path d="M31.549 30.8471C26.8741 29.4323 22.7143 27.3543 18.2738 25.3586" stroke="%23000000" stroke-width="1.9" stroke-linecap="round" fill="%23000000" /> </svg>') 20 20, auto;
}

a {
    color: black;
    text-decoration: none;
}

.text-mute {
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.95em;
}

.gotop {
    position: fixed;
    bottom: 15px;
    right: 5px;
    z-index: 99;
    padding: 0.3em 0.3em 0;
    transition: transform 0.4s ease;
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -ms-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
}

.gotop:active {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
}

header {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    padding-left: 1em;
    background-color: white;
    border-bottom: 1px solid gray;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.nav-main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5em;
}

.brand {
    font-size: 25px;
    text-decoration: none;
    font-family: 'Megrim', cursive;
}

.logo {
    font-family: 'Megrim', cursive;
    background: #42a7e1;
    padding: 0px 7px 0px 7px;
    border-radius: 30px;
    color: white;
    font-weight: 900;
}

.part1 {
    color: black;
    font-weight: 900;
}

.part2 {
    color: black;
    font-weight: 300;
}

.hamburger {
    width: 25px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    cursor: pointer;
}

.hamburger span {
    display: block;
    height: 2px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    transition: 0.3s;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

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

.nav-links a {
    padding: 1em;
    color: rgba(0, 0, 0, 0.6);
    transition: background-color 0.7s ease, color 0.7s ease;
    -webkit-transition: background-color 0.7s ease, color 0.7s ease;
    -moz-transition: background-color 0.7s ease, color 0.7s ease;
    -ms-transition: background-color 0.7s ease, color 0.7s ease;
    -o-transition: background-color 0.7s ease, color 0.7s ease;
}

.nav-links a:hover {
    color: black;
    background-color: rgba(0, 0, 0, 0.05);
}

.nav-links a:active {
    background-color: rgba(0, 0, 0, 0.2);
}

main {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card {
    position: sticky;
    top: 0;
}

.hero {
    width: 100%;
    min-height: 100vh;
    background-color: #edededff;
    fill: rgb(255, 255, 255);
    background-size: 500px;
    background-repeat: repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill-opacity='1' style='enable-background:new 0 0 500 500'%3E%3Cstyle%3E .st0{fill:rgb(255, 255, 255)} %3C/style%3E%3Cpath class='st0' d='M165.5 156.5c0 2-3 13-6 20s-7 10-4 12 18-3 21 0 43 19 48 22 21 11 21 11 59 11 64 12 10 4 10 4l3-3v-41-15L321 172l-6.5-8.5s-6-4-9-7-7-7-9-7-6.5-3.5-9.5-6.5l-15-15s-21-13-24-13-26.5 6.5-32.5 10.5-23 12-24 14-10 7-13 9-13 8-13 8z'/%3E%3Cpath class='st0' d='M130 207v30s2 26 3 30 4 19 4 21 3 19 4 23-1 12 3 12 17-5 20-6 9-3 17-5 29-8 34-11l10-6s2 4 9 0 13-4 13-9-3-48-3-49-1-10-3-11-31-15-38-19-10-5-14-7-8-3-13-4-31 0-35 0-11 1-11 4v7zM252 228s26 6 33 6 12 0 15 3l7 7h9s12 6 12 9 9 20 9 23 3 21 3 21-9 20-12 23-14 15-14 15l-11 30s-4 2-7 0-9-6-13-6-21-4-25-5-3-17-4-23-.6-68.1-.6-68.1l-4-23S246 229 247 228s5 0 5 0zM245.7 301.3c-1-2.5-3.7-3.9-6.3-3.2-2.8.8-6.3 1.8-8.4 2.9-4 2-13 6-16 7-1.7.6-4.1 1.8-5.8 2.7-1.4.8-2.4 2.1-2.7 3.7l-5.3 28.5c-.1.6-.3 1.2-.6 1.7-.8 1.3-2.1 4.1-.6 6.3 1.4 2.1 4.9 3.8 6.7 4.5.8.3 1.6.4 2.5.4l36.1-3.5c2.4-.2 4.4-2.1 4.8-4.5.3-1.9-1.7-10.5-2.1-13.8-.6-4.9 0-12.2-1-21.6-.5-4.5-.8-8.1-1-9.6 0-.6-.1-1-.3-1.5zM334 163s26-9 30-9 6-3 8-2 18 23 20 30 9 22 12 26 8 8 13 16 12 10 8 13-29 10-35 14-11 8-14 9-1 2-6 1-35-14-38-19-3-2-4-8-1-65-1-65l7-6zM226 358s6-1 11-1h12c3 0 10 2 15 3s19 2 23 5 8 5 8 5-6 24-7 26-3 5-6 6-12-6-16-10-17-12-23-16-19-13-19-13l2-5zM330 324s-11 15-13 20-5 12-6 15-6 11-6 16-4 10-6 14-5 10-7 15-4 6-1 8 15 8 19 13 8 8 13 10 10 0 14-3 30-14 34-16 14-22 17-28 4-7 6-11 3-7 6-11 3-5 5-9 2-5 4-9 3-10 1-11-23-1-30 0-18-6-25-6-18-4-18-4-2-7-4-6-3 3-3 3zM388 260s12-4 22-9 7-3 16-7 5-5 17-10 15-6 17-8 3-4 12-7 5-1 11-4 9-8 11-10 6-5 8-6 8 5 10 9-2 9-5 27-4 30-8 37-2 9-9 17-13 17-13 17-3 10-4 13-1 6-5 8-33 6-36 5-7-2-11-12-6-18-12-25-11-13-13-14-10-8-11-11-9-5-4-8 7-2 7-2zM286 135s18 8 27 16 13 11 16 9 41-13 43-17 28-54 31-60 4-17 8-25 15-37 17-41 3-7 3-13v-17c0-3-46-14-61-15s-30 1-34 8-3 11-7 19-4 23-8 31-28 83-29 89-6 16-6 16z'/%3E%3Cpath class='st0' d='M414 81s-39 62-36 67 33 53 37 61 5 8 7 12 3 10 8 9 10-3 14-7 10-4 17-7 18-6 18-6 5 1 10-4 7-7 15-18 18-8 15-33-9-55-9-55-16-13-20-17-9-10-14-10-62 8-62 8zM192 411c6-4 14-7 18-9s16-7 22-10 11-6 11-6l8-1s35 27 49 38 19 16 19 16-12 11-17 16-20 17-22 20-4 5-6 6-7-6-12-10-8-7-10-6-1-1-7-6-14-12-17-15-26-19-29-23-7-10-7-10zM347 276c10-5 12-8 17-8s10 0 12 2 11 8 16 16 13 8 15 17 11 21 10 25-2 4-6 5-26-1-30-2-4-1-10-3-2-4-11-3l-9 1s-3-1-6-4-9-6-9-6 4 0 6-6 6-13 6-19-1-15-1-15zM337.2 260c-.9-2.8 2.2-5.2 4.7-3.6 1.2.8 3.6.6 5.1 1.6 8 5 8 2 9 4s1.6 4.9-4 7c-8 3-14 5-13 1 .5-1.8-.6-6-1.8-10zM-86 81s-39 62-36 67 33 53 37 61 5 8 7 12 3 10 8 9 10-3 14-7 10-4 17-7 18-6 18-6 5 1 10-4 7-7 15-18 18-8 15-33-9-55-9-55-16-13-20-17-9-10-14-10-62 8-62 8z'/%3E%3Cpath class='st0' d='M-112 260s12-4 22-9 7-3 16-7 5-5 17-10 15-6 17-8 3-4 12-7 5-1 11-4 9-8 11-10 6-5 8-6 8 5 10 9-2 9-5 27-4 30-8 37-2 9-9 17-13 17-13 17-3 10-4 13-1 6-5 8-33 6-36 5-7-2-11-12-6-18-12-25-11-13-13-14-10-8-11-11-9-5-4-8 7-2 7-2zM286 635s18 8 27 16 13 11 16 9 41-13 43-17 28-54 31-60 4-17 8-25 15-37 17-41 3-7 3-13v-17c0-3-46-14-61-15s-30 1-34 8-3 11-7 19-4 23-8 31-28 83-29 89-6 16-6 16zM416 339c-3 2-5 10-5 10s0 6-1 9-7 5-6 9-9 19-16 34-11 15-8 19 20 14 30 18 29 8 38 15 15 16 18 19 4 4 8 9 1-1 13 12 1 18 12 18 33-43 33-43-19-68-21-74-4-12-9-19-11-7-18-20-17-21-19-21-49 5-49 5z'/%3E%3Cpath class='st0' d='M372 423s12 10 22 14 22 4 27 9 16 10 16 10 11 1 9 6-8 7-8 9-5 12-5 12-26-11-36-13-18-3-24-7-10-12-10-12l9-28zM416-161c-3 2-5 10-5 10s0 6-1 9-7 5-6 9-9 19-16 34-11 15-8 19 20 14 30 18 29 8 38 15 15 16 18 19 4 4 8 9 1-1 13 12 1 18 12 18 33-43 33-43-19-68-21-74-4-12-9-19-11-7-18-20-17-21-19-21-49 5-49 5zM-84 339c-3 2-5 10-5 10s0 6-1 9-7 5-6 9-9 19-16 34-11 15-8 19 20 14 30 18 29 8 38 15 15 16 18 19 4 4 8 9 1-1 13 12 1 18 12 18 33-43 33-43-19-68-21-74-4-12-9-19-11-7-18-20-17-21-19-21-49 5-49 5zM214 60l-7 5 2 8s8 12 22 21l14 9 12 5 16 16 10 5 29-102-23-9-47-6-14 27-14 21zM197 71l-32 39s-1 4-5 9-7 7-9 10-8 6-1 8 11-2 19-2h18s5-4 12-7 19-10 24-12 15-3 16-7-4-7-4-7-11-8-13-10-17-9-18-14-7-7-7-7zM315 20c1-2 3-8 3-8s2-9 3-10 6-15 6-15 3-9 2-12-26-7-31-6-22 2-28 4-19 9-21 13-2 16-2 16-3 5 0 6 34 2 34 2 9 4 17 6 17 4 17 4zM315 520c1-2 3-8 3-8s2-9 3-10 6-15 6-15 3-9 2-12-29-7-34-6-12 12-18 14-26-1-28 3-2 16-2 16-3 5 0 6 34 2 34 2 9 4 17 6 17 4 17 4zM4 282s-16 20-18 25-11 16-9 21 15 21 15 21 8 7 9 11 9 14 9 14l9 9 9 3s22 5 22 7 14 2 17-4 20-25 24-29 26-2 27-4 19-27 20-32-22-26-22-26-41-15-44-24-24-3-24-3l-14 11H4zM23.7 406.7c2.4 4.3 12.5 42.2 12 42 0 0 2.3 4.3 2.3 12.3s6 14 6 14l12 10s13 17 18 19 18-4 18-4l17-15 13-16s-18-26-18-33-7-18-7-18-13-7-25-10-30-12-35-13-15 8.7-13.3 11.7zM21-102l12 42s-2 5-1 8 6 5 6 13 6 14 6 14l12 10S69 2 74 4s18-4 18-4l17-15 13-16s-18-26-18-33-7-18-7-18-13-7-25-10-30-12-35-13-16 3-16 3z'/%3E%3Cpath class='st0' d='M18 216s-4 20-4 22-4 12-4 20-5 15-2 16 14 4 19 2 19-14 20-23-20-46-22-48-7 11-7 11zM7 196c3 2 6 7 8 7s13-5 13-7 2-11 0-13-8-4-8-4-12 10-13 12 0 5 0 5zM97 276s-2 6 1 8 21 6 23 8 9 8 11 6-3-24-3-24-2.7-12-6-10-26 12-26 12zM104 148s16 32 18 34 10 8 10 8l13-1s5-7 7-15 7-18 7-18 1-4-5-8-12-4-12-4l-31-2h-11l4 6zM88 370s-16 19-16 23 5 11 5 11l12 3s15 7 19 6 31 1 44-1 24-3 28-3 14-5 15-11-4-10-5-26-11-27-11-27l-8-17s-23-1-27 5-14 23-15 25-7 7-7 7-21-3-23-1-11 6-11 6zM200 365v17s2 9 6 10 21-2 24-8-5-9-9-14-21-5-21-5zM178 326s4 11 6 13 8 3 8 3l8-21s-10-4-12-3-10 8-10 8zM106 420c4 7 8 21 8 21s1 8 5 15 15 27 15 27l9 13 5 9s10 3 20 3 20-5 22-8 31-44 31-44 8-4 3-9-23-15-24-17-16-15-18-15-16 4-18 4-10-3-22-3-20 3-24 1-12 3-12 3zM306 462c2-1 12-18 16-19s22 20 22 20-1 7-7 8-31-9-31-9zM337 441c3 5 6 13 8 15s11 4 11 4 7-28 6-30-17 4-20 5-5 6-5 6zM228 454s-2 8-5 10-9 6-6 10 19 12 24 8 9-7 7-12-14-14-14-14l-6-2zM210 482s-8 9-10 13-6 13-8 15-8 9-8 9l-12 27s23 14 32 14 30-47 32-52 1-15 1-15l-27-11zM437-6s-3 12-3 19-2 9-6 19-11 26-12 30-2 11-2 11 8 5 19-1 17-4 19-4 21 3 24 1 3-21 4-29 8-30 8-30-1-10-4-12-18-8-24-9-23 5-23 5zM437 494s-3 12-3 19-2 9-6 19-11 26-12 30-2 11-2 11 8 5 19-1 17-4 19-4 21 3 24 1 3-21 4-29 8-30 8-30-1-10-4-12-18-8-24-9-23 5-23 5zM448 467s-10 11-7 14 12 3 12 3l13-1s-3-7-6-9-12-7-12-7zM492 17s-5 10-5 16v17c0 4 3 21 3 21l20 22h20s17-14 21-27 7-36 7-36 4-22 2-25-18-15-18-15l-34 28-16-1zM-8 17s-5 10-5 16v17c0 4 3 21 3 21l20 22h20s17-14 21-27 7-36 7-36 4-22 2-25-18-15-18-15L8 18l-16-1zM50 118s26.7 14 31 14c5 0 21 4 21 4l38-1s48-65 50-68 1-3-2-5-18-5-22-10-26-11-28-11-24-2-24-2-46 57-50 61-15 12-15 14 1 4 1 4zM106-80c4 7 8 21 8 21s1 8 5 15 15 27 15 27l9 13 5 9s10 3 20 3 20-5 22-8 31-44 31-44 8-4 3-9-23-15-24-17-16-15-18-15-16 4-18 4-10-3-22-3-20 3-24 1-12 3-12 3zM-8 517s-5 10-5 16v17c0 4 3 21 3 21l20 22h20s17-14 21-27 7-36 7-36 4-22 2-25-18-15-18-15L8 518l-16-1zM121-18L95 7l4 11 13 12 11 2h17s10-11 8-18-19-29-19-29l-8-3zM121 482l-26 25 4 11 13 12 11 2h17s10-11 8-18-19-29-19-29l-8-3zM210-18s-8 9-10 13-6 13-8 15-8 9-8 9l-12 27s23 14 32 14 30-47 32-52 1-15 1-15l-27-11z'/%3E%3Cpath class='st0' d='M-84-161c-3 2-5 10-5 10s0 6-1 9-7 5-6 9-9 19-16 34-11 15-8 19 20 14 30 18 29 8 38 15 15 16 18 19 4 4 8 9 1-1 13 12 1 18 12 18 33-43 33-43-19-68-21-74-4-12-9-19-11-7-18-20-17-21-19-21-49 5-49 5zM97 23s-5-11-5-14-12 0-12 0l-10 2s-3 10-5 13-3 18-4 22l-4 12s-2 14-3 16-2 10 0 13 8 4 8 4 16-12 18-16 4-9 4-9l7-10c3-1 10-12 11-14s-5-19-5-19zM123 200s-25-54-29-57-18-10-29-13c-7.7-2.1-15.8-6.6-21.1-8.8L30 109l-9-2s-1 1-1 4 7 53 7 53l1 8 6 13s2 17 2 19 14 33 14 33-1 6 2 12 22 24 27 25 14-4 14-4 27-8 30-12 3-20 3-27-3-31-3-31zM50 91s6 2 5 6-5 9-5 9l-15-1s-1-12 1-13 14-1 14-1zM154 14s-3 12-4 15-1 5 2 8 11 6 13 5 5-6 7-9 7-13 6-16-12-4-12-4l-12 1zM504 282s-16 20-18 25-11 16-9 21 15 21 15 21 8 7 9 11 9 14 9 14l9 9 9 3s22 5 22 7 14 2 17-4 20-25 24-29 26-2 27-4 19-27 20-32-22-26-22-26-41-15-44-24-24-3-24-3l-14 11h-30z'/%3E%3C/svg%3E");
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

}

.img-container {
    width: clamp(0px, 90%, 500px);
    height: 230px;
    position: relative;
}

.img1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 110px;
    background-image: url("/assets/my-img.jpg");
    background-size: cover;
    background-position: center 80%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.img2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 170px;
    background-image: url("/assets/my-img.jpg");
    background-size: cover;
    background-position: center 80%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.img3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 230px;
    background-image: url("/assets/my-img.jpg");
    background-size: cover;
    background-position: center 80%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

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

.intro {
    font-size: clamp(0em, 7vw, 1em);
}

.name {
    color: #f586d6;
}

.loader {
    font-size: clamp(0em, 6vw, 0.8em);
    box-sizing: content-box;
    height: 40px;
    display: flex;
    -webkit-box-sizing: content-box;
}

.words {
    overflow: hidden;
    position: relative;
}

.words::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
}

.word {
    display: block;
    height: 100%;
    padding-left: 6px;
    color: #42a7e1;
    animation: spin 4s infinite;
    -webkit-animation: spin 4s infinite;
}

@keyframes spin {
    10% {
        -webkit-transform: translateY(-102%);
        transform: translateY(-102%);
    }

    25% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    35% {
        -webkit-transform: translateY(-202%);
        transform: translateY(-202%);
    }

    50% {
        -webkit-transform: translateY(-200%);
        transform: translateY(-200%);
    }

    60% {
        -webkit-transform: translateY(-302%);
        transform: translateY(-302%);
    }

    75% {
        -webkit-transform: translateY(-300%);
        transform: translateY(-300%);
    }

    85% {
        -webkit-transform: translateY(-402%);
        transform: translateY(-402%);
    }

    100% {
        -webkit-transform: translateY(-400%);
        transform: translateY(-400%);
    }
}

.info {
    width: 100%;
    min-height: 100vh;
    padding: 6em 0;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='0.5' stroke='%23edededff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,-10)' fill='url(%23a)'/></svg>");
    box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7em;
    text-align: center;
}

h2 {
    font-size: xx-large;
}

.about {
    width: 100%;
    max-width: 1600px;
    padding: 0 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
    text-align: center;
}

.about p {
    text-align: justify;
    font-size: 1.3em;
}

.education {
    width: 100%;
    max-width: 1600px;
    padding: 0 1em;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

.education-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2em;
}

.tack-line {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 8px;
    width: 1.5px;
    height: 100%;
    background-color: black;
}

.inst {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1em;
}

.circle {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin: 8px -5px;
    background-color: black;
    border-radius: 50%;
}

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

.inst-info {
    text-align: left;
}

.skills {
    width: 100%;
    max-width: 1600px;
    padding: 0 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4em;
    text-align: center;
}

.planned-tech,
.used-tech {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
    text-align: center;
}

.skill-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 2em;
    row-gap: 0.8em;
}

.icon {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}

.icon:hover {
    transform: translateY(-10px);
    -webkit-transform: translateY();
    -moz-transform: translateY();
    -ms-transform: translateY();
    -o-transform: translateY();
}

.icon path {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}

.icon:hover .html {
    fill: #E44D26;
}

.icon:hover .css {
    fill: #1572B6;
}

.icon:hover .js {
    fill: #F0DB4F;
}

.icon:hover .bootstrap {
    fill: #7211F6;
}

.icon:hover .vue {
    fill: #41B883;
}

.icon:hover .nuxt {
    fill: #00dc82;
}

.icon:hover .php {
    fill: #4F5D95;
}

.icon:hover .mysql {
    fill: #00618A;
}

.icon:hover .c {
    fill: #a9bacd;
}

.icon:hover .cpp {
    fill: #004482;
}

.icon:hover .py {
    fill: #FFD845;
}

.icon:hover .java {
    fill: #EA2D2E;
}

.icon:hover .git {
    fill: #F34F29;
}

.icon:hover .github {
    fill: #24292E;
}

.icon:hover .netlify {
    fill: #05BDBA;
}

.icon:hover .cloudflare {
    fill: #F38020;
}

.icon:hover .vscode {
    fill: #25AFF2;
}

.icon:hover .webstorm {
    fill: #0788F8;
}

.icon:hover .phpstorm {
    fill: #7955FE;
}

.icon:hover .pycharm {
    fill: #21D789;
}

.icon:hover .intellij {
    fill: #087CFA;
}

.icon:hover .laravel {
    fill: #f0513f;
}

.icon:hover .spring {
    fill: #77bc1f;
}

.icon:hover .postgre {
    fill: #336791;
}

.icon:hover .mongo {
    fill: #4FAA41;
}

.icon:hover .docker {
    fill: #019BC6;
}

.achievements {
    width: 100%;
    max-width: 1600px;
    padding: 0 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

.achievement-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: justify;
    gap: 2em;
}

.achievement {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.achievement h3 {
    flex-shrink: 0;
    margin-left: 0.5em;
}

.achievement-content {
    margin-top: 1px;
}

.projects {
    width: 100%;
    max-width: 1600px;
    padding: 0 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
    text-align: center;
}

.project-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    text-align: center;
}

.project {
    flex: 1 1 300px;
    max-width: 350px;
    padding: 1.5em;
    border-radius: 5px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.2em;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.project:nth-child(1) {
    background-color: rgba(104, 214, 104, 0.7);
    border: 3px solid rgba(104, 214, 104);
}

.project:nth-child(2) {
    background-color: rgba(153, 255, 153, 0.7);
    border: 3px solid rgb(153, 255, 153);
}

.project:nth-child(3) {
    background-color: rgba(153, 255, 204, 0.7);
    border: 3px solid rgb(153, 255, 204);
}

.project:nth-child(4) {
    background-color: rgba(174, 251, 251, 0.7);
    border: 3px solid rgb(174, 251, 251);
}

.project:nth-child(5) {
    background-color: #9DDCFF;
    border: 3px solid #7dc4ec;
}

.project:nth-child(6) {
    background-color: rgba(204, 204, 255, 0.7);
    border: 3px solid rgb(204, 204, 255);
}

.project:nth-child(7) {
    background-color: rgba(204, 153, 255, 0.7);
    border: 3px solid rgb(204, 153, 255);
}

.project:nth-child(8) {
    background-color: #ffc9f0;
    border: 3px solid #f5aee1;
}

.lang {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
}

.lang p {
    background-color: black;
    color: white;
    padding: 0 0.5em;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.link {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8em;
}

.link a {
    transition: transform 0.4s ease;
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -ms-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
}

.link a:hover {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
}

.see-more {
    flex: 1 1 300px;
    max-width: 350px;
    padding: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    text-align: center;
}

.see-more a {
    cursor: pointer;
    padding: 0.5em 1em;
    background-color: black;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    color: white;
    border: 0;
    border-radius: 5px;
    transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -ms-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
}

.see-more a:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.see-more a:active {
    scale: 0.95;
}

.contact {
    width: clamp(0px, 98%, 800px);
    padding: 4em 4em;
    background: conic-gradient(from 90deg at 3px 3px, #0000 90deg, black 0) 1.2em 1.2em/calc(100% - 3px - 2*1.2em) calc(100% - 3px - 2*1.2em);
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 3em;
    text-align: center;
}

.contact-container {
    width: clamp(0px, 100%, 400px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5em;
}

label {
    padding: 0 0.3em;
    display: block;
    width: fit-content;
}

.lbl-name {
    background-color: #ffc9f0;
}

.lbl-email {
    background-color: #FFE68C;
}

.lbl-msg {
    background-color: #9DDCFF;
}

input,
textarea {
    margin-top: 0.5em;
    width: 100%;
    padding: 0.5em 0;
    border: 0;
    border-bottom: 3px solid black;
    resize: none;
    font-family: 'Poppins', sans-serif;
    text-align: left;
}

#inputName:focus {
    border-bottom: 3px solid #ffc9f0;
}

#inputEmail:focus {
    border-bottom: 3px solid #FFE68C;
}

#inputMsg:focus {
    border-bottom: 3px solid #9DDCFF;
}

button {
    cursor: pointer;
    padding: 0.5em 1em;
    background-color: black;
    border: 0;
    border-radius: 5px;
    color: white;
    transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -ms-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

button:active {
    scale: 0.95;
}

footer {
    padding: 2em 1em 1em;
    border-top: 1px ridge gray;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2em;
    text-align: center;
}

footer div {
    width: 100%;
    max-width: 1600px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5em;
    text-align: center;
}

footer div a {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}

footer div a:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

footer div a svg {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}

.facebook svg {
    color: #000000;
}

.facebook:hover svg {
    color: #0866FF;
}

.instagram svg {
    color: #000000;
}

.instagram:hover svg {
    color: #FE0464;
}

.discord circle {
    color: #000000;
}

.discord:hover circle {
    color: #5966F1;
}

.linkedin svg {
    color: #000000;
}

.linkedin:hover svg {
    color: #0A66C2;
}

.github svg {
    color: #000000;
}

.github:hover svg {
    color: #24292E;
}

.leetcode svg {
    color: #000000;
}

.leetcode:hover svg {
    color: #FFA116;
}

.codeforces svg {
    color: #000000;
}

.codeforces:hover svg {
    color: #1787CA;
}

@media all and (max-width: 800px) {
    header {
        padding-left: 0;
        background-color: transparent;
        border-color: #ccc;
        flex-direction: column;
    }

    .nav-main {
        padding: 0.5em 1em;
        background-color: white;
    }

    .hamburger {
        display: flex;
    }

    .nav-links {
        display: none;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .nav-links.show {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .nav-links a {
        width: 100%;
        padding: 1em;
    }
}

@media all and (max-width: 1000px) {
    .hero {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3em;
    }
}