@font-face {
    font-family: 'SourceCodePro-Regular';
    src: url('egyebek/SourceCodePro-Regular.ttf');
}

@font-face {
    font-family: 'SourceCodePro-Bold';
    src: url('egyebek/SourceCodePro-Bold.ttf');
}

@font-face {
    font-family: 'SourceCodePro-ExtraLight';
    src: url('egyebek/SourceCodePro-ExtraLight.ttf');
}


::-moz-selection { 
  color: rgb(247,232,211);
  background: rgb(218,95,107);
}

::selection {
  color: rgb(247,232,211);
  background: rgb(218,95,107);
}

body {
	background-color: rgb(218,95,107);
	font-family: SourceCodePro-Regular;
	font-size: 1em;
	font-weight: 500;
	color: rgb(208,85,97);
}

#mindenjo {

	display: flex;
	flex-direction: column;
	justify-content: center;
	
}

#fejlec {
	flex-grow: 1;
	width: 100%;
	cursor:url(kepek/cursor1.gif),auto;
	animation: cursor 0.7s linear infinite;
	}

@keyframes cursor{
    0% { 
        cursor: url(kepek/cursor1.gif), auto;
    }
    33% { 
        cursor: url(kepek/cursor2.gif), auto;
    }
    66% { 
        cursor: url(kepek/cursor3.gif), auto;
    }
    100% { 
        cursor: url(kepek/cursor4.gif), auto;
    }

}

#menu {
	padding: 20px;
	background-image: url('kepek/kolbasz.png');
	background-size: cover;	
	background-position: center; 
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-grow: 1;
}

.menupont {
	padding: 10px;
	flex-grow: 1;
	margin: 20px;
  	transition: 1s all;
  	text-align: center;
	width: 20%;
	cursor:url(kepek/cursor1.gif),auto;
	animation: cursor 0.7s linear infinite;
}

.menupont:hover {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  	transition: 1s all;
  	}


#kontener {
	flex-grow: 1;
	background-image: url('kepek/hatter.png');
	background-size: cover;
	width: 80%;
	padding: 10%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	line-height: 1.3;
	transition: 0.8s all;

}

.info {
	flex-grow: 2;
	font-size: 1.2em;

}
.ikonok {
	width: 60%;
}

.dekor {
	width: 100%;
	position: relative;
	left: 30%;
	top: 30%;
	
}

#kontener a, #kontener a:visited {
	text-decoration: none;
	background-color: rgb(218,95,107);
	color: rgb(247,232,211);
	padding: 3px;
	border-radius: 5px;

}

#kontener a:hover {

	color: rgb(218,95,107);
	background-color: rgb(47,232,211);
	opacity: 0.7;
	transition: 0.3s all;
}

#bekezdes::first-letter {
	margin-top: 5px;
  	float: left;
	font-size: 30px;
	line-height: 30px;
}

a {
	text-decoration: none;
}

#szocikonok {

	display: flex;
	flex-direction: row;
	justify-content: center;
}

.szocikon {
	width: 80%;
	margin: 10%;
	}

.lablecikon {
	width: 60%;
	cursor: pointer;
	}

#szocioikonok {
	display: flex;
	flex-direction: row;
	justify-content: center;
	column-gap: 5%;
}

/* ez a blokk lassan kifuthat */
#egyebikonok {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 5%;
	border-top: 1px solid rgb(208,85,97);
}

.alsoikonok {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 5%;
}


#lablec {
	display: flex;
	justify-content: center;
	flex-direction: row;
}

#lablec a {
	all: unset;
}

.ikonok {

}

.vastagitott {
	font-family: SourceCodePro-Bold;
}

hr
{
	border-top: 2px solid rgb(218,95,107);
}


li {
	margin-bottom: 8px;
}

h1 {
	display: block;
	font-family: SourceCodePro-ExtraLight;
	text-align: center;
	text-decoration: underline;
	text-decoration-style: wavy; 
}

h2 {
	font-family: SourceCodePro-Bold;
	font-size: 1.4em; 
	background-color: rgb(218,95,107);
	color: rgb(247,232,211);
	display: block;
	padding: 5px;
	border-radius: 10px;	
	text-align: center;
	margin-bottom: 0.1em;

}

q {
	font-family: SourceCodePro-Bold;
}

.hir {

/*

ha kell a színátmenetes csodaborder kódja (és miért ne kellene, ha már ide 
navigáltál), akkor íme: https://codepen.io/ananyaneogi/pen/mdPbJZO
És az animációja:
https://css-tricks.com/animating-a-css-gradient-border/

*/	

--kozeppont: 8px;
--szelesseg2: 2px;

	transition: 2s all;	
	margin-bottom: 18px;
	border-bottom: 10px solid rgb(218,95,107);
	border-width: 10px;
	border-image: repeating-radial-gradient(
			circle at var(--kozeppont),
			rgb(218,95,107),
			rgb(205,209,140) var(--szelesseg2),
			rgb(247,232,211) 14px,
			rgb(247,232,211) 21px
		)
		1;

}

.hir:hover {

	--szelesseg2: 143px;
	transition: 5s all;


}

.hir:last-child {
	border-bottom: none;
}

.hiradatok {
	font-size: 0.7em;
	margin-bottom: 1.1em;
	display: block;
	text-align: center;
	}


#nyelvvalaszto {
  	align-self: flex-start;
	position: absolute;
	top: 0;
	right: 0;
	-webkit-filter: grayscale(30%); 
    filter: grayscale(30%);

}

#nyelvvalaszto:hover {
	-webkit-filter: grayscale(0%); 
    filter: grayscale(0%);

}

#nyelvvalaszto img {
	width: 64px;
}

.tamogatok {
	padding-left: 10%;
	padding-right: 10%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	column-gap: 3%;
	row-gap: 10px;
	flex-wrap: wrap;
}

.tamogatok img {
	height: 60px;
}



@media screen and (max-width: 906px) {
	#nyelvvalaszto img {
		width: 52px;
	}
}



@media screen and (max-width: 800px) {

#menu {
	flex-direction: row;
/*	background-image: none;
	margin-left: 50px;
	margin-right: 50px; */
}  
  
.menupont {
  	transition: 1s all;
  	text-align: center;
	width: 30%;
	cursor: pointer;
	margin: 0px;
	padding: 0px;

}


#kontener {
	background-image: url('kepek/hatter-mobil.png');
	background-size: contain;
	width: 80%;
	padding: 10%;
	margin-right: 0px;
	justify-content: center;
	
	}

.dekor {
	width: 100%;
	left: 0%;
	bottom: 0%;

}

.szocikon {
	width: 50%;
	margin: 0%;
	}

 
#nyelvvalaszto img {
	width: 40px;
}
 

#lablec {
	display: flex;
	flex-direction: wrap;
	justify-content: center;
}

#lablec img {
	width: 50%;

}
  
  

}