section {
	padding: 1em;
	margin-block: 1lh;
	width: 50vw;
	background: forestgreen;
	color: #fff;

	overflow: visible; /* change to hidden if you want the overhang on the image to be removed */
}
h1 {
	font-size: 2em;
}
p {
	margin-block: 1lh;
	line-height: 1.2;
}
img {
	max-width: 100%;
	width: 400px;
	shape-margin: 0.75em;
}
.elephants {
	float: right;
	margin-right: -15vw;
	shape-outside: url(https://assets.codepen.io/4787486/elephant-and-calf.svg);
}
.tree {
	float: left;
	margin-left: -15vw;
	shape-outside: url(https://assets.codepen.io/4787486/tree.svg);
}
.orion {
	float: left;
	margin-top: 3em;
	margin-left: -12vw;
	shape-outside: url(https://assets.codepen.io/4787486/orion-III.svg);
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	padding: 1em;
	min-height: 100vh;
	display: grid;
	place-items: center;
	font-family: system-ui, sans-serif;
	font-size: 1em;
	font-weight: 200;
	line-height: 1;
}

.roma {
	display: grid;
	place-content: center;
	position: fixed;
	bottom: 2vmin;
	right: 2vmin;
	width: 5.5vmin;
	min-width: 30px;
	aspect-ratio: 1;
	background-image: linear-gradient(#7070ff 50%, #008000 0);
	background-size: cover;
	opacity: 0.5;
	transition: opacity 0.3s ease, scale 0.3s ease;
}
.roma img {
	max-width: 100%;
	transition: rotate 10s linear;
}

.roma:hover {
	opacity: 1;
	scale: 1.2;
}
.roma:hover > img {
	rotate: -720deg;
}