@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap');
@font-face {
  font-family: Enchanted Land;
  src: url('../images/enchanted_land.otf');
}

*::selection { background: transparent; color: inherit; }


body {
	min-height: 100vh;
	color: #e8d9a5;
	display: flex; align-items: center; justify-content: center;
	margin: 0; padding: 0;
}

a { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; }
h1 { font-family: Enchanted Land; font-size: 3.66rem; text-shadow: 1px 1px 2px #2f211b, -1px 1px 2px #2f211b, 1px -1px 2px #2f211b, -1px -1px 2px #2f211b, 6px 4px 0 #000; }


.ui-loader { display: none; }


.paper-bg { border-image: url('/templates/_szuflada/images/ramka-01.png') 30 / 20px / 3px round; background-position: 38% 14%; }

#areas-wrapper { width: 100%; max-width: 800px; display: flex; margin-top: 20px; }

#link-area { width: 300px; }
#link-area a { display: block; font-family: Enchanted Land; color: #e8d9a5; font-size: 32px; text-shadow: 1px 1px 0 #2f211b, -1px 1px 0 #2f211b, 1px -1px 0 #2f211b, -1px -1px 0 #2f211b; position: relative; }
#link-area a span { transition: 0.33s; }
#link-area a:before {
	content: '*';
	width: 15px; height: 15px; display: block;
	position: absolute; top: 10px; left: 0;
	font-size: 60px; line-height: 70px;
	transform: rotate(-90deg) scale(0); transition: 0.33s;
}
#link-area a:hover span { padding-left: 15px; }
#link-area a:hover:before { transform: rotate(-20deg) scale(1); }

#link-area a[item-id="101"] { display: none; }

#desc-area { width: 320px; height: 320px; padding: 30px; overflow: hidden; }
#desc-area .desc-wrapper { height: 100%; position: relative; }
#desc-area .desc-wrapper .desc {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0;
	font-family: Patrick Hand SC; font-size: 28px; color: #333; text-align: center; line-height: 28px;
	opacity: 0;
}
#desc-area .desc-wrapper .desc.active { opacity: 1; }
#desc-area .desc-wrapper .desc.item-0 { flex-wrap: wrap; align-content: center; }
#desc-area .desc-wrapper .desc.item-0 h3 { font-size: 40px; font-weight: 300; margin: 38px 0 15px 0; }
#desc-area .desc-wrapper .desc.item-0 span { font-size: 16px; margin-top: 30px; animation: NieWidzialasTego 4s forwards; }

@keyframes NieWidzialasTego {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@media (max-width: 767px) {
	#desc-area { display: none; }
}




/**************************************************/
/*** OLD VERSION **********************************/
/**************************************************/

/*
#current-position-widget .paper-bg { border-image: url('/templates/_szuflada/images/ramka-01.png') 30 / 16px / 3px repeat; }



#current-position-widget {}
#current-position-widget nav { display: flex; justify-content: space-between; }

#current-position-widget { position: absolute; top: 100px; left: 0; right: 0; text-align: center; }
#current-position-widget a {
	width: calc(100% - 42px); height: 100%;
	font-size: 2.66rem; color: rgba(33, 33, 33, 0.75); font-family: 'Dancing Script', cursive; text-shadow: 0 0 3px rgba(33, 33, 33, 0.666);
	position: absolute; top: 0; left: 0; padding: 0 20px;
	transition: 0.82s; z-index: 10;
}
#current-position-widget a.opacity-0 { opacity: 0; z-index: 1; }



#graphical-widget { width: 450px; height: 450px; margin-top: 20px; position: relative; overflow: hidden; }
#graphical-widget .world-container { position: relative; }
#graphical-widget .world { width: 1000px; height: 1000px; position: absolute; top: 300px; left: -275px; border: 3px solid #000; border-radius: 50%; transition: 1s; }
#graphical-widget .place { width: 100px; height: 100%; position: absolute; top: 0; left: calc(50% - 50px); }
#graphical-widget .place a {
	display: block; position: absolute; font-size: 24px; background-size: 100% auto; background-repeat: no-repeat; background-position: center center; filter: brightness(0.666);
}
#graphical-widget .place a.sz-item-szuflada {
	width: 140px; height: 128px; top: -66px; left: -22px; 
	background-image: url('/images/_szuflada/sz-szuflada.png');
}
#graphical-widget .place a.sz-item-cymelium {
	width: 170px; height: 160px; top: -122px; left: -36px;
	background-image: url('/images/_szuflada/sz-cymelium.png');
}
#graphical-widget .place a.sz-item-dziennik-snow {
	width: 170px; height: 140px; top: -100px; left: -46px;
	background-image: url('/images/_szuflada/sz-dziennik-snow-v2.png');
}
#graphical-widget .place a.sz-item-lormidia {
	width: 140px; height: 150px; top: -100px; left: -20px;
	background-image: url('/images/_szuflada/sz-lormidia.png');
}


#graphical-widget .btn {
	width: 60px; height: 60px; border: 0; padding: 0;
	background-image: url('/templates/_szuflada/images/nav-arrow-empty.png'); background-size: 100% auto; background-position: center; background-repeat: no-repeat; background-color: transparent;
	position: absolute; top: calc(50% - 30px);
	cursor: pointer;
}

#graphical-widget .btn:before, #graphical-widget .btn:after {
	content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: 0.66s;
	background-size: 100% auto; background-position: center; background-repeat: no-repeat; background-color: transparent;
}
#graphical-widget .btn:before { background-image: url('/templates/_szuflada/images/nav-arrow-half.png'); }
#graphical-widget .btn:after { background-image: url('/templates/_szuflada/images/nav-arrow-full.png'); }

#graphical-widget .btn.btn-prev { left: 18px; transform: scaleX(-1); }
#graphical-widget .btn.btn-next { right: 18px; }

#graphical-widget .btn:hover:before,  #graphical-widget .btn:hover:after { opacity: 1; }
#graphical-widget .btn:hover:before { opacity: 1; transition: 0.75s; }
#graphical-widget .btn:hover:after { opacity: 1; transition: 2s 0.4s; }


@media (max-width: 767px) {
	#current-position-widget nav button { display: none; }
	#current-position-widget a { font-size: 7vw; }
	
	#graphical-widget { width: 80vw; height: 80vw; }
	#graphical-widget .world { width: 250vw; height: 250vw; top: 60vw; left: -85vw; }
	#graphical-widget .place a.sz-item-szuflada { width: 25vw; height: 25vw; top: -12.66vw; left: calc(50% - 12vw); }
	#graphical-widget .place a.sz-item-cymelium { width: 25vw; height: 25vw; top: -19vw; left: calc(50% - 12vw); }
	#graphical-widget .place a.sz-item-dziennik-snow { width: 25vw; height: 25vw; top: -17vw; left: calc(50% - 12vw); }
	#graphical-widget .place a.sz-item-lormidia { width: 25vw; height: 25vw; top: -16.66vw; left: calc(50% - 12vw); }
}
*/