/*** style strony ***/
/*************************************************/

html, body { padding: 0; margin: 0; }
body { background: #333; color: #aaa; font-family: Verdana; }

a { text-decoration: none; }

main { width: 90%; max-width: 800px; margin: 0 auto; }

.hidden { display: none; }


/*** style animacji ***/
/*************************************************/

/* gizmo-radar-3d */
/* * * * * * * * * * * * * * * * * * * * * * * * */

@font-face {
	font-family: "Klingon";
	src: url('../klingon.ttf');
}

@keyframes oscilating-A {
	0% { height: 100%; top: 0; }
	50% { height: 30%; top: 35%; }
	100% { height: 100%; top: 0; }
}
@keyframes oscilating-B {
	0% { transform: rotate(0); transform: rotate(0); height: 100%; top: 0; }
	50% { transform: rotate(120deg); transform: rotate(120deg); height: 0.0215%; top: 49.98945%; }
	100% { transform: rotate(240deg); transform: rotate(240deg); height: 100%; top: 0; }
}
@keyframes typing {
	0% { width: 0; }
	60% { width: 36px; }
	100% { width: 36px; }
}
@keyframes change-color {
	0% { color: #fff; }
	59% { color: #fff; }
	60% { color: #ff0000; }
	67% { color: #fff; }
	73% { color: #ff0000; }
	80% { color: #fff; }
	100% { color: #fff; }
}

figure { margin: 0; }

#gizmo-radar-3d *::selection { color: inherit; background: transparent; }

#gizmo-radar-3d.anim.size-60 { width: 60px; height: 60px; }
#gizmo-radar-3d.anim.size-80 { width: 80px; height: 80px; }
#gizmo-radar-3d.anim.size-100 { width: 100px; height: 100px; }
#gizmo-radar-3d.anim.size-120 { width: 120px; height: 120px; }

#gizmo-radar-3d { position: relative; }
#gizmo-radar-3d .anim { border: 1px solid #fff; border-radius: 50%; position: absolute; }
#gizmo-radar-3d .anim.anim-1 { width: 100%; height: 100%; transform: rotate(45deg); animation: oscilating-A 1.4s linear infinite; }
#gizmo-radar-3d .anim.anim-2 { width: 100%; height: 100%; animation: oscilating-B 2.5s linear infinite; animation: oscilating-B 2.5s linear infinite; }

/* #gizmo-radar-3d .btn { position: relative; display: inline-block; height: 50px; width: 50%; text-align: center; color: white; background: gray; line-height: 50px; text-decoration: none; padding-bottom: 15%; background-clip: content-box; overflow: hidden; } */
/* #gizmo-radar-3d .btn:after { content: ""; position: absolute; top: 50px; left: 0; background-color: inherit; padding-bottom: 50%; width: 57.7%; z-index: -1; transform-origin: 0 0; transform-origin: 0 0; transform: rotate(-30deg) skewX(30deg); transform: rotate(-30deg) skewX(30deg); } */

#gizmo-radar-3d .triangle-outer-container { width: 46%; height: 46%; position: absolute; top: 36%; left: 33%; overflow: hidden; }
#gizmo-radar-3d .triangle-outer-container .triangle-outer-content 
	{ width: 100%; height: 94%; background-color: #f00; transform: rotate(58.5deg) skew(26deg); transform: rotate(58.5deg) skew(26deg); position: absolute; top: -55%; }

#gizmo-radar-3d .triangle-inner-container { width: 22.8%; height: 21.33%; position: absolute; top: 33%; left: 44%; overflow: hidden; }
#gizmo-radar-3d .triangle-inner-container .triangle-inner-content
	{ width: 100%; height: 94%; background-color: #000; transform: rotate(58.5deg) skew(26deg); transform: rotate(58.5deg) skew(26deg); position: absolute; top: 55%; }

#gizmo-radar-3d .text { width: 36px; position: absolute; top: 64px; left: 42px; color: #fff; font-size: 12px; font-family: Klingon; overflow: hidden; animation: typing 1.8s infinite; animation: typing 1.8s infinite; }
#gizmo-radar-3d .text .changing-color { animation: change-color 1.8s infinite; animation: change-color 1.8s infinite; }