/* design elemek , animációk , képek */

/*  ========================== Body Bg Animation ========================================= */
body {
/*    background: linear-gradient(+45deg, var(--bg_anim_color1), var(--bg_anim_color2));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    } */
	background: var(--bg_color_fix);
}
/* ============================================================================================ */
a{
	text-decoration: none;	
}
/* ======================== Header elemek ======================== */
.header_m {
/* 	background-color : var(--header_bg_color); */
}
.header_content {
	background-color : var(--header_color);	
	background-image: url('images/Header2026_3.jpg');
	background-size: cover;
	background-position: center;
	box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.flag{
	width : 30px;
	height : 30px;
	border-radius: 15px;
	background-color :  var(--link_fo_hover);
	display : inline-block;
	margin-right : 10px;
}
.lang{
	padding-top: 10px;
	padding-left: 10px;
}
.flag:hover {
	box-shadow: 0px 0px 5px var(--link_fo_hover);	
}
.login{
	padding-top: 5px;
	padding-right: 10px;
  /* szintaxis: clamp(minimum, dinamikus_érték, maximum) */
	font-size: clamp(1rem, 1.5vw , 2rem);
}
.login a {
	color : var(--link_fo);
	text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
.login a:hover{
	color : var(--link_fo_hover);
	color: #27F53C;
	text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
.search{
	padding-bottom: 20px;
}
.search_form{
	padding-bottom : 40px;
	border: 1px solid black;
	border-radius: 10px;
	padding: 0px;
	background-color: white;
	box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.search_form:hover {
	text-shadow: 0 0 5px var(--link_fo_hover);
}

.search_label , .search input {
	font-size : 25px;
	padding-right: 10px;
}
.search_label{
	margin-left: 10px;
}
.search_input{
	border : none;
	box-shadow: inset 0px 0px 5px rgba(0,0,0,0.5);
}
.search_input:focus{
	border: 1px solid var(--link_fo_hover);
}
.search_button{
	background-color : white;
	color: black;
	border : none;
	height : 40px;
	border-radius : 0px 10px 10px 0px;
	padding: 0px 10px 0px 10px;
}
.search_button:hover{
	background-color : var(--link_fo_hover);
}

.header_nav{
	padding-bottom : 10px;
	font-size : var(--fo-font-size);
}
.header_nav a {
	color : var(--link_fo); 
	text-shadow: 2px 2px 4px rgba(0,0,0,1);
	/* szintaxis: clamp(minimum, dinamikus_érték, maximum) */
	font-size: clamp(1rem, 1.5vw , 2rem);
	margin-right : var(--gap);
}
.header_nav a:hover {
/*	color : var(--link_fo_hover);	 */
	color: var(--link_fo_hover);
	text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
/* =============================================================== */
/* ======================== Nav elemek ======================== */

.main_nav_bar {
	background-color : var(--main_nav_bar_bg_color);
	box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.main_nav_bar_content{
	font-size : var(--fo-font-size);
	/* szintaxis: clamp(minimum, dinamikus_érték, maximum) */
	font-size: clamp(1rem, 1.5vw , 2rem);
}
.main_nav_bar_content a{
	color : var(--link_fo);
	margin-right : var(--gap);
	transition: all 0.2s ease;
	display: inline-block;
}
.main_nav_bar_content a:hover{
	transform-origin: center center;
	transform: scale(1.03) translateY(-2px) ;
}
.link_prebox {
	display: inline-block;
	height : 1rem; 
	width : 6px;
	border-radius : 2px;
	background-color : white;
	margin-right : 4px;
}
.hang_link_prebox {
	background-color: var(--hang-uv) ;
	box-shadow: 0 0 6px var(--hang-uv);
}
.feny_link_prebox {
	background-color: var(--feny-uv) ;
	box-shadow: 0 0 6px var(--feny-uv);
}
.szinpad_link_prebox {
	background-color: var(--szinpad-uv) ;
	box-shadow: 0 0 6px var(--szinpad-uv);
}
.vizual_link_prebox {
	background-color: var(--vizual-uv) ;
	box-shadow: 0 0 6px var(--vizual-uv);
}


.hang_link:hover {
	color: var(--hang-uv) ;
	text-shadow: 0 0 5px currentColor ;
}
.feny_link:hover {
	color: var(--feny-uv) ;
	text-shadow: 0 0 5px currentColor ;
}
.szinpad_link:hover {
	color: var(--szinpad-uv) ;
	text-shadow: 0 0 5px currentColor ;
}
.vizual_link:hover {
	color: var(--vizual-uv) ;
	text-shadow: 0 0 5px currentColor ;
}

/* =============================================================== */
/* ======================== Contetn elemek ======================== */
.side_menu , .content{
	background-color : white;
	box-shadow: 0 5px 20px rgba(0,0,0,0.1);
	border-radius: 10px;
	padding: 20px;
}

.side_menu_hang {
	background-color : var(--hang-bg);	
}
.side_menu_feny {
	background-color : var(--feny-bg);	
}
.side_menu_szinpad {
	background-color : var(--szinpad-bg);	
}
.side_menu_vizual {
	background-color : var(--vizual-bg);	
}



/* ======================== Footer elemek ======================== */
.footer_m {
/*	background-color : var(--footer_bg_color); */
	margin-bottom: 20px;
	border-radius: 10px;
}
.footer_content{
	background-color : var(--footer_color);	
	box-shadow: 0 5px 20px rgba(0,0,0,0.1);
	border-radius : 10px;
}
.footer_columns1 , .footer_columns2, .footer_columns3, .footer_columns4 {
	background-color : var(--footer_color);	
	box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.footer_columns1{
	margin-left: 20px;
}
.footer_columns4{
	margin-right: 20px;
}