@font-face {
  font-family: "private-eyes";
  src: url("PrivateEyesVF.ttf") format("truetype-variations");
}

.container {
  margin: 0 auto;
  min-width: 700px;
  border-radius: 10px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding: 10px;
  gap: 20px;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  align-content: start;
 
}

html {
  margin: 0;
  overflow: hidden;
  background-color: rgb(236, 234, 226)
}

.eye {
 /* background-color: red; */
  margin: 0 auto;
  cursor: pointer;
  font-size: 200px;
  font-family: "private-eyes";
  color: gray;
  line-height: 0.45;
  font-variation-settings: "LOOK" 100, "BLNK" 0; 
	transition: .5s;
  
}

.eye:hover {
  font-variation-settings: "LOOK" 0, "BLNK" 0; 
  transition: .3s;
  color:rgb(44, 44, 43)
}
.eye:active {
  font-variation-settings: "LOOK" 0, "BLNK" 100; 
  transition: .1s;
  color:rgba(186, 15, 15, 0.446)
}