:root{--corBody: #ffffff}*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}html{scroll-behavior:smooth}body{min-height:100svh;background-color:var(--corBody)}#root{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}:root{--corNavBar: #6d9ada}nav{width:100%;background-color:var(--corNavBar)}nav a{text-decoration:none}nav a:active,nav a:visited,nav a{color:#fff}nav ul{display:flex;width:100%;align-items:center;justify-content:right;list-style:none;gap:1em;padding:.4em 1em .4em .2em}nav ul li{font-size:1.2rem;color:#bababa;transition:transform .3s ease;cursor:pointer}nav ul li:hover{transform:scale(1.05);color:#fff}@media screen and (width < 700px){nav{display:none}}#menu{position:fixed;right:0;top:0;height:100svh;width:0;background-color:#69a5f9;overflow:hidden;transition:width .2s;z-index:2}#xButton{background-image:url(../img/x.png);width:45px;height:45px;background-position:center center;background-size:cover;position:absolute;right:1em;top:1em}#menu.showMenu{width:100svw}#menu:not(.showMenu) #xButton{display:none}#menu ul{margin-top:120px}#menu ul li{width:100%;height:5em;border:8px solid #599dfc;display:flex;align-items:center;justify-content:center}#menu ul li a{color:#fff;font-size:2.1rem;font-weight:700;text-decoration:none}:root{--corHeader: #76acf7;--colorFont: white}header{width:100%;background-color:var(--corHeader);height:max-content;display:grid;grid-template-rows:1fr 2.2em;align-items:center;justify-items:center;gap:1em}.titulos{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1em 0}header h1{text-align:center;color:var(--colorFont);margin:.3em;padding:.3em .2em;font-size:4rem;border-radius:8px;text-shadow:2px 2px 2px rgba(0,0,0,.433)}header h2{text-align:center;color:var(--colorFont);padding:.3em .2em;border-radius:8px;text-shadow:2px 2px 2px rgba(0,0,0,.433);font-size:2.5rem}#menuButton{display:none;position:absolute;background-image:url(../img/menu.png);width:45px;height:45px;top:1em;right:1em;background-size:cover;background-position:center center;z-index:1}@media screen and (width < 700px){header{padding-top:10px;grid-template-rows:1fr}#menuButton{display:block}}:root{--corFooter: #76acf7}footer{background-color:var(--corFooter);width:100%;display:flex;justify-content:center;flex-wrap:wrap;padding:1.5em;gap:5em;text-align:center}footer h2{color:#fff;font-size:1.8rem}footer a{color:#fff;text-decoration:none;transition:transform .3s ease}footer a:before{content:"🔗 "}footer a:hover{transform:scale(1.05)}footer div{display:grid;grid-template-rows:max-content 1fr;gap:.5em}@media screen and (width < 700px){footer{display:flex;flex-direction:column;gap:1.5em;padding:2em 0}footer h2{font-size:1.7rem}footer a{font-size:1.3rem}}:root{--corMain: #f9f9f9}main{margin:1em;background-color:var(--corMain);border-radius:20px;padding:2em;box-shadow:8px 8px 8px #00000014;color:#000;display:flex;align-items:center;justify-content:center;gap:2em;flex-direction:column;max-width:1200px}main>div{display:flex;gap:1em;flex-direction:column;width:100%}main div h2{text-align:left;font-size:1.7rem}main>div>p,main>div>ul{text-indent:2rem;margin-left:1em;font-size:1.3rem}main ul{list-style-position:inside;display:flex;flex-direction:column;gap:.8em}#projetos{display:flex;flex-direction:column;gap:3em}#projetos>section{display:flex;align-items:center;justify-content:center;gap:1em;flex-wrap:wrap}#projetos>section>div{display:grid;width:100%;grid-template-columns:repeat(auto-fit,minmax(200px,250px));gap:1em;padding:0 1em}#projetos section>h3{font-size:1.8rem;text-align:center}@media screen and (width < 750px){main{margin:0;border-radius:0}}@media screen and (width < 820px){#projetos>section>div{justify-content:center}}div.projeto{width:100%;max-width:300px;display:grid;grid-template-rows:max-content 1fr;align-items:center;justify-content:center;background-color:#d4dfee;padding:1em;border-radius:12px;gap:1em;transition:transform,.3s ease;cursor:pointer;color:#424242;box-shadow:4px 4px 4px #0000002e;height:100%}div.projeto:hover{transform:scale(1.05);box-shadow:7px 7px 7px #0000002e}div.projeto img{border-radius:8px;max-width:100%}div.projeto h3{text-align:center;font-size:2rem}@media screen and (width < 700px){.projeto{flex-direction:column!important;width:100%}.projeto>div,.projeto>img{width:100%!important}div.projeto:hover{transform:scale(1);box-shadow:4px 4px 4px #0000002e}}