* {box-sizing: border-box;}

body {background: radial-gradient(#000 16%, transparent 17%),radial-gradient(#444 16%, transparent 17%) 0px 1px,radial-gradient(#000 16%, transparent 17%) 8px 8px,radial-gradient(#444 16%, transparent 17%) 8px 9px;
	background-color: #422727; background-size: 16px 16px; overflow: scroll;}

.logo {width: 100%; font-size: 2em; text-align: center; padding-bottom: 30px;}
.logo img {height: 120px;}

.focim {color: yellow; width: 100%; font-size: 1.9em; text-align: center; margin-top: 10px;}

a {text-decoration: none;}

/* Felső hamburger menü */
* {box-sizing: border-box;}
a.outer-menu,
a.outer-menu:visited,
a.outer-menu:hover,
a.outer-menu:active {color: inherit; text-decoration: none;}

.outer-menu {position: fixed; top: 0; left: 0; z-index: 100;}
.outer-menu .checkbox-toggle {position: absolute; top: 0; left: 0; z-index: 101; cursor: pointer; width: 40px; height: 40px; opacity: 0;}
.outer-menu .checkbox-toggle:checked + .hamburger > div {transform: rotate(135deg);}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {top: 0; transform: rotate(90deg);}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {opacity: 0;}
.outer-menu .checkbox-toggle:checked ~ .menu2 {pointer-events: auto; visibility: visible;}
.outer-menu .checkbox-toggle:checked ~ .menu2 > div {transform: scale(1); transition-duration: .75s;}
.outer-menu .checkbox-toggle:checked ~ .menu2 > div > div {opacity: 1; transition: opacity 0.4s ease 0.4s;}
.outer-menu .checkbox-toggle:hover + .hamburger {box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {transform: rotate(225deg);}
.outer-menu .hamburger {position: absolute; top: 0; left: 0; z-index: 1; width: 40px; height: 40px; padding-left: 10px; background: none; cursor: pointer;
	transition: box-shadow 0.4s ease; backface-visibility: hidden; display: flex; align-items: center; justify-content: center;}

/* Középső pálca */	
.outer-menu .hamburger > div {position: relative; flex: none; width: 100%; height: 4px; background: yellow; transition: all 0.4s ease; display: flex; align-items: center; justify-content: center;}
/* Szélső pálcák */
.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {content: ''; position: absolute; z-index: 1; top: -10px; left: 0; width: 100%; height: 4px; background: yellow; transition: all 0.4s ease; border-radius: 5px;}
.outer-menu .hamburger > div:after {top: 10px;}

.outer-menu .menu2 {position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; overflow: hidden; backface-visibility: hidden;
	outline: 1px solid transparent; display: flex; align-items: center; justify-content: center;}
.outer-menu .menu2 > div {width: 200vw; height: 260vw; color: #fefefe; border-radius: 50%; transition: all 0.4s ease; flex: none; transform: scale(0);
	backface-visibility: hidden; overflow: hidden; display: flex; align-items: center; justify-content: center;
		background: radial-gradient(#000 16%, transparent 17%),radial-gradient(#444 16%, transparent 17%) 0px 1px,radial-gradient(#000 16%, transparent 17%) 8px 8px,radial-gradient(#444 16%, transparent 17%) 8px 9px;
		background-color: #422727; background-size: 16px 16px; line-height: 26px;
	}
.outer-menu .menu2 > div > div {text-align: center; max-width: 90vw; max-height: 100vh; opacity: 0; transition: opacity 0.4s ease; overflow-y: auto; flex: none; display: flex;
	align-items: center; justify-content: center;}
 
.outer-menu .menu2 > div > div > ul {list-style: none; padding: 0 1em; margin: 0; display: block; max-height: 100vh;}
.outer-menu .menu2 > div > div > ul > li {padding: 0; margin: 1em; font-size: 24px; display: block;}
.outer-menu .menu2 > div > div > ul > li > a {position: relative; display: inline; cursor: pointer; transition: color 0.4s ease;}
.outer-menu .menu2 > div > div > ul > li > a:hover {color: #e5e5e5;}
.outer-menu .menu2 > div > div > ul > li > a:hover:after {width: 100%;}
.outer-menu .menu2 > div > div > ul > li > a:after {content: ''; position: absolute; z-index: 1; bottom: -0.15em; left: 0; width: 0; height: 2px; background: #e5e5e5; transition: width 0.4s ease;}

.hmenu{list-style-type: none; text-align:center; font-size: 1.5rem; width: 100%;}
.hmenu li{margin: 0 auto; padding: 10px;}
.hmenu li:hover {background: var(--hatter); width: 100%;}
.hmenu li a{color: yellow;}