:root {
 --paper: #fffff1;
 --pagerback: #eeeee0;
 --char: LightStateGrey;
 --marks: green;
}

* {
 box-sizing: border-box;
}

body {
 height: 100vh;
 margin: 0;
 font-size: 16px;
 padding: 0 0.5rem 1rem 0.8rem;
 font-family: Verdana, Arial, sans-serif;
 color: var(--char);
 background-color: var(--paper);
}

/*
 ┌───────────────────┐
 │ header            │
 │┌──────┬──────────┐│
 ││ Menu │ h1       ││
 ├┴──────┴──────────┴┤
 │ main              │
 │┌─────┬───────────┐│
 ││(nav)│ article   ││
 ││     │┌─────────┐││
 ││     ││ section │││
 ││     │├─────────┤││
 ││     ││ foot    │││
 ││     │└─────────┘││
 ├┴─────┴───────────┴┤
 │ footer            │
 └───────────────────┘
 ┌────────┐
 │ header │
 └────────┘
*/

header {
 display: flex;
 width: 100%;
 height: 2.5rem;
}

/*
 ┌──────┐
 │ Menu │
 └──────┘
*/

header > div {
 width: 1.5rem;
 height: 100%;
 margin-right: 1rem;
 padding-top: 0.4rem;
}

header > div > div {
 width: 100%;
 height: 0.25rem;
 margin-top: 0.25rem;
 background-color: currentcolor;
}

#box {
 position: absolute;
 top: 0.25rem;
 left: 0.25rem;
 width: 1.5rem;
 height: 2.5rem;
 margin: 0;
 opacity: 0;
}

#box:checked ~ main nav {
 display: block;
}

/*
 ┌────┐
 │ h1 │
 └────┘
*/

header h1 {
 height: 100%;
 margin: 0;
 padding: 0;
}

/*
 ┌──────┐
 │ main │
 └──────┘
*/

main {
 display: flex;
}

/*
 ┌────────┐
 │ footer │
 └────────┘
*/

footer {
 height: 0.25rem;
}

/*
 ┌─────────┐
 │ article │
 └─────────┘
*/

article {
 overflow: hidden;  /* ne legyen túlnyúlás */
}

/*
 ┌─────────┐
 │ section │
 └─────────┘
*/

section pre {
 padding: 0.25rem;
 border-radius: 0.25rem;
 border-style: solid;
 border-width: 1px;
 overflow-x: auto;
 font-family: monospace;
}

section span {
 color: var(--marks);
}

.mono {
 font-family: monospace;
}


/*
 ┌──────┐
 │ foot │
 └──────┘
*/

.foot {
 text-align: center;
}

.foot a {
 display: inline-block;
 width: 3.6rem;
 margin: 0.25rem;
 padding: 1rem;
 border-width: 1px;
 border-radius: 2rem;
 background-color: var(--pagerback);
 text-align: center;
 text-decoration: none;
 color: inherit;
 font-size: larger;
 font-weight: bold;
}

/*
 ┌─────┐
 │ nav │
 └─────┘
*/

nav {
 display: none;
 width: fit-content;
 margin: 0.75rem 0.5rem 0.5rem 0;
 padding: 0.5rem 0.2rem;
}

nav ul {
 margin: 0;
 padding: 0 0.5rem 0 0.75rem;
 list-style-type: none;
}

nav li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 white-space: nowrap;
}

nav > ul {
 padding: 0 0 0 0.5rem;
}

nav > ul > li {
 font-weight: bold;
}

nav > ul > ul {
 padding-bottom: 0.25rem;
}

nav a {
 text-decoration: none;
 color: inherit;
}

/*
 ┌───────┐
 │ MEDIA │
 └───────┘
*/

@media only screen and (max-width: 900px) {
 header span { display: none; }
}

@media only screen and (max-width: 768px) {
 main { flex-direction: column; }
 nav { width: auto; }
}