:root{--space-base: 1rem;--body-bg-color: rgba(0, 0, 0, .99);--base-color: #f5f5f5}*:before,*:after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased;background:var(--body-bg-color);color:var(--base-color);font-family:Poppins,sans-serif}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}.App{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;overflow-x:hidden}.Main{width:90vw;border-radius:15px;height:90vh;padding:0;margin:0;display:flex;gap:20px}p{font-size:clamp(.5rem,1vw,.6rem)}main p,main li{font-size:clamp(.7rem,1vw,1rem)}main h1{font-size:clamp(1.2rem,1.5vw,2.2rem);font-weight:700}main h2{font-size:clamp(1rem,1.4vw,1.5rem)}aside{flex:.2;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 8px #ffffff0d;background:#ffffff05;padding:3rem 2rem;border-radius:15px;min-width:200px;display:flex;flex-direction:column;justify-content:space-between}main{flex:.8;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 8px #ffffff0d;background:#ffffff05;border-radius:15px}aside .profile-card img{width:clamp(100px,15vw,200px);height:clamp(100px,15vw,200px);border-radius:50%;object-fit:cover}.profile-card{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;gap:20px}.profile-card h2{font-size:clamp(1rem,1.5vw,2rem);font-weight:700}.profile-card h4{font-size:clamp(.7rem,1.1vw,1.6rem);font-style:italic;font-weight:lighter}.profile-name{text-align:center}.divider-line{max-width:200px;width:70%;border:0;border-top:1.5px solid rgba(66,66,66,.3);margin:10px auto}.profile-details{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;gap:25px;padding-left:15px;margin:20px auto}.profile-details h5{font-size:clamp(.6rem,1vw,1.5rem);font-weight:400}.profile-details img{width:clamp(25px,3vw,35px);height:clamp(25px,3vw,35px)}.profile-details .email,.profile-details .phone,.profile-details .address,.profile-details .birthdate{display:flex;gap:10px;width:100%;max-width:200px;height:auto;word-break:break-all;align-items:center}.profile-socials{width:100%;justify-content:center;align-items:center;display:flex;gap:15px}.profile-socials img{width:clamp(25px,3vw,35px);height:clamp(25px,3vw,35px);filter:invert(1)}main nav ul{list-style-type:none;padding:0;display:flex;justify-content:center}main nav ul li a{text-decoration:none;padding:15px;display:block;color:#fff;background:#131313;box-shadow:2px 2px 6px #0000004d;transition:all .3s ease}main nav ul li:first-child a{border-bottom-left-radius:10px}main nav ul li:last-child a{border-bottom-right-radius:10px}main nav ul li a:hover{background:#131313;color:#ff7300;text-shadow:0 0 6px rgba(255,115,0,.5),0 0 10px rgba(255,115,0,.4);box-shadow:4px 4px 10px #0006}main nav ul li a.active{color:#ff7300;text-shadow:0 0 6px rgba(255,115,0,.5),0 0 10px rgba(255,115,0,.4);box-shadow:4px 4px 10px #0006}.page-container{padding:20px 40px;display:flex;flex-direction:column;gap:25px;overflow-y:auto}.header-line{max-width:30px;width:50%;border:0;border-top:2px solid #ff7300;box-shadow:0 0 5px #f60c}.main-scroll{width:100%;height:90%;overflow:auto}.main-scroll::-webkit-scrollbar{width:1.5px}.main-scroll::-webkit-scrollbar-track{background:#0a0a0a;border-radius:5px}.main-scroll::-webkit-scrollbar-thumb{background:#ff7300;border-radius:5px;box-shadow:0 0 2px #ff7300b3;transition:all .3s ease}.main-scroll::-webkit-scrollbar-thumb:hover{box-shadow:0 0 5px 2px #ff7300b3}.nav-container nav ul li button.active{color:#ff7300;text-shadow:0 0 6px rgba(255,115,0,.5),0 0 10px rgba(255,115,0,.4)}.nav-container nav ul li button{background:none;color:inherit;padding:10px;border:none;cursor:pointer}.nav-container nav ul{gap:15px}.fade-in-section{opacity:0;transform:translateY(50px);transition:opacity .8s ease-out,transform .8s ease-out}.fade-in-section.visible{opacity:1;transform:translateY(0)}@media (max-width: 900px){.Main{flex-direction:column}}@media (max-width: 900px) and (max-height: 660px){aside{overflow:none}}@media (max-width: 300px){aside{min-width:0}}@media (min-width: 900px) and (max-height: 750px){aside{overflow-x:auto}}@media (max-width: 500px){main nav ul li a{padding:10px}}@media (max-width: 340px){main nav ul li a{padding:5px;font-size:8px}}
