:root {
  --arsenal-red: #EF0107;
	--font-size: 2;
}

body {
  padding: 2rem;
  font-family: monospace;
  background-color: var(--arsenal-red);
}

header {
	display: flex;
	justify-content: space-between;
	padding: 2rem;
}

.header-img {	
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: url('monkey.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}


/*
 * To get the radius or the hypoteneuse.
 * If you know the inner angle and the length of the side
 * The end / Math.sin(innerAngle) should provide the radius
*/

.ring {
	--character-width: 1ch;
	--inner-angle: calc((360 / var(--char-count)) * 1deg);
	--character-width: 1;
  --radius: calc((var(--character-width) / sin(var(--inner-angle))) * -1ch);
	position: relative;
	width: 150px;
	font-family: monospace;	
	font-size: calc(var(--font-size, 1) * 1rem);
	text-transform: uppercase;	
}
@media (prefers-reduced-motion: no-preference) {
  .ring {
  	animation: spin 6s infinite linear;  
  }
  @keyframes spin {
    to {
      rotate: -360deg;
    }
  }
}

.char {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform:
		translate(-50%, -50%)
		rotate(calc(var(--inner-angle) * var(--char-index)))
		translateY(var(--radius));
}

.headline {
	position: fixed;
	bottom: 3rem;
	font-size: calc(var(--font-size) * 2rem);
	font-weight: bold;
}