/* This will make the outer div element take up the entire space of the web page and vertically center it */
#container
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

#content
{
  width: 600px; /*sets width for the content container */
  height: 600px; /* sets height for the content container */
  border: 5px solid black; /* sets border size and color for content container */
  border-radius: 50%; /* turns border into a circle*/
  line-height: 80%;
  font-size: 15px;
	overflow: hidden; /* hides content that extend past the container borders */
  text-align: justify;
  
  background-image: url('https://projects.codecraftworks.com/web/5OTS03N4mOEdg6UgVDh4/assets/cat.jpg');
  
  background-repeat: no-repeat; /* sets the background to not repeat through the container */
  background-position: center top; /* centers the image at the top of the container */
  background-size: cover; /* has the image cover the whole container */
  font-family: Impact;
  
  background-clip:text; /*clips the background into the text */
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-color: #000000;
}