@import "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Lato:wght@100&display=swap";
@keyframes gradient{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}*{margin:0;padding:0;list-style:none}* a{cursor:pointer;color:inherit;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;text-decoration:none}* button{color:inherit;-webkit-user-select:none;user-select:none;text-decoration:none}* h2{text-align:center;color:#e0e0e0;text-shadow:2px 2px 4px #000c;margin-bottom:5%;padding-top:7%;font-size:3rem}* ::selection{color:#f5f5f5;background:#8c00ff}html{background-color:#0a0a0a;background-image:linear-gradient(#1f1f1f 1px,#0000 1px),linear-gradient(90deg,#1f1f1f 1px,#0000 1px);background-size:40px 40px;width:100vw;height:100vh}html ::-webkit-scrollbar{width:0}html .webDev{width:100%;height:100vh}html .webDev .navbar{color:#f5f5f5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2;background-color:#1d1d1dcc;width:100%;height:5%;display:flex;position:fixed;top:0}html .webDev .navbar .logo{margin-left:8%;padding:.35%;font-family:Dancing Script,cursive;font-size:200%}html .webDev .navbar .barra{justify-content:center;align-items:center;margin-left:15%;display:flex}html .webDev .navbar .barra a{margin-left:25px;padding:14px 30px;font-size:20px;transition:color .4s,transform .3s}html .webDev .navbar .barra a:hover{color:#e81cff}html .webDev .navbar .icons{width:9%;margin:.5% 0 0 15%}html .webDev .navbar .icons a img{width:20%;height:70%;margin-left:13%}html .webDev .navbar .icons a img:first-child{height:75%}html .webDev .aboutMe{scroll-snap-align:center;scroll-snap-stop:normal;text-align:center;width:100%;height:100vh;position:relative}html .webDev .aboutMe .description{color:#fff;text-shadow:0 0 2px #fff,0 0 4px #fff,0 0 6px #000,0 0 8px #000;text-align:justify;width:60%;margin:auto;padding:5rem;font-size:27px}html .webDev .aboutMe h4{color:#fab6fa;text-shadow:0 0 2px #b8b8b8,0 0 4px #b8b8b8,0 0 6px #000,0 0 8px #000;margin-top:-40px;font-size:40px}html .webDev .skill{scroll-snap-align:center;scroll-snap-stop:normal;place-items:center;width:100%;height:100vh;position:relative}html .webDev .skill .skills .skillsContainer .categorySection .imageContainer{display:block}html .webDev .skill .skills .skillsContainer .skillsSelector button{margin:15%}html .webDev .project{scroll-snap-align:center;scroll-snap-stop:normal;width:100%;height:100vh;position:relative}html .webDev .project .gridCard{width:100%;max-width:1000px;margin:0 auto;padding-bottom:50px}html .webDev .project .gridCard .swiper-slide{opacity:.4;width:350px;height:500px;transition:all .3s}html .webDev .project .gridCard .swiper-slide.swiper-slide-active{opacity:1}html .webDev .project .gridCard .flip-card{perspective:1000px;background-color:#0000}html .webDev .project .gridCard .flip-card .flip-card-inner{text-align:center;width:100%;height:100%}html .webDev .project .gridCard .flip-card .flip-card-inner .flip-card-front{box-sizing:border-box;background:linear-gradient(#212121,#212121) padding-box padding-box,#141414 linear-gradient(145deg,#0000 35%,#e81cff,#40c9ff) border-box;border:2px solid #0000;border-radius:16px;flex-direction:column;width:100%;height:100%;animation:5s infinite gradient;display:flex;overflow:hidden}html .webDev .project .gridCard .flip-card .flip-card-inner .flip-card-front .profileMedia{background-color:#333338;border-bottom:1px solid #ffffff1a;width:100%;height:70%;position:relative}html .webDev .project .gridCard .flip-card .flip-card-inner .flip-card-front .name{color:#e81cff;justify-content:center;align-items:center;height:15%;font-size:26px;font-weight:700;display:flex}html .webDev .project .gridCard .flip-card .flip-card-inner .flip-card-front .tech{justify-content:center;align-items:center;gap:12px;height:15%;padding-bottom:5px;display:flex}html .webDev .project .gridCard .flip-card .flip-card-inner .flip-card-front .tech img{object-fit:contain;filter:drop-shadow(0 0 2px #ffffff80)}html .webDev .contact{scroll-snap-align:center;scroll-snap-stop:normal;width:100%;height:100vh;position:relative}html .webDev .contact .form-container{box-sizing:border-box;color:#fff;background-color:#0000;background-image:linear-gradient(#212121,#212121),linear-gradient(145deg,#0000 35%,#e81cff,#40c9ff);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:200% 100%;background-attachment:scroll,scroll;background-origin:padding-box,border-box;background-clip:padding-box,border-box;border:2px solid #0000;border-radius:16px;flex-direction:column;gap:20px;width:800px;margin:auto;padding:32px 24px;font-family:inherit;font-size:16px;animation:5s infinite gradient;display:flex}html .webDev .contact .form-container button:active{scale:.95}html .webDev .contact .form-container .form{flex-direction:column;gap:20px;display:flex}html .webDev .contact .form-container .form-group{flex-direction:column;gap:2px;display:flex}html .webDev .contact .form-container .form-group label{color:#717171;margin:7px 0 7px 10px;font-size:18px;font-weight:600;display:block}html .webDev .contact .form-container .form-group input{color:#fff;background-color:#0000;border:1px solid #414141;border-radius:8px;width:95%;padding:12px 16px;font-family:inherit;font-size:17px}html .webDev .contact .form-container .form-group textarea{resize:none;color:#fff;background-color:#0000;border:1px solid #414141;border-radius:8px;width:95%;height:96px;padding:12px 16px;font-family:inherit;font-size:17px}html .webDev .contact .form-container .form-group input::placeholder{opacity:.5}html .webDev .contact .form-container .form-group input:focus,html .webDev .contact .form-container .form-group textarea:focus{border-color:#e81cff;outline:none}html .webDev .contact .form-container .form-submit-btn{color:#717171;width:40%;font-family:inherit;font-weight:600;font-size:inherit;cursor:pointer;background:#313131;border:1px solid #414141;border-radius:6px;justify-content:center;align-self:flex-end;gap:8px;margin-top:8px;padding:12px 16px;display:flex}html .webDev .contact .form-container .form-submit-btn:hover{background-color:#474747;border-color:#942fa1}html .webDev .footer{color:#f5f5f5;background-color:#141414cc;height:70px}html .webDev .footer h5{text-align:center;padding-top:20px;font-size:27px}html .webDev .footer h5 a{color:#b3b3b3;transition:color .6s,filter .6s}html .webDev .footer h5 a:hover{color:#ffffffe6}