/* VORNE - Pixel/Voxel Style */
:root {
    --gray-200: #0d0d13;
    --beige-600: #f2edea;
    --beige-500: #d8c8bb;
    --text-color: #313132;
    --negative-text-color: #ececec;
    --primary-brown: #8b4513;
    --primary-darker: #654321;
    --blue-600: #3997f7;
    --blue-100: #144059;
    --title-font: 'Press Start 2P', monospace;
    --body-font: 'VT323', monospace;
    --main-width: 960px;
    --navbar-height: 3em;
    --footer-height: 4em;
}
html,body,p,ul,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0}
*{box-sizing:border-box}
body{font-family:var(--body-font);font-size:24px;line-height:1.4;color:var(--text-color);display:flex;flex-direction:column;align-items:center;width:var(--main-width);max-width:100vw;margin:auto;background:var(--beige-600);min-height:100vh}
@media (min-width:961px){body{background:fixed center/cover no-repeat;background-image:linear-gradient(to bottom,rgba(242,237,234,.3),rgba(242,237,234,.5)),url('../img/bg_main.jpg')}}
h1,h2,h3,h4,h5,h6{font-family:var(--title-font);font-weight:400;line-height:1.6;margin:1.5rem 0 .8rem}
h1{font-size:2rem;margin-top:0}
h2{font-size:1.5rem}
h3{font-size:1.2rem}
main{min-height:calc(100vh - 7em);width:100%;padding:2em 1em;background:var(--beige-600)}
nav{display:flex;justify-content:space-between;align-items:center;background:var(--gray-200);width:100%;height:var(--navbar-height)}
.navbar-section{display:flex;flex-grow:1;height:100%;margin:0 1em}
.navbar-section a{display:flex;align-items:center;margin:.25em .75em 0 1em;color:var(--negative-text-color);text-decoration:none;transition:.2s}
.navbar-section a:hover{text-decoration:underline;color:var(--primary-brown)}
.navbar-logo{justify-content:flex-start;align-items:center}
.navbar-content{justify-content:flex-end;align-items:center}
.navbar-hamburger{display:none;cursor:pointer;font-size:1.5em;color:var(--negative-text-color)}
.navbar-section svg{width:1.3em;height:45%}
.navbar-section span{margin:.3em 0 0;font-size:.75em}
.hero-section{padding:4em 2em;text-align:center;margin-bottom:2em;background:linear-gradient(135deg,rgba(139,69,19,.15),rgba(101,67,33,.1));border:4px solid var(--primary-brown);box-shadow:8px 8px 0 rgba(0,0,0,.2)}
.hero-title{font-size:2rem;margin-bottom:.5em;color:var(--primary-brown);text-shadow:4px 4px 0 rgba(0,0,0,.3);line-height:1.6}
.hero-subtitle{font-size:1.3rem;line-height:1.4}
.features-section{padding:2em 0;margin-bottom:3em}
.features-grid-text{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5em}
.feature-item{background:#fff;padding:1.5em;border:3px solid var(--primary-brown);box-shadow:6px 6px 0 rgba(0,0,0,.15);transition:.2s;font-size:1.1rem;line-height:1.4}
.feature-item:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(139,69,19,.4)}
.gallery{display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:1em;margin:3.5em 0 1em}
.gallery img{box-shadow:6px 6px 0 rgba(0,0,0,.2);width:400px;height:225px;object-fit:cover;border:3px solid var(--beige-500);transition:.2s}
.gallery img:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 rgba(139,69,19,.4);border-color:var(--primary-brown)}
.cta-buttons{display:flex;gap:1.5em;margin:2em 0;justify-content:center;flex-wrap:wrap}
.button{display:inline-block;padding:1em 2em;font-family:var(--title-font);font-size:.8rem;text-transform:uppercase;border:3px solid var(--primary-darker);cursor:pointer;transition:.1s;text-decoration:none;text-align:center}
.button-primary{background:var(--primary-brown);color:#fff;box-shadow:6px 6px 0 var(--primary-darker)}
.button-primary:hover{background:#a0522d;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--primary-darker)}
.button-secondary{background:var(--blue-600);color:#fff;box-shadow:6px 6px 0 var(--blue-100)}
.button-secondary:hover{background:#2774af;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--blue-100)}
footer{display:flex;align-items:center;justify-content:center;background:var(--gray-200);width:100%;height:var(--footer-height)}
footer ul{display:flex;gap:2em;list-style:none}
footer a{color:#839197;text-transform:uppercase;font-size:.9em;text-decoration:none}
footer a:hover{color:var(--primary-brown)}
@media (max-width:960px){#navbar-links{flex-direction:column;position:absolute;top:3em;width:100%;padding:1.25em;background:var(--gray-200);display:none}
#navbar-links.navbar-content{display:flex}
.navbar-hamburger{display:flex!important}}
@media (max-width:800px){body{width:100%}
main{padding:1em .5em}
h1{font-size:1.5rem}
.gallery img{width:100%}}