css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="frame">
	<div class="bunting">
		<div class="bunting__row">
			<span>M</span>
			<span>E</span>
			<span>R</span>
			<span>R</span>
			<span>Y</span>
		</div>
		<div class="bunting__row">
			<span>C</span>
			<span>H</span>
			<span>R</span>
			<span>I</span>
			<span>S</span>
			<span>T</span>
			<span>M</span>
			<span>A</span>
			<span>S</span>
		</div>
	</div>

	<div class="chimney">
		<div class="brickwork">
			<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
		</div>

	</div>
	<div class="fireplace">

		<div class="brickwork_overflow">
			<div class="brickwork">
				<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
			</div>
		</div>

		<div class="mantle">
			<div class="mantle_top">
				<div class="santahat">
					<div class="band"></div>
					<div class="ball"></div>
				</div>
				<div class="candles">
					<div class="candle">
						<div class="wax">
							<i></i><i></i><i></i><i></i><i></i>
						</div>
					</div>
					<div class="candle">
						<div class="wax">
							<i></i><i></i><i></i><i></i><i></i>
						</div>
					</div>
					<div class="candle">
						<div class="wax">
							<i></i><i></i><i></i><i></i><i></i>
						</div>
					</div>
				</div>
				<div class="bear">
					<div class="ear"></div>
					<div class="ear"></div>
					<div class="head">
						<div class="mouth"></div>
					</div>
					<div class="body">
						<div class="arm"></div>
						<div class="arm"></div>
						<div class="leg"></div>
						<div class="leg leg_right"></div>
						<div class="heart"></div>
					</div>
				</div>

				<div class="stockings">
					<div class="stocking"></div>
					<div class="stocking"></div>
					<div class="stocking"></div>
					<div class="stocking"></div>
				</div>

				<div class="lights">
					<div class="light"></div>
					<div class="light"></div>
					<div class="light"></div>
					<div class="light"></div>
					<div class="light"></div>
					<div class="light"></div>
					<div class="light"></div>
					<div class="light"></div>
					<div class="light"></div>
					<div class="light"></div>
				</div>
			</div>

			<div class="brickwork_overflow">
				<div class="brickwork">
					<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
				</div>
			</div>

		</div>

		<div class="firehousing">

			<div class="fireglow"></div>

			<div class="fire">
				<div class="fire__flames">
					<div class="fire__flames__flame flames__flame--small"></div>
					<div class="fire__flames__flame"></div>
					<div class="fire__flames__flame flames__flame--small"></div>
				</div>
				<div class="wood_one"></div>
				<div class="wood_two"></div>
			</div>

			<div class="gate">
				<div class="gate__bars">
					<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
				</div>
			</div>

			<div class="firebase"></div>
		</div>

		<div class="present">
			<div class="present__bow"><i></i></div>
		</div>

		<div class="present present--small">
			<div class="present__bow"><i></i></div>
		</div>

	</div>

	<div class="rug"></div>

</div>
            
          
!
            
              html
	box-sizing: border-box
*, *:before, *:after
	box-sizing: inherit

html, body
	width: 100%
	height: 100%
	background: #62190b

.frame
	position: absolute
	top: 0
	left: 50%
	transform: translateX(-50%)
	width: 100%
	height: 100%
	min-height: 550px
	min-width: 600px
	background: #243118
	background: repeating-linear-gradient( 45deg, #243118, #243118 10px, #2d3e1e 10px, #2d3e1e 20px )
	display: flex
	flex-wrap: wrap
	align-items: center
	justify-content: start
	flex-direction: column
	overflow: hidden
	&:before
		content: ''
		display: block
		width: 100%
		height: 100%
		position: absolute
		top: 28rem
		left: 0
		background: #62190b
		z-index: 0
	&:after
		content: ''
		display: block
		position: absolute
		top: 28rem
		left: 0
		width: 100%
		height: 1.2rem
		background: #844033
		box-shadow: 0 -2px 0 #8a564a, 0 2px 0 #56170d
		z-index: 0
.bunting
	position: absolute
	top: 2rem
	left: 50%
	transform: translateX(-50%)
	width: 23rem
	height: 10rem
	z-index: 5
	font-size: 38px
	font-family: sans-serif
	font-weight: 900
	text-align: center
	color: #4e8638
	text-shadow: 1px 1px 4px rgba(black, 0.35)
	&__row
		position: relative
		display: inline-block
		height: 4rem
		overflow: hidden
		padding-top: 5px
		&:before
			content: ''
			display: block
			width: 135%
			position: absolute
			top: 0
			left: 50%
			transform: translate(-50%, -80%)
			height: 5rem
			border-radius: 100%
			border: 1px dotted black
		&:nth-child(1)
			span
				&:nth-child(1)
					top: 5px
					transform: rotate(10deg)
				&:nth-child(2)
					top: 11px
					transform: rotate(6deg)
				&:nth-child(3)
					top: 13px
				&:nth-child(4)
					top: 11px
					transform: rotate(-6deg)
				&:nth-child(5)
					top: 5px
					transform: rotate(-10deg)
		&:nth-child(2)
			span
				&:nth-child(1)
					top: 3px
					transform: rotate(10deg)
				&:nth-child(2)
					top: 8px
					transform: rotate(6deg)
				&:nth-child(3)
					top: 11px
					transform: rotate(4deg)
				&:nth-child(4)
					top: 12px
					transform: rotate(2deg)
				&:nth-child(5)
					top: 13px
				&:nth-child(6)
					top: 12px
					transform: rotate(-2deg)
				&:nth-child(7)
					top: 11px
					transform: rotate(-4deg)
				&:nth-child(8)
					top: 8px
					transform: rotate(-6deg)
				&:nth-child(9)
					top: 3px
					transform: rotate(-10deg)
				&:nth-child(4), &:nth-child(8)
					&:after
						display: none
					&:before
						transform: translateX(-50%)
	span
		position: relative
		display: inline-block
		margin: 0 2px
		&:before, &:after
			content: ''
			display: block
			width: 1px
			height: 6px
			background: rgba(black, 0.4)
			position: absolute
			top: -2px
			left: 50%
		&:before
			transform: translateX(-6px)
		&:after
			transform: translateX(6px)
		&:nth-child(even)
			color: #dd232a
.rug
	position: absolute
	top: 32rem
	left: 50%
	width: 22rem
	height: 8rem
	transform: translateX(-50%)
	background: #db2027
	border-radius: 100%
	z-index: 0
	opacity: 0.85
	&:before
		content: ''
		display: block
		position: absolute
		top: 50%
		left: 50%
		width: 95%
		height: 90%
		border-radius: 100%
		transform: translate(-50%, -50%)
		border: 1px dashed rgba(white, 0.3)
.chimney
	width: 11rem
	height: 14rem
	background: blue
	overflow: hidden
	box-shadow: 2px 2px 10px rgba(black, 0.2)
	.brickwork
		position: relative
		width: 140%
		left: -20%
.fireplace
	position: relative
	width: 19rem
	height: 17rem
	background: green
	display: flex
	flex-wrap: wrap
	align-items: center
	justify-content: start
	flex-direction: column
	box-shadow: 2px 2px 10px rgba(black, 0.2)
	z-index: 2
	&:after
		content: ''
		display: block
		position: absolute
		bottom: -0.7rem
		left: 0
		width: 19.55rem
		height: 2.35rem
		background: #6b6a6a
		transform: skew(10deg, 0deg)
		z-index: -1
	&:before
		content: ''
		display: block
		width: 19.8rem
		height: 0.6rem
		background: #5d5c5c
		position: absolute
		bottom: -1.3rem
		left: 0rem
		border-radius: 0 0 2px 0
	> .brickwork_overflow
		position: absolute
		width: 100%
		height: 100%
		overflow: hidden
		box-shadow: inset 0 0 0 1px rgba(black, 0.5)
	.brickwork
		position: absolute
		top: 0
		left: -5%
		width: 110%
	.present
		width: 4.2rem
		height: 3.2rem
		background: #273719
		position: absolute
		bottom: -1.1rem
		left: -1.6rem
		border-radius: 2px
		&--small
			transform: scale(0.75) translate(22px, 22px)
			background: #1d1b73
			&:before
				background: #2f2d8a !important
		&__bow
			position: absolute
			top: -1.2rem
			left: 50%
			width: 2.1rem
			height: 1rem
			transform: translateX(-50%)
			z-index: 1
			filter: drop-shadow(2px 2px 2px rgba(black, 0.2))
			i
				display: block
				position: absolute
				top: 4px
				left: 50%
				transform: translateX(-50%)
				width: 5px
				height: 8px
				border-radius: 2px
				background: #791c1d
				z-index: 1
			&:before, &:after
				content: ''
				display: block
				position: absolute
				top: 0
				width: 1rem
				height: 1rem
				background: #a71f20
			&:before
				left: 0
				border-radius: 100% 4px 4px 4px
				transform: rotate(-45deg)
			&:after
				right: 0
				border-radius: 4px 100% 4px 4px
				transform: rotate(45deg)
		&:after
			content: ''
			display: block
			position: absolute
			bottom: 0
			left: 50%
			width: 1rem
			height: 4rem
			background: #d71d29
			transform: translateX(-50%)
		&:before
			content: ''
			position: absolute
			top: 0
			left: 50%
			width: 110%
			height: 1.3rem
			background: #364720
			transform: translate(-50%, -50%) rotate(-3deg)
			border-radius: 2px
			box-shadow: 0 0 3px rgba(black, 0.15)
	.mantle
		position: relative
		width: 110%
		height: 40%
		background: green
		border-radius: 4px
		box-shadow: 2px 2px 10px rgba(black, 0.15)
		> .brickwork_overflow
			position: absolute
			top: 0
			left: 0
			width: 100%
			height: 100%
			overflow: hidden
			box-shadow: inset 0 0 0 1px rgba(black, 0.5)
			border-radius: 4px
			.brickwork
				width: 120%
				left: -10%
				top: 2.4rem
		&_top
			position: relative
			width: 104%
			height: 48%
			left: -2%
			&:after
				content: ''
				position: relative
				display: block
				width: 100%
				height: 100%
				top: 0
				left: 0
				background: #521e10
				border-radius: 4px
				z-index: 1
				box-shadow: 2px 2px 10px rgba(black, 0.2)
			.lights
				position: absolute
				top: 5px
				left: 2%
				width: 96%
				height: 4rem
				display: flex
				padding: 0 8%
				justify-content: space-between
				align-items: flex-start
				overflow: hidden
				z-index: 2
				&:before, &:after
					content: ''
					display: block
					width: 51%
					position: absolute
					top: -3.5rem
					height: 5rem
					border-radius: 100%
					border: 1px dotted #f8cf54
				&:before
					left: 5px
				&:after
					right: 5px
				.light
					position: relative
					width: 8px
					height: 20px
					overflow: hidden
					border-radius: 4px
					z-index: 1
					filter: drop-shadow(0 0 3px red)
					&:before
						content: ''
						position: absolute
						top: -35%
						left: 50%
						transform: translateX(-50%)
						width: 75%
						height: 100%
						background: red
						border-radius: 100%
					&:nth-child(1), &:nth-child(5), &:nth-child(6), &:nth-child(10)
						margin-top: 12px
					&:nth-child(2), &:nth-child(4), &:nth-child(9)
						margin-top: 21px
					&:nth-child(3), &:nth-child(8), &:nth-child(7)
						margin-top: 24px
					&:nth-child(7)
						margin-top: 20px
					&:nth-child(3n + 1)
						filter: drop-shadow(0 0 3px orange)
						&:before
							background: orange
					&:nth-child(3n + 2)
						filter: drop-shadow(0 0 3px yellow)
						&:before
							background: yellow

			.stockings
				.stocking
					position: absolute
					bottom: -3rem
					width: 2.8rem
					height: 1.2rem
					background: #63cdda
					border-radius: 100% 20px 10px 20px
					z-index: 2
					transform: rotate(-20deg)
					filter: drop-shadow(2px 2px 10px rgba(black, 0.2))
					&:nth-child(1)
						left: 2rem
					&:nth-child(2)
						left: 6rem
						background: #e15f41
						&:before
							background: #e15f41
					&:nth-child(3)
						right: 6rem
						background: #574b90
						&:before
							background: #574b90
					&:nth-child(4)
						right: 2rem
						background: #f5cd79
						&:before
							background: #f5cd79
					&:before
						content: ''
						display: block
						position: absolute
						bottom: 0.5rem
						right: 0.2rem
						width: 1.5rem
						height: 3rem
						background: #63cdda
						border-radius: 10px 0 4px 0
						transform: rotate(-8deg)
					&:after
						content: ''
						display: block
						position: absolute
						width: 1.8rem
						height: 0.7rem
						top: -2.4rem
						left: 0.75rem
						background: white
						border-radius: 3px 3px 4px 4px
						transform: rotate(-8deg)
			.candles
				position: absolute
				top: 2px
				left: 50%
				width: 30%
				height: 3.5rem
				transform: translate(-50%, -100%)
				display: flex
				justify-content: space-between
				align-items: flex-end
				z-index: 0
				.candle
					position: relative
					width: 1.4rem
					height: 2.3rem
					background: #fece56
					border-radius: 2px
					.wax
						width: 100%
						display: flex
						justify-content: center
						align-items: flex-start
						i
							display: block
							margin: 0 -1px
							width: 0.5rem
							height: 1rem
							border-radius: 20px
							background: #ffdf9c
							&:nth-child(2n)
								height: 0.75rem
							&:nth-child(3)
								height: 0.9rem
							&:nth-child(5)
								height: 0.5rem
					&:before
						content: ''
						display: block
						width: 5px
						height: 5px
						border-radius: 0 100% 100% 100%
						background: radial-gradient(circle 2em at bottom, rgba(255, 255, 0, 0.5), rgba(255, 130, 0, 0.5), rgba(255, 50, 30, 0.5))
						position: absolute
						top: -0.7rem
						left: 50%
						transform: translateX(-50%)  skewX(50deg) rotate(45deg)  scale(0.5, 5) rotate(15deg) skewX(-50deg)
					&:nth-child(1)
						transform: skew(0, -2deg)
						.wax
							transform: skew(0, -2deg)
					&:nth-child(2)
						height: 2.7rem
						transform: skew(0, 4deg)
						.wax
							transform: skew(0, 4deg)
					&:nth-child(3)
						transform: skew(0, 2deg)
						.wax
							transform: skew(0, 2deg)
			.santahat
				width: 4rem
				height: 4rem
				position: absolute
				top: -1.8rem
				left: -1rem
				transform: rotate(-5deg)
				z-index: 3
				.band
					position: absolute
					bottom: 0
					right: 0
					&:after
						content: ''
						width: 3rem
						height: 1rem
						border-radius: 4px
						position: absolute
						bottom: 1.6rem
						right: 0
						background: white
						transform: rotate(-6deg)
						z-index: 1
					&:before
						content: ''
						display: block
						position: absolute
						bottom: 2rem
						right: 0.4rem
						width: 2.5rem
						height: 2rem
						border-radius: 50% 50% 0 0
						background: red
						transform: rotate(-15deg)
				.ball
					position: absolute
					top: 0.3rem
					left: 0.75rem
					height: 2.8rem
					width: 0.9rem
					background: red
					border-radius: 50% 0 50% 50%
					transform: rotate(20deg)
					&:after
						content: ''
						width: 1rem
						height: 1rem
						background: white
						position: absolute
						bottom: -0.8rem
						left: 50%
						transform: translateX(-50%)
						border-radius: 100%
			.bear
				position: absolute
				top: -2.5rem
				right: 0.5rem
				width: 2.5rem
				height: 3rem
				z-index: 3
				&:after
					content: 'Merry Christmas'
					position: absolute
					bottom: 8px
					left: 10px
					width: 20px
					font-size: 4px
					line-height: 5px
					color: white
					font-family: 'Georgia', sans-serif
					text-align: center
					z-index: 2
				.ear
					position: absolute
					top: -0.1rem
					width: 0.9rem
					height: 0.9rem
					border-radius: 100%
					background: #df8a2f
					z-index: 1
					&:before
						content: ''
						display: block
						width: 65%
						height: 65%
						background: #fabf70
						border-radius: 100%
						position: absolute
						bottom: 10%
					&:nth-child(1)
						left: 0
						&:before
							left: 14%
					&:nth-child(2)
						right: 0
						&:before
							right: 14%
				.head
					position: absolute
					top: 0
					left: 50%
					transform: translateX(-50%)
					width: 1.5rem
					height: 1.5rem
					background: #df8a2f
					border-radius: 100%
					z-index: 2
					&:before, &:after
						content: ''
						display: block
						width: 2px
						height: 2px
						border-radius: 100%
						background: #4a2804
						position: absolute
						top: 35%
					&:before
						left: 22%
					&:after
						right: 22%
					.mouth
						position: absolute
						bottom: 0
						left: 50%
						transform: translateX(-50%)
						width: 0.9rem
						height: 0.9rem
						background: #fdbe71
						border-radius: 100%
						&:before
							content: ''
							display: block
							position: absolute
							top: 3px
							left: 50%
							transform: translateX(-50%)
							width: 0.38rem
							height: 0.2rem
							background: #4a2804
							border-radius: 100%
				.body
					position: absolute
					top: 0.9rem
					left: 50%
					transform: translateX(-50%)
					width: 1.8rem
					height: 2rem
					border-radius: 100%
					background: orange
					z-index: 1
					&:before
						content: ''
						display: block
						position: absolute
						top: 0
						left: 50%
						transform: translateX(-50%)
						width: 46%
						height: 100%
						border-radius: 100%
						background: white
						z-index: 2
					.arm
						position: absolute
						top: -0.1rem
						width: 0.6rem
						height: 1.5rem
						background: #d88c31
						border-radius: 100% 100% 10px 10px
						z-index: 4
						box-shadow: 0 0 5px rgba(black, 0.2)
						&:nth-child(1)
							left: -0.1rem
							transform: rotate(40deg)
						&:nth-child(2)
							right: 0rem
							transform: rotate(-40deg)
					.leg
						position: absolute
						bottom: -5px
						left: -2px
						width: 0.9rem
						height: 1.5rem
						background: #d88c31
						border-radius: 30px
						transform: rotate(45deg)
						overflow: hidden
						&:before
							content: ''
							position: absolute
							bottom: 0
							left: 0
							display: block
							height: 0.5rem
							width: 100%
							border-radius: 100%
							background: rgba(white, 0.2)
						&_right
							left: initial
							right: -2px
							transform: rotate(-45deg)
					.heart
						position: absolute
						bottom: -2px
						left: 50%
						width: 52px
						height: 20px
						transform: scale(0.5) translateX(-50%)
						transform-origin: 0 0
						z-index: 3
						&:before, &:after
							position: absolute
							content: ""
							left: 25px
							top: 0
							width: 25px
							height: 40px
							background: red
							border-radius: 50px 50px 0 0
							transform: rotate(-45deg)
							transform-origin: 0 100%
						&:after
							left: 0
							transform: rotate(45deg)
							transform-origin: 100% 100%

	.firehousing
		position: relative
		width: 54%
		height: 60%
		background: rgba(black, 0.2)
		overflow: hidden
		&:before, &:after
			content: ''
			position: absolute
			top: -8px
			display: block
			width: 0.5rem
			height: 100%
			background: #52170c
			z-index: 2
		&:before
			left: 0
			transform: skew(0, -60deg)
		&:after
			right: 0
			transform: skew(0, 60deg)
		.fireglow
			position: absolute
			top: 50%
			left: 50%
			width: 0
			height: 0
			transform: translate(-50%, -50%)
			// background: linear-gradient(135deg, #f9cb04 0%,#d87029 100%)
			border-radius: 100%
			opacity: 0.5
			box-shadow: 0 0 146px 85px red
		.gate
			position: absolute
			bottom: 0
			left: 0
			width: 100%
			height: 40%
			padding: 0 15px
			z-index: 1
			&__bars
				width: 100%
				height: 100%
				display: flex
				justify-content: space-between
				align-items: start
				&:before
					content: ''
					position: absolute
					top: 50%
					left: 0
					width: 100%
					height: 2px
					background: black
				i
					position: relative
					display: block
					width: 2px
					height: 100%
					background: black
					&:before
						content: ''
						position: absolute
						top: 0
						left: 50%
						transform: translateX(-50%)
						display: block
						width: 8px
						height: 8px
						background: black
						border-radius: 100%
		.fire
			position: absolute
			bottom: 0
			left: 50%
			transform: translateX(-50%)
			width: 50%
			height: 80%
			z-index: 1
			&__flames
				position: absolute
				bottom: 1.4rem
				left: 50%
				transform: translateX(-45%) rotate(8deg)
				width: 75%
				height: 70%
				&:before
					content: ''
					display: block
					position: absolute
					top: 50%
					left: 50%
					width: 0
					height: 0
					border-radius: 100%
					background: transparent
					box-shadow: 0 0 106px 55px rgba(yellow, 0.9)
					z-index: 0
				&__flame
					display: block
					width: 30px
					height: 30px
					border-radius: 0 100% 100% 100%
					background: radial-gradient(circle 2em at bottom, rgba(255, 255, 0, 0.5), rgba(255, 130, 0, 0.5), rgba(255, 50, 30, 0.5))
					position: absolute
					bottom: 2rem
					left: 50%
					transform: translateX(-50%) skewX(50deg) rotate(45deg)  scale(0.5, 5) rotate(15deg) skewX(-50deg)
					&--small
						transform: translateX(-50%) skewX(50deg) rotate(45deg)  scale(0.3, 4) rotate(15deg) skewX(-50deg)
					&:nth-child(1)
						margin-left: -20px
						margin-bottom: -10px
					&:nth-child(3)
						margin-left: 20px
						margin-bottom: -10px
			.wood_one
				position: absolute
				bottom: 0.8rem
				left: 50%
				width: 4.2rem
				height: 1rem
				background: #310c08
				transform: rotate(20deg) translateX(-50%)
				box-shadow: -2px 3px 32px rgba(255, 255, 255, 0.17)
				z-index: 1
				&:before
					content: ''
					position: absolute
					top: 0
					left: -0.3rem
					display: block
					width: 0.6rem
					height: 100%
					border-radius: 100%
					background: #310c08
				&:after
					content: ''
					position: absolute
					top: 0
					right: -0.3rem
					display: block
					width: 0.6rem
					height: 100%
					border-radius: 100%
					background: #310c08
					box-shadow: inset 0 0 0 1px #310c08, inset 0 0 0 3px #b68752, inset 0 0 0 4px #310c08, inset 0 0 0 6px #b68752
			.wood_two
				position: absolute
				bottom: 2.2rem
				left: 50%
				width: 4.2rem
				height: 1rem
				background: #310c08
				transform: rotate(-20deg) translateX(-50%)
				&:before
					content: ''
					position: absolute
					top: 0
					right: -0.3rem
					display: block
					width: 0.6rem
					height: 100%
					border-radius: 100%
					background: #310c08
				&:after
					content: ''
					position: absolute
					top: 0
					left: -0.3rem
					display: block
					width: 0.6rem
					height: 100%
					border-radius: 100%
					background: #310c08
					box-shadow: inset 0 0 0 1px #310c08, inset 0 0 0 3px #b68752, inset 0 0 0 4px #310c08, inset 0 0 0 6px #b68752
		.firebase
			position: absolute
			bottom: 0
			left: 0
			width: 100%
			height: 1.5rem
			background: #52170c
.brickwork
	display: flex
	align-items: start
	justify-content: center
	flex-wrap: wrap
	i
		width: 2.5rem
		height: 1.1rem
		background: #8e1f1d
		box-shadow: inset 0 0 0 1px #9a4537
		&:nth-child(2n)
			width: 1.8rem
			background: #7b1d17
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console