@import"https://fonts.googleapis.com/css2?family=Creepster&family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Fascinate&family=Gloria+Hallelujah&family=Honk&family=Luckiest+Guy&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poller+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rock+Salt&family=Sofia&family=Tilt+Warp&family=Ultra&display=swap";:root{--Poppins: "Poppins", sans-serif;--Playfair: "Playfair", serif;--Luckiest: "Luckiest Guy", cursive;--Gloria: "Gloria Hallelujah", cursive;--Honk: "Honk", system-ui;--RockSalt: "Rock Salt", cursive;--Fascinate: "Fascinate", system-ui;--Creepster: "Creepster", system-ui;--Ultra: "Ultra", serif;--Sofia:"Sofia", cursive;--TiltWarp: "Tilt Warp", sans-serif;--PollerOne: "Poller One", sans-serif;--Familjen: "Familjen Grotesk", sans-serif}*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;font-family:Poppins,sans-serif}body{margin:0;padding:0;font-family:Canva Sans,Arial,Helvetica,sans-serif}.wrapper{position:relative}svg{display:block;width:100%;height:100vh;position:fixed;z-index:3;top:0;left:0}.scrollElement{position:absolute;height:3000px;width:100%;top:0;z-index:4}.btn{position:fixed;bottom:5%;right:0;transform:translate(-50%);border:1px solid #fff;border-radius:5px;font-size:.9rem;padding:.5rem .7em;background-color:transparent;color:#fff;font-family:Verdana,Geneva,Tahoma,sans-serif;-webkit-font-smoothing:antialiased;cursor:pointer;transition:all .3s;z-index:11}.btn_works{left:100px;right:unset;text-decoration:none}.btn:hover{background:#fff;color:#1b1734}@media (max-width: 490px){#text,#arrow{transform-origin:50% 50%;transform:translateY(-120px) scale(.8)}}.container{position:absolute;z-index:9999999;display:flex;flex-direction:column;align-items:center;width:100%}header{position:fixed;background-color:#ffffff1a;top:0;left:0;width:100%;padding:20px 100px;display:flex;justify-content:space-between;align-items:center;z-index:99999;transition:.5s ease}header.sticy{position:fixed;background-color:#dc143c;top:0;left:0;width:100%;padding:20px 60px;display:flex;justify-content:space-between;align-items:center;z-index:99999}header .brand{color:#ff9500;font-size:32px;font-weight:700;text-transform:uppercase;text-decoration:none;font-family:var(--PollerOne);transition:.6s ease}header .navigation{position:relative}header .navigation a{color:#ff9500;font-size:20px;text-transform:uppercase;font-weight:600;text-decoration:none;margin-left:30px;transition:all .5s ease;cursor:pointer;font-family:var(--TiltWarp);opacity:.7}header .navigation a:hover{color:#dc143c}header .crim{color:#fff}header .navigation .crim{color:#fff;opacity:.9}header .navigation .crim:hover{color:#ff9500}section.main{padding:100px;z-index:9999;width:100%}.main{position:relative;min-height:100vh;display:flex;align-items:center;background:url(../public/background.jpg) no-repeat;background-position:center;background-size:cover;background-attachment:fixed}.main .content{max-width:800px}.main .content h2{color:#fff;font-size:36px;font-weight:500;font-family:var(--TiltWarp)}.main .content h2 span{font-size:60px;font-weight:600;font-family:var(--PollerOne)}.animated-text{height:70px;overflow:hidden;position:relative}.animated-text h3{color:#2525cf;font-size:52px;font-weight:700;line-height:70px;letter-spacing:1px}.animated-text h3{animation:text-move 10s infinite ease}@keyframes text-move{0%{transform:translateY(0)}25%{transform:translateY(-70px)}50%{transform:translateY(-140px)}75%{transform:translateY(-70px)}to{transform:translateY(0)}}.title{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.section-title{position:relative;color:#dc143c;font-size:38px;font-weight:800;margin-bottom:60px;font-family:var(--Ultra)}.section-title:before{content:"";position:absolute;top:56px;left:50%;width:140px;height:6px;background:#dc143c;transform:translate(-50%)}.section-title:after{content:"";position:absolute;top:50px;width:20px;height:20px;background:#dc143c;transform:translate(-50%);left:50%;border-radius:50%}.about .content{position:relative;width:100%;display:flex;justify-content:center;margin-top:20px}.about .content .col-left{position:relative;width:45%;padding:0 135px}.about .content .card{width:300px;height:450px;position:relative;display:flex;justify-content:center;align-items:flex-end;padding:0 36px;perspective:2500px;margin:0 50px;border-radius:15px}.about .content .card .cover-image{width:100%;height:100%;object-fit:cover;border-radius:15px}.about .content .card .wrapper{transition:all .5s;position:absolute;width:100%;z-index:-1;border-radius:15px}.about .content .card .wrapper img{width:300px;height:450px}.about .content .card:hover .wrapper{transform:perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);box-shadow:2px 35px 32px -8px #000000bf;-webkit-box-shadow:2px 35px 32px -8px rgba(0,0,0,.75);-moz-box-shadow:2px 35px 32px -8px rgba(0,0,0,.75)}.about .content .card .wrapper:before,.wrapper:after{content:"";opacity:0;width:100%;height:80px;transition:all .5s;position:absolute;left:0;border-radius:15px}.about .content .card .wrapper:before{top:0;height:100%;background-image:linear-gradient(to top,transparent 46%,rgba(12,13,19,.5) 68%,rgba(12,13,19) 97%)}.about .content .card .wrapper:after{bottom:0;opacity:1;background-image:linear-gradient(to bottom,transparent 46%,rgba(12,13,19,.5) 68%,rgba(12,13,19) 97%)}.about .content .card:hover .wrapper:before,.wrapper:after{opacity:1;border-radius:15px}.card:hover .wrapper:after{height:120px}.character{width:100%;opacity:0;transition:all .5s;position:absolute;z-index:-1;border-radius:15px}.card:hover .character{opacity:1;transform:translate3d(0,-30%,100px)}.about .content .col-right{padding:20px 100px 40px 0;position:relative;width:45%}.about .col-right .content-title{color:#dc143c;font-family:var(--TiltWarp);font-size:20px;font-weight:700}.about .col-right .paragraph-text{color:#dc143c;font-size:18px;font-family:var(--TiltWarp);font-weight:400;letter-spacing:1px;word-spacing:3px;line-height:24px}.skills{padding:100px}.skills .content{position:relative;display:flex;justify-content:space-between}.skills .content .column{position:relative;width:45%}.skills .col-left{padding-top:40px}.skills .col-left .content-title{margin:0 100px 20px;color:#fff}.skills .col-left .content-text{color:#fff}.skills .col-right{width:45%}.skills .col-right .bar{position:relative;display:flex;flex-direction:column}.skills .col-right .bar .info{display:flex;justify-content:space-between}.skills .col-right .exp-info{font-size:24px;color:#f5f5f5;font-weight:500}.skills .col-right .exp-line{position:relative;width:100%;height:15px;background:#ccc;border-radius:2px}.skills .col-right .exp-line:before{content:"";position:absolute;top:0;left:0;height:15px;border-radius:2px}.skills .col-right .bar .html:before{width:90%;background:#e45126}.skills .col-right .bar .css:before{width:85%;background:#0c73b8}.skills .col-right .bar .javascript:before{width:90%;background:#e3a324}.skills .col-right .bar .react:before{width:87%;background:#09a0cd}.skills .col-right .bar .nodejs:before{width:85%;background:#5bd350}.skills .col-right .bar .mongodb:before{width:90%;background:#3e4ceb}.skills .col-right .bar .github:before{width:90%;background:#b30202}.work{width:100%;padding:0 250px 30px}.work .content{position:relative;display:grid;grid-template-columns:repeat(2,1fr);column-gap:60px;row-gap:30px;grid-auto-columns:wrap}.work .content .card{height:500px;border:1pt solid black;border-radius:10px}.work .content .card .img-box{display:flex;width:100%;height:60%}.contact{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;background:#2b3d64;opacity:60%;padding-top:70px}.owner{color:#fff;font-family:var(--Ultra);font-size:24px;font-weight:400;letter-spacing:1px;word-spacing:3px}.contact .contact-title{position:relative;color:#dc143c;font-size:38px;font-weight:800;margin-bottom:60px;font-family:var(--Ultra)}.contact .contact-title:before{content:"";position:absolute;top:56px;left:50%;width:140px;height:6px;background:#dc143c;transform:translate(-50%)}.contact .link-box{padding:30px 20px;display:flex;gap:40px}.contact .link-box .footer-icon{position:relative;text-align:center;cursor:pointer}.contact .link-box .footer-icon .bx{color:#fff}.contact .link-box .footer-icon:hover .bx{color:#e45126}.contact .link-box .copy-box{transition:all 2s ease}.reveal{position:relative;transform:translateY(50px);opacity:0;transition:all 1.3s ease}.reveal.active{transform:translateY(0);opacity:1}.show-result{position:absolute;z-index:9;top:0;left:-30px;display:flex;width:120px;height:40px;color:#fff;background:#dc143c;align-items:center;justify-content:center;border-radius:20px;opacity:0}@media (max-width: 1200px){header{padding:20px 60px}.main .content h3{font-size:48px}.about .content .col-left,.about .content .col-right{padding:0 40px}.skills{padding:80px 40px}.skills .col-left{padding-top:5px}.work{padding:0 80px 30px}}@media (max-width: 1049px){header{padding:12px 20px}header .navigation{display:none}header .navigation.active{z-index:888;position:fixed;background:#fff;top:0;right:0;width:380px;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 5px 25px / 15%;transition:.3s ease;gap:30px;border-radius:10px}.menu-btn{position:absolute;background:url("data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%20id='Menu%20/%20Menu_Alt_04'%3e%3cpath%20id='Vector'%20d='M5%2017H19M5%2012H19M5%207H13'%20stroke='%23ff9500'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") no-repeat;background-size:40px;background-position:center;width:45px;height:40px;right:0;margin:0 20px;cursor:pointer;transition:.4s ease;color:#fff}.menu-btn.active{z-index:999;background:url("data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='-2.4%20-2.4%2028.80%2028.80'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20stroke='%23ff9500'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%20id='Menu%20/%20Close_MD'%3e%3cpath%20id='Vector'%20d='M18%2018L12%2012M12%2012L6%206M12%2012L18%206M12%2012L6%2018'%20stroke='%23ff9500'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") no-repeat;background-size:45px;background-position:center;transition:.3s ease}}@media (max-width: 992px){header{padding:15px 30px}header .brand{margin-bottom:10px}header .navigation{margin-top:10px}#main{width:100%;padding:60px 30px}.main .content{position:relative;width:100%}.main .content h2{font-size:32px}.main .content h3,.main .content span{font-size:48px}.about .content{position:relative;flex-direction:column;align-items:center;padding:0 30px;text-align:center}.about .content .column{position:relative;width:100%;max-width:800px;padding:20px}.about .col-left{display:flex;align-items:center;justify-content:center}.about .col-right .paragraph-text{font-size:16px;line-height:24px}.skills{padding:60px 30px}.skills .content{position:relative;flex-direction:column;align-items:center;text-align:center;gap:40px;width:100%}.skills .content .column{position:relative;width:100%;max-width:800px;padding:0 20px}.skills .col-right .exp-info{font-size:18px}.skills .col-right .exp-line{height:18px}.work{padding:0 180px 30px}.work .content{grid-template-columns:1fr;gap:25px}.work .content .card{height:450px}.contact{height:auto;padding:50px 20px;text-align:center}.contact .link-box{flex-wrap:wrap;justify-content:center}}@media (max-width: 768px){.main{padding:40px 20px}.main .content h2{font-size:26px}.main .content h2 span{font-size:38px}.main .content h3{font-size:32px;line-height:64px}.about .col-right .paragraph-text{font-size:15px;line-height:22px}.skills .col-right .exp-info{font-size:16px}.skills .col-right .exp-line{height:16px}.work{width:100%;padding:0 100px}.work .content{width:100%}.work .content{padding:30px 0}.work .content .card{height:320px}.owner{font-size:18px}.contact{width:100%}}@media (max-width: 480px){header{padding:10px 20px}header .brand{font-size:22px}header .navigation a{font-size:14px;margin-left:10px}.main .content h2{font-size:20px}.main .content h2 span{font-size:28px}.animated-text h3{font-size:20px;line-height:36px}.section-title{font-size:26px}.about .col-right .paragraph-text{font-size:14px;line-height:20px}.skills{padding:30px 15px}.skills .col-right .exp-info{font-size:14px}.skills .col-right .exp-line{height:14px}.work{padding:10px 80px}.work .content .card{height:280px}.contact .contact-title{font-size:26px;margin-bottom:25px}.contact .link-box{flex-direction:column;gap:15px}.contact .link-box .footer-icon{font-size:14px}}