* {
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
  background: black linear-gradient(147.5deg, #1d1e1f, black 60%) no-repeat top left / 100% 100%;
	color: white;
	font-family: serif;
	text-align: center;
	overflow: hidden;
}

div#cove:before {
	content: ' ';
	display: block;
  width: 60vmin;
	height: 60vmin;
	border-radius: 100%;
	border: dotted gray 5vmin;
	position: absolute;
	inset: -6.25vmin;
	background-color: dimgray;
	z-index: -1000;
	transition: border-color .5s, background-color .25s;
}

div#cove:after {
	content: ' ';
	display: block;
  width: 72.5vmin;
	height: 72.5vmin;
	border-radius: 100%;
	position: absolute;
	inset: -7.5vmin;
	background-color: dimgrey;
	z-index: -1001;
	box-shadow: 2vmin .5vmin 0 #1d1e1f, 2vmin -.5vmin 0 #1d1e1f;
	transition: background-color .25s, box-shadow .5s;
}

div#cove:hover:after {
	box-shadow: 2vmin .5vmin 0 #3d3e3f, 2vmin -.5vmin 0 #3d3e3f;
}

div#cove:hover:before {
	border: dotted lightgray 5vmin;
}

div#cove:hover:after, div#cove:hover:before {
	background-color: #8a8c8e;
}

div#cove {
	display: block;
  width: 57.5vmin;
	height: 57.5vmin;
	position: relative;
	left: -2vmin;
	margin: calc(50vh - 28.75vmin) auto 0 auto;
	border-radius: 100%;
	padding: 30px;
  background: black url('thecove.jpg') no-repeat center / cover;
}

#logo {
	position: absolute;
	inset: 0;
}

#logo > img {
	position: absolute;
	inset: calc(50% - 9vmin) auto auto calc(50% - 22.5vmin);
	width: 45vmin;
	height: 11.5vmin;
	z-index: 1;
}

a {
	text-decoration: none;
}