:root{

--bg:#f7f4eb;
--grid:#e8e2d5;

--panel:#fffdf8;

--border:#2b2b2b;

--shadow:#c7bfaf;

--text:#2f2f2f;

--muted:#6d6d6d;

--green:#6da85f;

--blue:#6d98d6;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:"Pixelify Sans",sans-serif;

font-size:22px;

background:

linear-gradient(var(--grid) 1px,transparent 1px),

linear-gradient(90deg,var(--grid) 1px,transparent 1px),

var(--bg);

background-size:16px 16px;

color:var(--text);

}

.container{

width:min(1000px,92%);

margin:auto;

padding:50px 0;

}

header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:60px;

}

.logo{

font-family:"Press Start 2P";

font-size:18px;

}

.logo span{

    color:var(--green);

}

nav{

display:flex;

gap:18px;

}

nav a{

text-decoration:none;

color:var(--text);

padding:10px 16px;

border:3px solid transparent;

}

nav a:hover{

border:3px solid var(--border);

background:white;

}

.hero{

background:var(--panel);

border:4px solid var(--border);

padding:45px;

box-shadow:8px 8px 0 var(--shadow);

margin-bottom:60px;

}

.hero h1{

font-family:"Press Start 2P";

font-size:28px;

line-height:1.5;

margin-bottom:25px;

}

.hero p{

max-width:650px;

color:var(--muted);

}

.badges{

display:flex;

gap:15px;

margin-top:30px;

flex-wrap:wrap;

}

.badges span{

background:white;

border:3px solid var(--border);

padding:10px 15px;

box-shadow:4px 4px 0 var(--shadow);

}

section{

margin-bottom:60px;

}

section h2{

font-family:"Press Start 2P";

font-size:18px;

margin-bottom:25px;

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.card{

display:block;

text-decoration:none;

color:inherit;

background:var(--panel);

border:4px solid var(--border);

padding:28px;

box-shadow:8px 8px 0 var(--shadow);

transition:.15s;

}

.card:hover{

transform:translate(-3px,-3px);

box-shadow:12px 12px 0 var(--shadow);

}

.icon{

font-size:48px;

margin-bottom:20px;

}

.card h3{

font-family:"Press Start 2P";

font-size:15px;

margin-bottom:18px;

}

.card p{

color:var(--muted);

line-height:1.5;

}

.open{

margin-top:25px;

display:inline-block;

background:#6da85f;

color:white;

padding:10px 18px;

border:3px solid var(--border);

}

.panel{

background:var(--panel);

border:4px solid var(--border);

padding:30px;

box-shadow:8px 8px 0 var(--shadow);

}

.entry{

display:flex;

gap:20px;

padding:10px 0;

}

.entry span{

width:130px;

color:var(--muted);

}

footer{

margin-top:80px;

text-align:center;

color:var(--muted);

line-height:2;

border-top:4px dashed var(--border);

padding-top:30px;

}

@media(max-width:700px){

header{

flex-direction:column;

gap:25px;

}

nav{

flex-wrap:wrap;

justify-content:center;

}

.hero h1{

font-size:18px;

}

body{

font-size:18px;

}

.entry{

flex-direction:column;

gap:4px;

}

.entry span{

width:auto;

}

}