*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif;color:#fff}body{background-image:url(/portfolio-rafael/background.jpg);background-size:cover;background-position:center}.header{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 3rem;background:#000;color:#f8fafc;box-shadow:0 2px 12px #0003}.logo a{font-size:1.8rem;font-weight:700;text-decoration:none;color:#38bdf8;transition:color .3s ease}.logo a:hover{color:#7dd3fc}.nav-links ul{display:flex;gap:2rem;list-style:none;margin:0;padding:0}.nav-links a{text-decoration:none;color:#f1f5f9;font-size:1rem;position:relative;transition:color .3s ease}.menu-toggle{z-index:10;display:block;border:none;background-color:transparent;font-size:30px}.nav-links a:after{content:"";display:block;height:2px;background:#38bdf8;width:0%;transition:width .5s ease;position:absolute;bottom:-4px;left:0}.nav-links a:hover{color:#7dd3fc}.nav-links a:hover:after{width:100%}@media (max-width: 500px){.header{display:flex;justify-content:center;align-items:flex-start}.header .menu-toggle{position:relative;display:flex;z-index:999;left:30%;top:20%}.header .menu-toggle .icon{display:flex}.header .nav-links{padding-top:1rem;position:fixed;background-color:#000000ea;width:100%;height:100%;transform:translate(100%);transition:transform .9s ease-in-out;z-index:888}.header .nav-links ul{align-items:center;flex-direction:column;gap:3rem}.header .nav-links ul a{font-size:20px}.mobile .nav-links{position:fixed;background-color:#000000ea;width:100%;height:100%;transform:translate(0);z-index:888}.mobile .nav-links ul{align-items:center;flex-direction:column;gap:3rem}.mobile .nav-links ul a{font-size:20px}}.abautMe{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;width:100%}.abautMe .description{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:12px;padding:2rem;background-color:#0000009f;color:#f1f5f9;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 4px 12px #0006;width:1000px;gap:1rem}.abautMe p{text-align:justify}@media (max-width: 500px){.abautMe{margin-top:1rem;padding:.5rem}.abautMe .description{width:100%;padding:.5rem}}.skills{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}.skills .firstCard,.skills .secondCard{flex-direction:column;justify-content:center;align-items:center;border-radius:12px;padding:2rem;background-color:#0000009f;color:#f1f5f9;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 4px 12px #0006;display:flex;flex-direction:row;gap:6rem;max-width:1000px}.skills .firstCard .category,.skills .secondCard .category{display:flex;flex-direction:column}.skills .firstCard .category h2,.skills .secondCard .category h2{margin-bottom:12px}.skills .firstCard .category .cards,.skills .secondCard .category .cards{display:flex;justify-content:center;gap:3rem}.skills .firstCard .category .cards img,.skills .secondCard .category .cards img{width:48px}@media screen and (max-width: 768px){.skills{margin-top:1rem;padding:.5rem}.skills .firstCard,.skills .secondCard{flex-direction:column;align-items:center;max-width:100%;gap:2rem}.skills .firstCard .category,.skills .secondCard .category{width:100%;text-align:center}.skills .firstCard .category h2,.skills .secondCard .category h2{font-size:20px}.skills .firstCard .category .cards,.skills .secondCard .category .cards{flex-wrap:wrap;justify-content:center}.skills .firstCard .category .cards h3,.skills .secondCard .category .cards h3{font-size:18px}}.projects{width:100%;display:flex;flex-direction:column;align-items:center;padding:2rem 0rem}.projects .frontEndMentor,.projects .tests{width:1000px;display:flex;flex-direction:column}.projects .frontEndMentor p,.projects .tests p{text-align:justify}.projects .frontEndMentor .description,.projects .tests .description{display:flex;flex-direction:column;gap:1rem}.projects .frontEndMentor .carousel,.projects .tests .carousel{display:flex;align-items:center;gap:2rem}.projects .frontEndMentor .carousel .chevronLeft,.projects .frontEndMentor .carousel .chevronRight,.projects .tests .carousel .chevronLeft,.projects .tests .carousel .chevronRight{font-size:40px;fill:#38bdf8;transition:transform .3s ease,filter .3s ease;cursor:pointer}.projects .frontEndMentor .carousel .chevronLeft:hover,.projects .frontEndMentor .carousel .chevronRight:hover,.projects .tests .carousel .chevronLeft:hover,.projects .tests .carousel .chevronRight:hover{transform:scale(1.2)}.projects .frontEndMentor .cardsFrontEndMentor,.projects .tests .cardsFrontEndMentor{width:100%;padding:5rem;overflow-x:auto;display:flex;align-items:center;gap:2rem}.projects .frontEndMentor .cardsFrontEndMentor::-webkit-scrollbar,.projects .tests .cardsFrontEndMentor::-webkit-scrollbar{display:none}.projects .frontEndMentor .cardContainer,.projects .tests .cardContainer{display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .3s ease}.projects .frontEndMentor .cardContainer .card,.projects .tests .cardContainer .card{width:550px;height:550px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 50px #000;background-color:#0000009f}.projects .frontEndMentor .cardContainer:hover,.projects .tests .cardContainer:hover{transform:scale(1.05)}.projects .frontEndMentor .cardContainer img,.projects .tests .cardContainer img{width:500px;border-radius:.5rem}.projects .frontEndMentor .cardContainer .links,.projects .tests .cardContainer .links{margin-top:16px;display:flex;gap:1rem}.projects .frontEndMentor .cardContainer .links button,.projects .tests .cardContainer .links button{display:flex;align-items:center;justify-content:center;gap:7px;background-color:#0000009f;border:none;box-shadow:9px 4px 15px 1px #000000a8;border-radius:25px;padding:4px;width:170px}.projects .frontEndMentor .cardContainer .links button a,.projects .tests .cardContainer .links button a{font-size:16px;font-weight:700;text-decoration:none}.projects .frontEndMentor .cardContainer .links button .icon,.projects .tests .cardContainer .links button .icon{font-size:17px}.projects .frontEndMentor .cardContainer .links button:hover .icon,.projects .tests .cardContainer .links button:hover .icon{cursor:pointer;fill:#7dd3fc}@media screen and (max-width: 500px){.projects{margin-top:1rem;padding:.5rem}.projects .frontEndMentor,.projects .tests{width:100%}.projects .frontEndMentor .description,.projects .tests .description{padding:.5rem}.projects .frontEndMentor .carousel,.projects .tests .carousel{margin-top:2rem}.projects .frontEndMentor .carousel .chevronLeft,.projects .frontEndMentor .carousel .chevronRight,.projects .tests .carousel .chevronLeft,.projects .tests .carousel .chevronRight{display:none}.projects .frontEndMentor .carousel .cardsFrontEndMentor,.projects .tests .carousel .cardsFrontEndMentor{flex-direction:column;padding:0rem;gap:4rem;overflow:hidden}.projects .frontEndMentor .carousel .cardsFrontEndMentor .cardContainer,.projects .tests .carousel .cardsFrontEndMentor .cardContainer{transition:none}.projects .frontEndMentor .carousel .cardsFrontEndMentor .cardContainer:hover,.projects .tests .carousel .cardsFrontEndMentor .cardContainer:hover{transform:none}.projects .frontEndMentor .carousel .cardsFrontEndMentor .card,.projects .tests .carousel .cardsFrontEndMentor .card{width:100%;height:100%}.projects .frontEndMentor .carousel .cardsFrontEndMentor .card .imagesMobile,.projects .tests .carousel .cardsFrontEndMentor .card .imagesMobile{display:flex;justify-content:center;align-items:center;padding:.5rem}.projects .frontEndMentor .carousel .cardsFrontEndMentor .card .imagesMobile img,.projects .tests .carousel .cardsFrontEndMentor .card .imagesMobile img{width:200px;border-radius:5px}.projects .frontEndMentor .carousel .cardsFrontEndMentor .links,.projects .tests .carousel .cardsFrontEndMentor .links{gap:0;padding:10px}.projects .tests{margin-top:3rem}.projects .tests .cardContainer{margin-top:2rem;transition:none}.projects .tests .cardContainer:hover{transform:none}.projects .tests .cardContainer .card{width:100%;height:100%}.projects .tests .cardContainer .card .imagesMobile{display:flex;justify-content:center;align-items:center;padding:.5rem}.projects .tests .cardContainer .card .imagesMobile img{width:200px;border-radius:5px}}.container{display:flex;justify-content:center}.container .home{display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:900px;max-width:1000px;overflow-x:hidden;gap:2rem}.container .home .home-description{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:12px;padding:2rem;background-color:#0000009f;color:#f1f5f9;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 4px 12px #0006;width:100%}.container .home .home-description h1{font-size:60px}.container .home .home-description p{font-size:20px;text-align:center}.container .home .home-network{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:12px;padding:2rem;color:#f1f5f9;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 4px 12px #0006;background-color:#0000009f}.container .home .home-network a{display:inline-block;line-height:0}.container .home .home-network .home-icons{display:flex;gap:1rem}.container .home .home-network .home-icons .github{filter:brightness(0) invert(1)}.container .home .home-network .home-icons img{width:40px}@media screen and (max-width: 500px){.container{padding:.5rem}.container .home .home-description,.container .home-network{width:100%}.container .home .home-description h1,.container .home-network h1{font-size:23px}.container .home .home-description p,.container .home-network p{font-size:16px;text-align:justify;margin-top:1rem}.container .home .home-description .home-icons,.container .home-network .home-icons{margin-top:1rem}}.footer{display:flex;justify-content:center;align-items:center;padding:1.2rem 3rem;background:#000;color:#f8fafc;box-shadow:0 2px 12px #0003}.footer a{text-decoration:none;color:#38bdf8;transition:color .3s ease}.footer a:hover{color:#7dd3fc}html,body,#root,.app-container{height:100vh;width:100%;margin:0;padding:0;overflow-x:hidden}.app-container{display:flex;flex-direction:column}.main-content{flex:1;display:flex;flex-direction:column;justify-content:center}