@import"https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap";:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#fff;background-color:#1d1f24}body{margin:0;padding:0}#root{margin:0;padding:o}*{margin:0;padding:o;scroll-behavior:smooth}.divs{height:400px;display:block;margin:10px;padding:10px;background:orchid;border-radius:8px;box-shadow:0 4px 8px #0000001a}@media only screen and (max-width: 820px){.menuBtn{height:30px;width:30px;position:absolute;right:20px;top:10px;z-index:101}.menuBtn>span{background-color:#0f9;border-radius:1px;height:2px;width:100%;position:absolute;left:50%;top:50%;margin:-1px 0 0 -15px;transition:height .1s}.menuBtn>span:after,.menuBtn>span:before{content:"";background-color:#0f9;border-radius:1px;height:2px;width:100%;position:absolute;left:50%;margin-left:-15px;transition:all .2s}.menuBtn>span:after{top:-7px}.menuBtn>span:before{bottom:-7px}.menuBtn.act>span{height:0}.menuBtn.act>span:after,.menuBtn.act>span:before{background-color:#087;top:1px}.menuBtn.act>span:after{transform:rotate(45deg)}.menuBtn.act>span:before{transform:rotate(-45deg)}.mainMenu{background-color:#2a2d33;position:absolute;left:0;top:0;z-index:100;height:100%;width:100%;display:table;text-align:center;opacity:0;transition:all .5s cubic-bezier(.68,-.55,.265,1.55);transform:scale(0)}.mainMenu.act{opacity:1;transform:scale(1)}.mainMenu.act ul li{opacity:1;transform:translate(0)}.mainMenu ul{display:table-cell;vertical-align:middle;list-style-type:none}.mainMenu li{padding:8px 0;transition:all .4s .51s;opacity:0}.mainMenu li:nth-child(odd){transform:translate(30%)}.mainMenu li:nth-child(2n){transform:translate(-30%)}.mainMenu li:last-child{transform:none}.mainMenu a{color:#19b698;display:inline-block;font-size:18px;text-decoration:none}.mainMenu a.suBtn{color:#fff}.suBtn{background-color:#19b698;border-radius:5px;padding:10px 20px}}@media only screen and (min-width: 820px){.menuBtn{display:none}.mainMenu{display:flex;position:relative;opacity:1;transform:none}.mainMenu ul{display:flex;justify-content:center}.mainMenu li{padding:0 20px;transform:none;opacity:1}}.dev{font-family:Poppins,sans-serif;align-self:flex-start;font-size:50px;color:#fff;letter-spacing:2px}.header{width:80%;max-width:1212px;margin:auto}.header a{text-decoration:none}@media only screen and (min-width: 820px){.header{justify-content:space-between;display:flex}.header .suBtn{min-width:90px;display:inline-flex}.header div.logo{width:180px;flex-shrink:0}.header ul{line-height:70px}.header li{list-style:none;display:inline-block;margin-right:2px}.header a{color:#fff;text-decoration:none}}.dev:after{position:relative;right:5px;content:".";font-size:smaller;color:#0f9}.name{position:relative;top:-20px;display:block;font-family:Poppins,sans-serif;font-size:20px;font-weight:700;color:#fff;letter-spacing:1px}main{overflow:hidden}.main-page{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:40px;width:65%;margin:auto;background-color:#1d1f24}.main-decor{width:100%;direction:rtl}.main-decor div{width:30vw;display:inline-block}.main-decor p:after{content:"";border:#00ff99 15px solid;width:0px;height:0px;display:block;position:relative;top:-30px;left:30px;border-radius:50%;box-shadow:0 0 15px #00ff9980}.main-decor p{width:100px;display:inline-block;height:100px;border-radius:50%;position:relative;border:7px solid #00ff99;box-shadow:0 0 8px 7px #00ff9980}.image-container{position:relative;display:inline-block}.circular-image{width:400px;height:400px;border-radius:50%;object-fit:cover}.small-circle{width:100px;height:100px;border-radius:50%;position:absolute;top:20px;left:-130px;border:7px solid #00ff99;box-shadow:0 0 8px 7px #00ff9980}.main-page-header{width:390px;font-size:42px;font-family:Plus Jakarta Sans,sans-serif;font-weight:600}@media only screen and (max-width: 820px){.main-page-header{width:95%;padding-bottom:10px;font-size:7vw}.main-decor{top:-24vw;right:-60px;position:relative}.main-decor p{width:15vw;height:15vw}.main-page{flex-direction:column-reverse}.circular-image{width:60vw;height:60vw}.small-circle{width:10vw;height:10vw;border-radius:50%;position:absolute;top:1vw;left:-9vw}}.hidden{opacity:0;transform:translate(80px);transition:opacity .8s ease-out,transform .8s ease-out}.visible{opacity:1;transform:translate(0)}.containerbox{overflow:hidden}.box{border:#00ff99 1.5px solid;padding:20px;margin:20px 0;border-radius:8px;box-shadow:0 4px 8px #0000001a}
