body {
    font-family: Arial, sans-serif;
    background-color: #f8feff;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 20px;
    line-height:90%;
}

h1 {
    color: #0073e6;
}

.grey {
    color:rgb(175, 175, 175);
}

#squareAnim {
    position:relative;
    top: 90px; /* Move to the vertical center */
    left: 50%; /* Move to the horizontal center */
    transform: translate(-50%, -50%); /* Adjust for element's own width and height */
    width: 500px; /* Adjust width */
    height: 500px; /* Adjust height */
}

.pt-serif-regular {
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .pt-serif-bold {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .pt-serif-regular-italic {
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .pt-serif-bold-italic {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: italic;
  }

.doto {
  font-family: "Doto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ROND" 0;
}