/* This trick for curved text is based on this seriously awesome tutorial by Amit Sheen: 
frontendmasters.com/blog/pure-css-circular-text-without-requiring-a-monospace-font/
*/

.textContainer {
  position: relative;
  perspective: 15em;
  
  span {
    position: absolute;
    width: 1em;
    font-size: 60px;
    white-space: nowrap;
    text-indent: calc(var(--i) * -1em);
    overflow: hidden;
    transform:
      translate(-50%, -50%)
      rotate(calc(15deg * var(--i)))
      translateY(calc(-1em / sin(15deg)))
      rotateX(-90deg); 
  }
}

#box1 {
	display: grid;
	place-items: center;
}

/* end curved text section */

nav a {
	color: black;
}

nav a:visited {
	color: black;
}

body {
	font-family: menlo, monospace;
	font-size: small;
	color: #000;
	background-color: #39815A;
	
}

#box {
	margin: auto;
	max-width: 80ch;
	background-color: #FD5;
	padding: 0 1ch;
	display: flow-root;

	border: solid #000;
}

#box1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	background-color: #FD5;
	border: solid 5px;

	border-radius: 50%;
	width: 300px;
	height: 300px;
}

#box2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	transform: translate(-50%, -50%);
	background-color: #FD5;
	padding: 0 1ch;
	text-align: center;
	border: solid #000 4px;
	font-size: large;
	
}

#box2 hr {
	border-width: 2px;
}

#box2 a {
	color: black;	
}

#flex {
	
}


div, body, html {
	padding: 0px;
	margin: 0px;
}





h1, h2, h3, h4, h5, h6 {
	color: #000;
}

a {
	color: ;
}

a:visited {
	color: #03a;
}

hr {
	color: #000;
	border-style: solid;
}

footer {
	text-align: center;
}

#prebox {
	padding: 10px;
}