*{
	font-family: Trebuchet MS;
}

body {
  background-color: beige;
  text-align: center;
}

h1 {
  color: black;
}

#square{
    width: 200px;
    height: 200px;
    background-color: black;
    border: 20px solid gray;
    margin: 20px auto auto auto;
} 

.state{
	width: 300px;
	height: 300px;
	border-radius: 15px;
}

#output{
	font-size: 30px;
	margin-top: 20px;
}

.animated{
	animation-name: attention;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.vague{
	color: #ffff00;
}


@keyframes attention{
  0%   {width: 300px; height: 300px;}
  50%  {width: 310px; height: 310px;}
  100% {width: 300px; height: 300px;}
}