:root {
  --egyik: rgb(175,225,221);;
  --masik: rgb(34,167,157);
  --harmadik: rgb(153,35,99);
}

html {
  scroll-behavior: smooth;
}

@font-face {
    font-family: 'Overpass';
    src: url('../hasznosulo/fontok/Overpass-Regular.woff2') format("truetype");
  	font-weight: normal;
  	font-style: normal;
}

@font-face {
    font-family: 'Overpass';
    src: url('../hasznosulo/fontok/Overpass-ExtraBold.woff2') format("truetype");
  	font-weight: bold;
  	font-style: normal;
}

@font-face {
    font-family: 'Overpass';
    src: url('../hasznosulo/fontok/Overpass-LightItalic.woff2') format("truetype");
  	font-weight: normal;
  	font-style: italic;
}

@font-face {
    font-family: 'Overpass';
    src: url('../hasznosulo/fontok/Overpass-BoldItalic.woff2') format("truetype");
  	font-weight: bold;
  	font-style: italic;
}

@font-face {
    font-family: 'Overpassmono';
    src: url('../hasznosulo/fontok/OverpassMono-Bold.woff2') format("truetype");
}



::-moz-selection { 
  color: rgb(253,253,253);
  background: var(--harmadik);
}

::selection {
  color: rgb(253,253,253);
  background: var(--harmadik);
}

audio::-webkit-media-controls-play-button,
     audio::-webkit-media-controls-panel {
     }

audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
}

audio::-moz-timeline,
video::-moz-timeline {
    display: none;
}

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 97%;
    height: 35px;
    transform: scale(1.);
}

body {
	font-family: 'Overpass', Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif; 	
	background-color: var(--egyik);
	background-image: url('../kepek/savok/sav2.gif');
	background-position-x: -<?php echo(rand(100,2000)); ?>px;
	background-size: cover;
	background-attachment: fixed;
	transition: 1s background-position-x;

    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    image-rendering: crisp-edges;         		/* minden más                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}


  #logo {
  	width: 100%;
  	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	opacity: 0.99;
  }

/* innen: https://codepen.io/sosuke/pen/Pjoqqp */
.kepek {
	filter: sepia(19%) saturate(363%) hue-rotate(122deg) brightness(94%) contrast(87%);
	z-index: -1;
}

a {
	text-decoration: none;
	color: black;
	background-color: var(--egyik);
	padding-left: 5px;
	padding-right: 5px;	
}

a:hover {
	background-color: rgb(235,245,251);
}
img {
	width: 100%;
}

.hirek {
	background-color: rgb(254,254,251);
	padding: 10px;
	border-bottom: 10px solid var(--masik);
	background-color: white;
	border-radius: 1px;
	z-index:-1;
}


.hirek:nth-child(odd) {
	border-left: 10px solid var(--masik);
	background: rgb(253,254,252);
	background: linear-gradient(270deg, rgba(253,254,252,0.2) 0%, rgba(253,254,252,0.95) 20%, rgba(253,254,252,1) 100%);

}

.hirek:nth-child(even) {
	border-right: 10px solid var(--masik);
	background: rgb(243,242,245);
	background: linear-gradient(270deg, rgba(243,242,245,0.95) 0%, rgba(243,242,245,1) 95%, rgba(243,242,245,0.1) 100%);
}

.hirek:last-child {
	border-bottom: 5px solid var(--masik);
}

.hirfejlec {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	z-index: 4;
}

.hirfejlecelem {
	display: block;
}


.hirinfo {
/*	color: rgb(100,106,98); */
	color: var(--masik);
	font-style: italic;
	font-size: 0.8em;
}

h1 {
font-family: 'Overpass', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
margin-top: 0px;
margin-bottom: 0px;
border-bottom: 0px dotted rgba(251,251,251,0.7);
font-size: 1.4em;
}

h2 {
font-family: 'Overpass', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
margin-top: 0px;
font-size: 1.3em;
}

#fejlec {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-right: 10px solid var(--masik);
	position: -webkit-sticky;
  	position: sticky;
  	top: 0;
	background-color: var(--egyik);
	border-bottom: 10px solid var(--masik);
	opacity: 0.98;
	padding-left: 10px;
	padding-top: 10px;
	z-index: 6;
	
}

.fejlecelem:nth-child(1) {   
   	 width: 36%;
}

.fejlecelem:nth-child(2) {   
   	 width: 62%;
   	 justify-content: right;
}


#perihajo {
	width: 70%;
  	margin-left: auto;
  	margin-right: auto;
}

#lablec {
	font-size: 0.9em;
	background-color: var(--egyik);

}

#lablec a {
	color: black;
	background-color: none;
	border-bottom: 2px dotted var(--masik)
}

#lablec a:hover {
	border-bottom: none;
}

.kattintos {
	cursor: pointer;
	color: black;
	background-color: var(--egyik);
	padding-left: 5px;
	padding-right: 5px;	
}

.kattintos:hover {
	background-color: rgb(235,245,251);
}

.playgomb{
	cursor: pointer;
	color: var(--harmadik);
	padding-left: 5px;
	padding-right: 5px;	
	background-color: rgb(235,245,251);

}
.playgomb:hover {
	color: var(--egyik);
	background-color: var(--harmadik);

}

.napok {
	border-radius: 3px;
	padding: 2px;
}

#akarmi {
	margin-top: 5px;
	display: inline;
}

.lablecKattintos {
	color: black;
	background-color: none;
	border-bottom: 2px dotted var(--masik);
	padding-left: 5px;
	padding-right: 5px;	
}

.lablecKattintos:hover {
	border-bottom: none;
	cursor: pointer;
	background-color: rgb(235,245,251);
}

#musortabla a {
	background-color: var(--harmadik);
}

#musortabla a:hover {
	background-color: var(--egyik);
}

.ceruza {
	color: var(--harmadik);
	background-color: none;
}

.playlist {
	font-size: 0.82em;
	color: rgb(50,50,50);
}

#archivumjatszo {
}

#podcastek {
	position: static;
	top: 0px;
	z-index: 1;
}
#podcastlejatszo {
	display: none;
}

#messages {
list-style: none;
margin-left: 0px;
padding-left: 0px;
font-size: 0.8em;
}

#urlap {
font-size: 0.8em;
}

@media screen and (max-width: 800px) {
	body {
  }
  
  	#logo {
  	width: 100%;
  }
  
  	#perihajo {
	width: 100%;
	background-color: white;
  	margin-left: auto;
  	margin-right: auto;
}
   	#fejlec {
   	flex-direction: column;
   	background-color: var(--egyik);
   }

	.fejlecelem:nth-child(1) {   
   	 width: 100%;
}

	.fejlecelem:nth-child(2) {   
   	 width: 100%;
}

	.hirfejlec {
	flex-direction: column-reverse;
	justify-content: space-between;
}


    #adaslinkek {
    	display: none;
    } 
}