<main>
	<img src="bottle.png" alt="A tall refreshing and unopened bottle of Coca-Cola, complete with red bottle cap and the classic Coke logo in white.">
	<form>
		<div>
			<input type="radio" id="one" name="coke" checked>
			<label for="one">One Bottle</label>
		</div>
		<div>
			<input type="radio" id="six" name="coke">
			<label for="six">Six Pack</label>
		</div>
		<div>
			<input type="radio" id="twelve" name="coke">
			<label for="twelve">Twelve Pack</label>
		</div>
		<div>
			<input type="radio" id="crate" name="coke">
			<label for="crate">Entire Crate</label>
		</div>
	</form>
</main>

body {
	user-select: none;
	background-color: ghostwhite;
}

main {
	margin: auto;
	margin-top: calc(50vh - 250px);
	width: 380px;	
}

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

img {
	filter: brightness(1.5);
	float: left;
	height: 500px;
	shape-outside: url("bottle.png");
	width: auto;
}

form { margin-top: 4rem; }

div { margin-bottom: 1.5rem; }

input {
	appearance: none;
	background:  linear-gradient(45deg, pink, beige);
	border: 10px solid #231714;
	border-radius: 50%;
	box-sizing: content-box;
	cursor: pointer;
	height: 25px;
	margin-left: 20px;
	position: relative;
	top: 1rem;
	width: 25px;
}

input:checked { background: #d02017; }
input:checked ~ label{ font-weight: bold; }

label {
	background: linear-gradient(to right, #231714 40%, #d02017);
	background-clip: text;
	color: transparent;
	display: inline-block;
	font-family: 'Satisfy', cursive;
	font-size: 24px;
	width: max-content;
}

input:hover ~ label {
	text-decoration-color: #d02017;
	text-decoration-line: underline;
	text-decoration-style: solid;
}