@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Poppins,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html{scroll-behavior:smooth}.App{text-align:center}.dark{background:#01000d;color:#fff}.light{background:#fff;color:#000}.header_header__XS9aB{align-items:center;-webkit-animation:header_gradient__-TwE2 15s ease infinite;animation:header_gradient__-TwE2 15s ease infinite;background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;display:flex;flex-direction:column;height:100vh;justify-content:center;width:100vw}@-webkit-keyframes header_gradient__-TwE2{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes header_gradient__-TwE2{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}header:before{-webkit-animation:header_rain__kVcss .19s ease-in infinite;animation:header_rain__kVcss .19s ease-in infinite;background-image:url(http://pngimg.com/uploads/rain/rain_PNG13468.png);content:"";height:100%;left:0;position:absolute;top:0;width:100%}@-webkit-keyframes header_rain__kVcss{0%{background-position:10 0}to{background-position:20% 80%}}@keyframes header_rain__kVcss{0%{background-position:10 0}to{background-position:20% 80%}}.header_footer__NpE36{background:rgba(32,32,33,.9);color:#fff;padding:1rem;text-align:center}.header_footer_image__bJnqh{align-items:center;display:flex;justify-content:center;margin-top:2rem}.header_footer_image__bJnqh>div{margin:0 1rem}.header_footer_image__bJnqh>div>img{max-height:13vh;max-width:13vw}.header_footer_maindiv__CFDGJ{display:flex;justify-content:center}.header_footer_maindiv__CFDGJ>div{background-color:none;border:none;margin:10px;transition:width height 2s 2s}.header_footer_maindiv__CFDGJ>div :hover{fill:#3737a9;height:60px;width:60px}.header_sub_header__hWzHk>h1{font-size:4.5rem;text-shadow:6px 4px 6px rgba(0,0,0,.6)}.header_sub_header__hWzHk>p{font-size:1.5rem;text-shadow:6px 4px 6px rgba(0,0,0,.6)}.header_sub_header__hWzHk>button{box-shadow:0 10px 36px 0 rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.06);font-size:1.5rem;margin:2rem;padding:1rem 2rem}.header_sub_header__hWzHk>div>a{margin:.5rem}.header_sub_header__hWzHk>div{padding:1.5rem}.header_sub_header__hWzHk>div>a>svg:hover{fill:#151bd6}ul.topnav{background:#020024;color:#fff;list-style-type:none;margin:0;overflow:hidden;padding:1rem}ul.topnav li{float:left}ul.topnav li a{padding:14px 16px}ul.topnav li a,ul.topnav li button{color:#fff;display:block;font-size:1.5rem;text-align:center;text-decoration:none}ul.topnav li button{background-color:#01000d;border:none;padding:12px 14px}ul.topnav li a:hover:not(.active){background-color:#111}ul.topnav li a.active{background-color:#2baa04}ul.topnav li.right{float:right}@media screen and (max-width:600px){ul.topnav li,ul.topnav li.right{float:none}ul.topnav li button{margin:auto}}.card{box-shadow:5px 5px 5px 0 #000,inset 4px 4px 15px 0 #000,5px 5px 15px 5px transparent,5px 5px 15px 5px rgba(241,255,235,0);transition-duration:.5s;transition-property:box-shadow,-webkit-transform;transition-property:box-shadow,transform;transition-property:box-shadow,transform,-webkit-transform;transition-timing-function:ease-in-out}.card:hover{box-shadow:0 2px 4px rgba(0,0,0,.4),0 7px 13px -3px rgba(0,0,0,.3),inset 0 -3px 0 rgba(0,0,0,.2);-webkit-transform:translateY(-30px);transform:translateY(-30px)}@-webkit-keyframes color{0%{background:#aee3e3}20%{background:#99d49a}40%{background:#d1dc8f}60%{background:#d59c76ac}80%{background:#635fa6}to{background:#da7acddf}}@keyframes color{0%{background:#aee3e3}20%{background:#99d49a}40%{background:#d1dc8f}60%{background:#d59c76ac}80%{background:#635fa6}to{background:#da7acddf}}.card{-webkit-animation:color 9s linear infinite;animation:color 9s linear infinite;text-align:center}.card>img{height:12rem}.card>a:hover{background-color:#bfd626}.box{margin:auto;padding:1rem 0;width:80%}.box,.box>div{display:flex;justify-content:center}.box>div{align-items:center;background:linear-gradient(145deg,#e6e6e6,#e1d7d7);border-radius:50px;box-shadow:0 54px 55px rgba(0,0,0,.25),0 -12px 30px rgba(0,0,0,.12),0 4px 6px rgba(0,0,0,.12),0 12px 13px rgba(0,0,0,.17),0 -3px 5px rgba(0,0,0,.09);flex-wrap:wrap;height:100px;margin:15px;padding:1rem;transition:width 2s,height 2s;transition:width 1s,height 1s;width:100px}.box>div:hover{border-radius:60px;box-shadow:0 0 0 2px rgba(6,24,44,.4),0 4px 6px -1px rgba(6,24,44,.65),inset 0 1px 0 hsla(0,0%,100%,.08);height:130px;width:130px}.container>button{border:none;bottom:20px;box-shadow:none;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px;position:relative;right:25px;width:100px}.container>button span{background:#0a0a0a;background:linear-gradient(0deg,#0d0f11,rgrgb(53,55,57) 0);border-radius:5px;box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);box-sizing:border-box;color:#fff;display:block;height:40px;margin:0;position:absolute;text-align:center;transition:all .3s;width:130px}.container>button span:first-child{box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.container>button span:nth-child(2){-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.container>button:hover span:first-child{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}.container>button:hover span:first-child,.container>button:hover span:nth-child(2){box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1)}.container>button:hover span:nth-child(2){color:transparent;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg)}.profile>div>h1{font-size:3rem}.profile>div>div>p{font-size:1.2rem}.profile>div>button>a{font-size:1.5rem}.profile>div>button>a:hover{box-shadow:5px 5px 5px 0 #000,inset 4px 4px 15px 0 #000,5px 5px 15px 5px transparent,5px 5px 15px 5px rgba(241,255,235,0)}@media (max-width:1000px) and (min-width:450px){.box{display:grid;grid-template-columns:repeat(4,1fr)}}@media (max-width:449px) and (min-width:300px){.box{display:grid;grid-template-columns:repeat(3,1fr)}}@media (max-width:299px) and (min-width:100px){.box{display:grid;grid-template-columns:repeat(2,1fr)}}
/*# sourceMappingURL=main.f07a02de.css.map*/