@font-face {
	   font-family: Cezeri;
	   src: url(Omer-Sphere.woff);
	}
	body {
		background: linear-gradient(rgba(var(--arka), 0.98), rgba(var(--arka), 0.98)), url("/pano/desen.png");
        	font-family: sans-serif;
                margin: 0;
                padding: 0;           
	}


	main {
                padding-top: .2rem;
                flex-wrap: wrap;
                justify-content: center;
                gap: .5rem;
                text-align: center;
		display: grid;
	}

	header {color: var(--beyaz); text-align: center;justify-content: center;}
	a:link{text-decoration: none;} 
	a:visited{text-decoration: none;}
	a:hover{text-decoration: none;}
	a:active{text-decoration: none;}

	h1{color: var(--h1renk);font-size: 2vw;font-style: italic;font-weight: bold;margin: 10;}
	h2{color: var(--h2renk);font-size: 1.5vw;font-family: Monospace;font-style: italic;font-weight: bold;display: block;padding:10px;margin: 0;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;hyphens: auto;word-wrap: break-word;}
	h3{color: var(--h3renk);font-size: 1rem;font-family: Cezeri;font-weight: 500;margin: 12px;}
	h4{color: var(--h4renk);font-size: 1.5vw;font-weight:lighter;margin:.1vw;}
	h5{color: var(--h5renk);font-size: 2vw;font-style: italic;font-weight: bold;margin: 10;}
	p{color: var(--prenk);font-size:2vw;font-family:Cezeri;font-weight:550;margin:10px;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;}
	pe{color: var(--perenk);font-size:2vw;font-family:Helvetica;font-weight:550;padding:10px;margin:10px;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;}
	po{color: var(--prenk);font-size:1.3rem;margin:10px;font-family:Arial;font-weight:bold;text-align:left;}

	.topnav{overflow:hidden;background-color:var(--nav);}
	.topnav a{float:right;display:block;text-align:center;padding: 14px 16px;text-decoration:none;font-size:17px;color:var(--tan);}
	.topnav .icon {display: none;}
	.dropdown {float:right;overflow:hidden;}
	.dropdown .dropbtn {font-size: 17px;border:none;outline:none;color:var(--tan);padding: 0px 0px;background-color:inherit;font-family:inherit;margin:0;}
	.dropdown-content {display:none;position:absolute;background-color:var(--nav);min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);z-index: 1;}
	.dropdown-content a {float:none;color:var(--tan);padding: 12px 16px;text-decoration:none;display:block;text-align:left;}
	.topnav a:hover, .dropdown:hover .dropbtn .dropdown-content a:hover{background-color: var(--sec);color:var(--tan);}
	.dropdown:hover .dropdown-content {display: block;}
	#themeSwitcher:hover{cursor:pointer;}
	.active {background-color: var(--active);}

	:root {
		--arka: 17, 17, 17;
		--beyaz: #e7e7e7;
		--siyah: #000000;
		--tan: #D2B48C;
		--nav: #241202;
		--active: #714424;
		--sec: #4d4239;
		--prenk: #d6d0ce;
		--perenk: #d6d0ce;
		--h1renk: #d1d1d1;
		--h2renk: #d1d1d1;
		--h3renk: #d7ccc8;
		--h4renk: #fffff;
		--h5renk: #d1d1d1;
		--ustrenk: #231100;
		--altrenk: #633200;
		--cerceve: #987554;
		--yanpanel: 17, 17, 17;
		--yanyazi: 0, 0, 0;
		--buton: #241202;
		--harita: #4c433c;
		--haritasec: #5e584b;
		--asya: #241202;
		--avrupa: #241202;
		--kamerika: #241202;
		--gamerika: #241202;
		--twiga: #e7a721;
		--grii: #efe5c8;
		--arkaplanrenk: #1e1e1e;
		--haritaarkapanel: url('worlddark.png');
	}
	[data-color="dark"] {
		--arka: 17, 17, 17;
		--beyaz: #e7e7e7;
		--siyah: #000000;
		--tan: #d2b48c;
		--nav: #241202;
		--active: #714424;
		--sec: #4d4239;
		--prenk: #d6d0ce;
		--perenk: #d6d0ce;
		--h1renk: #d1d1d1;
		--h2renk: #d1d1d1;
		--h3renk: #d7ccc8;
		--h4renk: #fffff;
		--h5renk: #d1d1d1;
		--ustrenk: #231100;
		--altrenk: #633200;
		--cerceve: #987554;
		--yanpanel: 17, 17, 17;
		--yanyazi: 0, 0, 0;
		--buton: #241202;
		--harita: #4c433c;
		--haritasec: #5e584b;
		--asya: #241202;
		--avrupa: #241202;
		--kamerika: #241202;
		--gamerika: #241202;
		--arkaplanrenk: #1e1e1e;
		--haritaarkapanel: url('worlddark.png');
	}
	[data-color="light"] {
		--arka: 230, 230, 230;
		--beyaz: #211f1f;
		--siyah: #fffff;
		--tan: #473d2e;
		--nav: #d2b48c;
		--active: #997359;
		--sec: #d1bfb0;
		--prenk: #303030;
		--perenk: #242221;
		--h1renk: #303030;
		--h2renk: #303030;
		--h3renk: #383432;
		--h4renk: #000000;
		--h5renk: #303030;
		--ustrenk: #d9d8d7;
		--altrenk: #8a827b;
		--cerceve: #be9269;
		--yanpanel: 230, 230, 230;
		--yanyazi: 255, 255, 255;
		--buton: #d2b48c;
		--harita: #b3e0e6;
		--haritasec: #c6e8ff;
		--asya: #241202;
		--avrupa: #241202;
		--kamerika: #241202;
		--gamerika: #241202;
		--arkaplanrenk: #1e1e1e;
		--haritaarkapanel: url('worldlight.png');
	}
	[data-color="fancy"] {
		--arka: 40, 40, 40;
		--beyaz: #fbf1c7;
		--siyah: #fbf1c7;
		--tan: #ebdbb2;
		--nav: #1d2021;
		--active: #282828;
		--sec: #83a598;
		--prenk: #fbf1c7;
		--perenk: #fbf1c7;
		--h1renk: #fbf1c7;
		--h2renk: #d5c4a1;
		--h3renk: #383432;
		--h4renk: #d5c4a1;
		--h5renk: #d5c4a1;
		--ustrenk: #282828;
		--altrenk: #8a827b;
		--cerceve: #a89984;
		--yanpanel: 40, 40, 40;
		--yanyazi: 50, 48, 47;
		--buton: #1d2021;
		--harita: #d16940;
		--haritasec: #581845;
		--asya: #241202;
		--avrupa: #241202;
		--kamerika: #241202;
		--gamerika: #241202;
		--arkaplanrenk: #1e1e1e;
		--haritaarkapanel: url('worldfancy.png');
	}

	@keyframes walk {
		0% { transform: rotate(0deg); }
		25% { transform: rotate(-10deg); }
		50% { transform: rotate(0deg); }
		75% { transform: rotate(10deg); }
		100% { transform: rotate(0deg); }
	}

	.butongrubu .buton {background-color: var(--buton);border: 1px solid var(--cerceve);color: var(--tan);padding: 15px 32px;text-align: center;text-decoration: none;font-size: 16px;cursor: pointer;width: 150px;height: 30px;display: inline-flex;}
	.butongrubu .buton:hover {background-color: var(--sec);}
	.butontek .buton {background-color: var(--buton);border: 1px solid var(--cerceve);color: var(--tan);padding: 15px 32px;text-align: center;text-decoration: none;font-size: 16px;cursor: pointer;width: 150px;height: 30px;}

	.koordinatpanel{opacity: 0;}
	.haritaana{width:1009.6727px;height:665.96301px;transition:transform .23s;border:4px solid var(--cerceve);border-radius:.2rem;text-align:center;display:flex;grid-template-columns: 1fr;justify-content:space-around;cursor:crosshair;will-change:transform}
	.water{background-image:var(--haritaarkapanel);background-size:cover;background-position:20%}
	path{fill: var(--harita);}
      	path:hover{fill: var(--haritasec);stroke: var(--cerceve);stroke-width: 1px;transition: fill 0.4s;}
	.gezgin{position:absolute;width:30px;height:30px;opacity: 0;background: url("twigaboy.png") no-repeat center center;background-size:contain;transition: all 0s linear;}
	.cosmomisir{position:absolute;width:30px;height:30px;opacity: 1;background: url("cosmoboy.png") no-repeat center center;background-size:contain;transition: all 0s linear;}
	.hikaye{
		position: absolute;
		width: 500px;
		height: 100px;
		background-color: white;
		bottom: 0;
		opacity: 1;
		width:1000px;height:10px;o
	}

	.buz {position:fixed;width:100%;height:100%;pointer-events:none;background:url('frost.png') no-repeat center center;background-size: cover;opacity:0;transition: opacity 1s ease-in-out;}
	.buz.active {opacity: 1;}
	.ates {position:fixed;width:100%;height:70%;pointer-events:none;background:url('fire.webp') no-repeat center center;position: absolute;bottom: 0;background-size: cover;opacity:0;transition: opacity 1s ease-in-out;}
	.ates.active {opacity: .4;}

	#UG:hover {fill: var(--twiga);cursor:zoom-in;}
	.ugyazi{width:337px;height:4rem;transition:transform .23s;border:3px solid var(--cerceve);border-radius:.1rem;margin:-2rem;background: var(--altrenk);visibility:hidden;position: absolute;bottom: 0;will-change:transform}
	#SD:hover {fill: var(--twiga);cursor:zoom-in;}
	.sdyazi{width:337px;height:4rem;transition:transform .23s;border:3px solid var(--cerceve);border-radius:.1rem;margin:-2rem;background: var(--altrenk);visibility:hidden;position: absolute;bottom: 0;will-change:transform}
	#EG:hover {fill: var(--twiga);cursor:zoom-in;}
	.egyazi{width:337px;height:4rem;transition:transform .23s;border:3px solid var(--cerceve);border-radius:.1rem;margin:-2rem;background: var(--altrenk);visibility:hidden;position: absolute;bottom: 0;will-change:transform}
	#FR:hover {fill: var(--twiga);cursor:zoom-in;}
	.fryazi{width:337px;height:4rem;transition:transform .23s;border:3px solid var(--cerceve);border-radius:.1rem;margin:-2rem;background: var(--altrenk);visibility:hidden;position: absolute;bottom: 0;will-change:transform}
	#PE:hover {fill: var(--grii);cursor:zoom-in;}
	.peyazi{width:337px;height:4rem;transition:transform .23s;border:3px solid var(--cerceve);border-radius:.1rem;margin:-2rem;background: var(--altrenk);visibility:hidden;position: absolute;bottom: 0;will-change:transform}
	#BO:hover {fill: var(--grii);cursor:zoom-in;}
	.boyazi{width:337px;height:4rem;transition:transform .23s;border:3px solid var(--cerceve);border-radius:.1rem;margin:-2rem;background: var(--altrenk);visibility:hidden;position: absolute;bottom: 0;will-change:transform}

	#TR:hover {fill:red;cursor:zoom-in;}
	#GL:hover {fill:aqua;cursor:zoom-in;}
	#AU:hover {fill:orange;cursor:zoom-in;}
	#NZ:hover {opacity: 1;cursor:zoom-in;transition: opacity .3s ease-in-out;}
	#NZ{opacity: 0;}

	@media screen and (max-width: 600px) {
		h1{font-size: 4vw;}
		h2{font-size: 3vw;}
		h3{font-size: 1rem;}
		h4{font-size: 3.5vw;}
		h5{font-size: 4vw;}
		pe{font-size: 3vw;padding:1vw;margin:.05vw;}
		.taban{width:65vw;padding:15px;}
		.yanbolum{margin:0px;}
		.yanpanel{max-width:30vw;}
		.topnav a{float:left;}
		.topnav a:not(:first-child), .dropdown .dropbtn {display: none;}
		.topnav a.icon {float: right;display: block;}
		.topnav.responsive {position: relative;}
		.topnav.responsive .icon {position:absolute;right:0;top:0;}
		.topnav.responsive a {float:none;display:block;text-align:left;}
		.topnav.responsive .dropdown {float: none;}
		.topnav.responsive .dropdown-content {position: relative;}
		.topnav.responsive .dropdown .dropbtn {display:block;width:100%;text-align:left;}
	}

	footer{text-align: center;margin: 0 auto;display: grid;}
	.line-2{border-top: 1px solid var(--siyah);}