Dear web developer,
I need a very specialized CSS stylesheet made against this HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Magic Square</title>
<link rel="stylesheet" media="all" href="https://raw.github.com/necolas/normalize.css/master/normalize.css">
</head>
<body>
<ul id="magic-square">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>Basically, what I need is for the list with ID "magic-square" to be styled as a very magical-looking square thing. Please use the attached image as a reference for what I want made. When you are finished, I expect the maximum dimensions of the square to be 400 pixels wide by 400 pixels high. If the viewport is smaller than 400 pixels wide, I expect the square width and height to scale to whatever the maximum width of the page is. The square should always be positioned in the vertical and horizontal center of the page. Also, the circle in the middle should scale with the size of the square. Please do not change the markup, and also please do not use JavaScript.
Also, I can't pay you for this, but it will probably make for a great portfolio piece. Looking forward to it!
Regards,
Awesome Client
