nav{flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:900px;margin:50px auto;padding:0 15px;display:flex}nav>h1{text-transform:uppercase;vertical-align:middle;color:#303030;margin-bottom:5px;font-size:24px;font-weight:900}nav>h1>span{color:var(--theme)}nav>p{text-align:center;color:#666;max-width:400px;font-size:14px}@media (max-width:768px){nav{margin:30px auto}nav>h1{font-size:20px}nav>p{font-size:12px}}
main{flex-direction:column;gap:15px;width:100%;max-width:900px;margin-inline:auto;display:flex}main button{color:#fff;background-color:#222;border:none;border-radius:8px;justify-content:center;align-items:center;gap:10px;width:fit-content;padding:10px 15px;font-size:14px;display:flex}main button svg{width:16px;height:auto;color:var(--theme)}main button>svg.loading{animation:2s linear infinite loading}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}main>form,main>section{background-color:#303030;border:1px solid #ddd;border-radius:15px;flex-direction:column;gap:10px;width:100%;padding:15px;display:flex;box-shadow:0 4px 12px #0000001a}main>form>textarea{resize:none;color:#fff;background-color:#222;border:none;border-radius:8px;width:100%;height:100px;padding:15px;font-size:14px}main>form>span{width:100%;color:var(--theme);background-color:#222;border-radius:8px;padding:10px 15px;font-size:14px;font-weight:500}@media (max-width:768px){main button svg{width:14px}main button,main>form>textarea,main>form>span{font-size:12px}}
div.grid{gap:70px;width:100%;max-width:900px;margin:50px auto;display:grid}div.grid>div{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}div.grid>div>svg{color:#000;background-color:var(--theme);border-radius:10px;width:50px;height:auto;padding:15px}div.grid>div>h3{text-transform:uppercase;text-align:center;color:#303030;font-size:18px;font-weight:700}div.grid>div>p{text-align:center;color:#303030;font-size:14px}@media (max-width:768px){div.grid{gap:0}div.grid>div{padding:15px 10px}div.grid>div>svg{width:50px}div.grid>div>h3{font-size:14px}div.grid>div>p{font-size:12px}}
footer{flex-direction:column;justify-content:center;align-items:center;gap:15px;width:100%;max-width:900px;margin:30px auto;display:flex}footer>div{flex-wrap:wrap;gap:15px;display:flex}footer>div>a{color:#303030;font-size:14px}footer>div>a:hover{text-decoration:underline}footer>small{text-align:center;color:#888;max-width:400px;font-size:12px}@media (max-width:768px){footer{gap:10px}footer>div{justify-content:center;gap:10px}footer>div>a{font-size:12px}footer>small{font-size:10px}}