/* 
CSS Document 

*/

.title {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 20px;
	font-size: 32px;
	font-weight: 500;
	color: #463979;
}

.subtitle2 {
	text-align: center;
	max-width: 700px;
	margin: auto;
	font-size: 18px;
	line-height: 1.6;
	color: #111;
}

		* {
			box-sizing: border-box;
		}

		.app {
			width: 100%;
			max-width: 1000px;
			background: rgba(255, 255, 255, 0.4);
			border-radius: 20px;
			padding: 30px;
			display: grid;
			grid-template-columns: 320px 1fr;
			gap: 40px;
			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
		}

		h1 {
			margin-top: 0;
			font-size: 28px;
		}

		.controls {
			display: flex;
			flex-direction: column;
			gap: 18px;
		}

		.control-group {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		label {
			font-weight: bold;
			font-size: 14px;
		}

		select,
		input [type="color"]{
			width: 100%;
			padding: 12px;
			border-radius: 12px;
			border: none;
			font-size: 16px;
		}

		input [type="color"] {
			height: 48px;
			padding: 4px;
			cursor: pointer;
		}

		.preview-area {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 500px;
			background: radial-gradient(circle, white, white);
			border-radius: 24px;
			overflow: hidden;
			position: relative;
		}

		.lamp-glow {
			width: 360px;
			height: 360px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			transition: all 0.4s ease;
		}

		.circle {
			width: 360px;
			height: 360px;
			border-radius: 50%;
		}

		.rectangle {
			 width: 420px;
			 height: 260px;
			 border-radius: 30px;
		}

		.star {
 			 width: 360px;
 			 height: 360px;
  			 border-radius: 0;
 			 clip-path: polygon(
  			  50% 0%,
    		  61% 35%,
   			  98% 35%,
			  68% 57%,
			  79% 91%,
		      50% 70%,
			  21% 91%,
			  32% 57%,
			  2% 35%,
			  39% 35%);
}

		.motif {
			font-size: 120px;
			transition: color 0.3s, transform 0.3s;
			z-index: 2;
		}

		.small-motif {
			position: absolute;
			font-size: 42px;
			opacity: 0.65;
		}

		.small-motif:nth-child(2) { top: 60px; left: 80px; }
		.small-motif:nth-child(3) { top: 100px; right: 60px; }
		.small-motif:nth-child(4) { bottom: 70px; left: 70px; }
		.small-motif:nth-child(5) { bottom: 90px; right: 90px; }

		.rotate {
			animation: rotateAnimation 8s linear infinite;
		}

		.pulse {
			animation: pulseAnimation 2s ease-in-out infinite;
		}

		.float {
			animation: floatAnimation 3s ease-in-out infinite;
		}

		.shake { 
			animation: shakeAnimation 0.7s ease-in-out infinite
		}

		@keyframes rotateAnimation {
			from {transform: rotate(0deg);}
			to {transform: rotate(360deg);}
		}

		@keyframes pulseAnimation {
			0%, 100% {
				transform: scale(1);
				opacity: 0.85;
			}
			50% {
				transform: scale(1.15);
				opacity: 1;
			}
		}
		
		@keyframes floatAnimation {
			0%, 100% {transform: translateY(0);}
			50% {transform: translateY(-25px);}
		}

		@keyframes shakeAnimation {
			0%, 100% {transform: translateX(0);}
			25% { transform: translateX(-8px);}
			75% {transform: translateX(8px);}
		}

		@media (max-width: 800px) {
			.app {
				grid-template-columns: 1fr;
			}

			.lamp-glow {
				width: 280px;
				height: 280px;
			}

			.motif {
				font-size: 90px;
			}
		}