body {
			width: 80%;
			margin: auto;
			padding: 3%;
			background-color: sandybrown;

		}

		.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAVKADAAQAAAABAAAAVAAAAAC3aM1AAAACz0lEQVR4Ae2ay27CQBRDk4r+/wd3QdUdPYPkWL4DLNxVzX3mMFhJ6XmIn/vPcRcpW8Pn93E+DlD77M5/3OXvd877YkJ1RqBAM35LdYEuSLIXTuVJqj09ROUz/ur5nKf2Zz73Z31PKAmFukBDgCwvUBIJtfRQeoQ7jx6U9lPzOU/lM672U/17Qkk01AUaAmR5gZJIqG+sVx7CfGp6TNqP/ZV+9Tzu0xNKIqEu0BAgywuUREL972+Nz3q92xPd+W7+s2t2XuO8nlCH3oXcAr0AyUkpUIfWhdwbPeBCTZTCeeq+kXG33l027d8T6hIX+QUqALnhAnWJiXz5LE9PEf2WsFvPfHooNQcyrvpN1/eEkmioCzQEyPICJZFQx8/y9CjuQ09jfLfevR/794QOv6MFWqDDBIbbLd/Lv9vzhq9vvB09kwP6kSeRUBdoCJDlBUoioV6e5ekRrqem9eH1LOWv3qcndHkLshcKNOO3VBfogiR7YXmWdz3Hzc/Wna9291f5PaHD71GBFugwgeF2y7M8+7v3oaxXnsP83Trdh/Xctx95Egl1gYYAWV6gJBLq7R4a7vfx5fTUntDht6xAC3SYwHC7xUOn7zu5b9qf/VxNz2M992M+46zvR55EQl2gIUCWFyiJhHr5Ton9XA+hx7Ce/V3Nfu485rvzmc99ekJJKNQFGgJkeYGSSKjt+1B6hutJql7F1fWm9ezPfoxT94SSSKgLNATI8gIlkVDL+1D2dz2T9UqzPz2McfZTcea7WvXvCXWJivwCFYDccIG6xET+ch/KfOUZzP907Xqyuh726wlVxMx4gZrAVHqBKkJm3L4PZX96CONK7/Zo7pfOYz9eX08oiYS6QEOALC9QEgm1/B979lceRI9R+ezPesaVduexXzq/J5REQ12gIUCWFyiJhNr2UM6jZykP2p3P/aY192f/nlASCXWBhgBZXqAkEupfkTzhlJQyJDQAAAAASUVORK5CYII=") 28 /  28px / 0 round;
		border-width:  50px;
		border-style: solid;
		position: relative;
     }

		header, footer {
			text-align: center;
		}

    header pre{
		font-size: 20px;
		text-align: center;

    }


.circle {
	position: fixed;
	background: red;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;

}

.circle1 {
	top:100px;
	left:40px;
	width:80px;
	height:80px;
	animation: bounce1 1s infinite alternate cubic-bezier(.3,1.6,.6,1);
}

.circle2{
	top:140px;
	right:60px;
	width:100px;
	height:100px;
	animation: bounce2 1.1s infinite alternate cubic-bezier(.3,1.6,.6,1);
}

.circle3{
	top:500px;
	left:120px;
	width:130px;
	height:130px;
	animation: bounce3 2.5s infinite alternate cubic-bezier(.3,1.6,.6,1);
}

.circle4{
	top:180px;
	left:350px;
	width:110px;
	height:110px;
	animation: bounce4 2s infinite alternate cubic-bezier(.3,1.6,.6,1);
}

.circle5{
	top:400px;
	right:600px;
	width:50px;
	height:50px;
	animation: bounce5 1.8s infinite alternate cubic-bezier(.3,1.6,.6,1);
}

.circle6{
	top:400px;
	right:300px;
	width:150px;
	height:150px;
	animation: bounce6 3s infinite alternate cubic-bezier(.3,1.6,.6,1);
}

@keyframes bounce1 {
	0% { transform: translateY(0) ; }
	50% { transform: translateY(-100px) ; }
	100% { transform: translateY(0) ; }
}

@keyframes bounce2 {
	0% { transform: translateY(0) scale(1.15, .85); }
	50% { transform: translateY(100px) scale(.9, 1.1); }
	100% { transform: translateY(0) scale(1.15, .85); }
}

@keyframes bounce3 {
	0% { transform: translateY(0) ; }
	50% { transform: translateY(-100px) ; }
	100% { transform: translateY(-200px) ; }
}

@keyframes bounce4 {
	0% { transform: translateY(0) scale(1.15, .85); }
	50% { transform: translateY(-100px) scale(.9, 1.1); }
	100% { transform: translateY(0) scale(1.15, .85); }
}

@keyframes bounce5 {
	0% { transform: translateY(0) scale(1.15, .85); }
	50% { transform: translateY(120px) scale(.9, 1.1); }
	100% { transform: translateY(0) scale(1.15, .85); }
}

@keyframes bounce6 {
	0% { transform: translateY(0) scale(1.15, .85); }
	50% { transform: translateY(-180px) scale(.9, 1.1); }
	100% { transform: translateY(0) scale(1.15, .85); }
}

@font-face{
	font-family: "MysteryQuest";
	src: url("./MysteryQuest-Regular.ttf") format("truetype");
}

		h1{
			font-family:"MysteryQuest", cursive;
			font-size: 50px;
			color: maroon;
			text-align: center;
		}

		header pre{
			text-align: center;
			font-size: 100%;
		}


    h2{
	   font-family: monospace;
		 font-size: 30px;
	   text-align: center;
	   color: black;
		 background-color: yellow;
		 border-radius: 5px 70px 5px 70px;
      }

		.article1 {
			font-family: monospace;
			font-size: 18px;
			text-align: justify;
			color: maroon;
			background-color: coral;
			border: red dotted;
			padding: 36px;
			border-radius: 10%;
		}

		.article1 img{
			display: block;
			width:900px;
			height:auto;
			margin:0 auto;
		}

		.tooltip{
			position: relative;
			display: inline-block;
			cursor: pointer;

		}

		.tooltiptext{
			visibility: hidden;
			width: 220px;
			bottom: 105%;
			left: 50%;
			margin-left: -60px;
			background-color: yellow;
			font-family: monospace;
			font-size: 12px;
			text-align: justify-all;
			padding: 10px;
			border-radius: 20px;
			position: absolute;
		}

		.tooltip:hover .tooltiptext{
			visibility: visible;
		}

		.image-row{
			display: flex;
			justify-content: center;
			gap: 10px;
		}

		.image-row img{
			width: 180px;
			height: auto;
		}


		.step-text{
			color: black;
			font-size:40px;
			font-family: courier new;
			text-align: center;
		}

		.left-img{
			display: block;
			margin:10px 0 10px 0;
			margin-right:auto;
			width:140px !important;
			height:auto !important;
		}

		.right-img{
			display: block;
			margin:10px 0 10px 0;
			margin-left:auto;
			width:140px !important;
			height:auto !important;
		}

		.angel-row{
			display:flex;
			justify-content: center;
			align-items:center;
			gap:5px;
		}

		.angel-row img{
			width:120px;
			height:auto;
		}


.baguette-footer {
	position: relative;
	width: 80%;
	margin: auto;
	text-align: center;
}

.baguette-footer img{
	width: 100%;
	display: block;
}

.baguette-footer p{
	position: absolute;
	top: 50%;
	left: 20%;
	font-size: 20px;
	background-color: sandybrown;
	padding: 12px;
	border-radius: 50px;

}