<main>
<div>
	<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Globcal_medium_resolution_globe.png/460px-Globcal_medium_resolution_globe.png>
	<div class=l>
		<a href=#>Formation</a><br>
		<a href=#>Atmosphere</a><br>
		<a href=#>Heat</a><br>
		<a href=#>Gravitation</a>
	</div>
</div>

<div>
	<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Globcal_medium_resolution_globe.png/460px-Globcal_medium_resolution_globe.png>
	<div class=r>
		<a href=#>Moon</a><br>
		<a href=#>Climate</a><br>
		<a href=#>Rotation</a><br>
		<a href=#>Orbit</a>
	</div>
</div>
</main>

img {
	height: 250px;
	float: left;
	shape-outside: circle(40%);
}

main > div { grid-area: 1/1; }

.r { transform: rotatey(180deg) translatex(250px); }

.r > a { display: inline-block; transform: rotatey(180deg) translatex(-40px); }

.l { transform: translatex(30px); }

main > div:nth-of-type(2) img { visibility: hidden; }

img + div { line-height: 70px; }

a { 
	font: bold 24px 'eb garamond'; 
	color: seagreen; 
	text-decoration: none; 
	padding: 10px; 
}

a:hover { background: rgba(0,0,0,.1);}

main {
	width: 500px;
	display: grid; 
	margin: auto; margin-top: calc(50vh - 125px);
	transform: translatex(125px);
}

body {
	user-select: none;
	-webkit-user-select:  none;
	-moz-user-select:  none;
}

@media (max-width: 650px) { main { transform: scale(.6); } }