.panel{
width: 95%;background-color: white;color: black;text-align: left;padding: 2px;font-weight: bolder
}
.pn{background-color: white;color: black;text-align: center;padding: 3px}
.co {background-color: red;color: white;text-align: center;width: 95%;}
#by{background-image: url('./vegetative_fog.jpg');background-repeat: repeat;}

#help{ 
    background-color: white;
    display: none;position: absolute;visibility: visible;padding: 5px;
    border: outset;top: 10px;left: 2px;width: 80%;height: 80%;
	overflow: auto
    } 
#help a {color: black;font-weight: bolder;text-decoration: none}
#help a:hover {color: red;text-decoration: none} 
#cimgif { 
    background-image: url("./kapcsolat2.jpg");
    display: block;position: absolute;visibility: hidden;
    top: 50px;left: 50px;width: 352px;height: 205px;
    }
@media only screen
and (min-width : 1605px)
and (max-width : 2000px) {
.co {font-size: 300%}
.pn {font-size: 300%}
.panel {font-size: 300%}
#help{font-size: 200%}
#help a {font-size: 200%}
#help a:hover {font-size: 200%}
}	
	
@media only screen
and (min-width : 1024px)
and (max-width : 1600px) {
.co {font-size: 200%}
.pn {font-size: 200%}
.panel {font-size: 200%}
#help{font-size: 150%}
#help a {font-size: 150%}
#help a:hover {font-size: 150%}
}

@media only screen
and (min-width : 379px)
and (max-width : 1023px) {
.co {font-size: 100%}
.pn {font-size: 150%}
.panel {font-size: 150%}
#help{font-size: 120%}
#help a {font-size: 120%}
#help a:hover {font-size: 120%}
}
@media only screen
and (min-width: 260px)
and (max-width: 380px) {
.co {font-size: 80%}
.pn {font-size: 80%}
.panel {font-size: 80%}
#help{font-size: 100%}
#help a {font-size: 100%}
#help a:hover {font-size: 100%}
}