body {
  margin: 0;
  background-color: #ffb4e1;
  
  animation: colorShift 10s infinite;
}

@keyframes colorShift {
  0%   { background-color: #FC12F8; }
  50%  { background-color: #1293FC; }
  100%   { background-color: #FC12F8; }

}

#container {
    display: flex;              /* flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: center;    /* center items vertically */
    align-items: center;        /* center items horizontally */
    height: 100vh;
    border: 1px transparent;
}

.box {
    width: 500px;
    margin: 100px;
    padding: 50px; /* white edges inside box */
    text-align: center;
    background: white;
    color: #ffb4e1;
}

/* unvisited link */
a:link {
  color: #FC12F8;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #FC12F8;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #ffa0d9;
  text-decoration: none;
}

/* selected link */
a:active {
  color: #e75c88;
  text-decoration: none;
}

/* highlight colors */
::selection {
  background: #ffc0e4; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffc0e4; /* Gecko Browsers */
}