@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{height:100vh;font-family:Roboto,sans-serif;background-color:#171810}.loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:4px solid green;border-left-color:transparent;border-radius:50%}.loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:4px solid green;border-left-color:transparent;width:50px;height:50px}.loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:4px solid green;border-left-color:transparent;width:50px;height:50px;animation:spin89345 1s linear infinite}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}li{list-style:none}a{text-decoration:none}#root{height:100%}header{display:flex;justify-content:space-between;align-items:center;padding:15px 30px 20px;border-bottom:.1px solid rgba(255,255,255,.068)}header h1{cursor:default;color:#fff;font-size:22px}header .desktop ul{display:flex}header .desktop ul li{margin-left:8px}header .desktop ul li button{background:none;border:none;color:#fff;font-size:16px;font-weight:500;cursor:pointer}header .desktop ul li button p{transition:.6s}header .desktop ul li button p:hover{color:#20d779}header .mobile{display:none;z-index:24523524}header .mobile i{color:#eee;cursor:pointer}header .mobile:hover ul{display:block}header .mobile ul{margin-top:10px;display:none;position:absolute;right:10px;background-color:#393e46;padding:10px;border-radius:10px}header .mobile ul:before{content:"";width:20px;height:20px;position:absolute;bottom:135px;left:35px;background:none}header .mobile ul button{background:none;border:none;color:#fff;font-size:16px;font-weight:500;cursor:pointer;margin-bottom:5px}.home{height:calc(100% - 63px);margin:0 200px}.home .container{height:100%;display:flex;justify-content:space-between;align-items:center}.home .text{margin-bottom:230px}.home .text .h1{color:#fff;margin-bottom:2px;font-size:40px}.home .text{position:relative}.home .text .span{font-size:40px;color:#20d779;margin-bottom:27px}.home .text img{position:absolute;max-width:45px;top:20px;left:-70px}.home .text a{background-color:#393e46;color:#eee;padding:8px 13px;border-radius:20px;font-size:15px;transition:.6s}.home .text a:hover{background-color:#20d779}.home .image{position:relative;margin-top:80px}.home .image .photo1{max-width:240px;position:relative;z-index:1000}.home .image .photo2{position:absolute;left:40px;bottom:100px;max-width:250px}.about{height:calc(100% - 63px);margin:0 100px}.about .container{height:100%;display:flex;align-items:center;justify-content:space-between}.about .container .text{position:relative;margin-bottom:100px}.about .text h1{color:#fff;margin-bottom:10px;font-size:40px}.about .text h1 span{color:#20d779}.about .text p{color:#c5c7c9;line-height:24px;width:350px;font-size:15px}.about .text .photoOne{position:absolute;bottom:350px}.about .text .photoTwo{position:absolute;left:260px;top:-30px;max-width:60px}.about .text .photoThree{transform:rotate(160deg);position:absolute;left:200px;max-width:60px}.about .image{margin-top:300px;position:relative;width:fit-content;height:fit-content}.about .image .photoFour{position:absolute;max-width:350px;left:-100px;bottom:35px}.about .image .photoFive{position:relative;max-width:220px;z-index:100000}.skills{height:calc(100% - 63px);width:100%}.skills .container{position:absolute;top:30%;display:flex;align-items:center;justify-content:center;flex-direction:column}.skills .container h1{color:#eee;font-size:40px;margin-bottom:50px}.skills .container h1 span{color:#20d779}.skills .container .cards{margin-bottom:50px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px}.skills .container .cards .card{position:relative;background-color:#393e4683;width:180px;height:150px;display:flex;justify-content:center;align-items:center;flex-direction:column;border-radius:10px;overflow:hidden}.skills .container .cards .card img{transition:.6s}.skills .container .cards .card:hover img{transform:rotate(60deg)}.skills .container .cards .card:hover p{transform:translateY(-40px)}.skills .container .cards .card p{transition:.6s;background-color:#eee;width:100%;display:flex;align-items:center;justify-content:center;font-size:20px;position:absolute;z-index:3333333;height:40px;top:150px}.projects{position:relative;height:calc(100% - 63px);margin-bottom:50px}.projects img{max-width:100%;height:100%}.projects .active,.projects .container .head ul li:hover{background-color:#20d779!important}.projects .container{position:absolute;z-index:432554;display:flex;flex-direction:column;top:20%;margin-left:70px}.projects .container .head h1{color:#fff}.projects .container .head h1 span{color:#20d779}.projects .container .head ul{margin-top:15px;display:flex;margin-bottom:30px;flex-wrap:wrap}.projects .container .head ul li:first-child{width:50px!important;text-align:center}.projects .container .head ul li{position:relative;margin-right:5px;margin-bottom:15px;border-radius:25px;padding:7px;background-color:#393e46;transition:.6s}.projects .container .head ul li button{background:none;border:none;color:#fff;font-size:16px;height:100%;width:100%}.projects .container .cards{width:100%;display:flex;flex-wrap:wrap;gap:30px;margin-right:20px;align-items:center;margin-bottom:50px}.projects .container .card{position:relative;width:300px;height:200px;transform-style:preserve-3d;transition:.6s;perspective:600px;background-color:#393e466c;display:flex;align-items:center;justify-content:center;border-radius:10px;margin-bottom:50px}.projects .container .card:hover{transform:rotateY(-180deg)}.projects .container .card .front,.projects .container .card .back{position:absolute;backface-visibility:hidden;width:100%;height:100%}.projects .container .card .front{width:240px;height:155px}.projects .container .card .back{display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotateY(180deg)}.projects .container .card .back p{font-size:25px;color:#20d779;margin-bottom:5px}.projects .container .card .back a{color:#eee;font-size:25px;transition:.5s}.projects .container .card .back a:hover{color:#20d779}.contact{height:calc(100% - 113px)}.contact .container{display:flex;align-items:center;justify-content:space-around;height:100%}.contact .container .right{position:relative}.contact .container .right h1{color:#fff;margin-bottom:15px;display:flex;justify-content:center;align-items:center}.contact .container .right h1 span{color:#20d779}.contact .container .right .img1{max-width:150px;margin-left:150px}.contact .container .right .img2{position:absolute;left:0;transform:rotate(-50deg);max-width:80px}.contact .container form label{display:block;color:#eee;margin-bottom:3px}.contact .container form .inputs input,textarea{background-color:#393e46cb;border:none;color:#fff;font-size:17px;padding:10px;border-radius:7px}.contact .container form input[type=submit]{background-color:#20d779;border:none;color:#fff;font-size:17px;padding:7px;border-radius:15px;cursor:pointer}textarea{height:160px;width:350px;display:block;margin-bottom:8px}form .inputs{display:flex}form .inputs .in{margin-right:17px}form .inputs input{margin-bottom:23px}.contact .container form .inputs input,textarea:focus{outline:none}.contact footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;height:50px}.contact footer a{color:#eeee;margin-right:20px;font-size:20px;transition:.6s}.contact footer a:hover{color:#20d779}@media (max-width: 1000px){.about .text .photoOne{position:absolute;bottom:420px}.about .text p{width:250px}.about .container .text{margin:0}.about .text .photoThree{display:none}.contact .container .right .img2{display:none!important}.contact .container .right .img1{margin:0!important}}@media (max-width: 767px){header .desktop{display:none}header .mobile{display:block}.home{margin:0}.home .container{flex-direction:column-reverse;justify-content:center;align-items:center;margin:0}.home .text{margin:0;position:relative;z-index:2222222222222;display:flex;flex-direction:column;align-items:center}.home .text h1{font-size:20px!important}.home .text img{display:none}.home .image{margin:0}.home .image .photo1,.home .image .photo2{max-width:150px}.about .container{flex-direction:column-reverse}.about .container .text{margin:10px;display:flex;flex-direction:column;align-items:center}.about .text p{width:200px;font-size:13px}.about .text h1{font-size:30px}.about .text img{display:none}.about .image .photoFive{max-width:150px}.about .image .photoFour{max-width:200px;display:none;left:-30px}.projects .container .card{width:180px}.projects .container .card .front{width:150px}.projects .container .head h1{color:#fff;display:flex;justify-content:center}.projects .container .head ul,.projects .container .cards{justify-content:center}.projects .container{margin-left:20px}.contact .container{flex-direction:column;justify-content:center}.contact .container .right img{display:none!important}.contact .container form .inputs{flex-direction:column}.contact .container form .inputs input{width:180px;border-radius:0}.contact .container form textarea{border-radius:0;width:180px;height:180px}}