style.css

.windowtitle {
    color: #111111;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 80px;
}

* {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
}

input.menu-item {
    text-transform: none;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.menu-item {
    margin-bottom: 30px;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

button.menu-item {
    padding: 15px 32px;
    background-color: #CED0CE;
    border: none;
    color: #1C140D;
    font-weight: bold;
    cursor: pointer;
    display: block;
    font-size: 16px;
}

div#window-container {
    border: 2px solid #1C140D;
    background: #E6E8E6;
    overflow: hidden;
    position: absolute;
    top: 20%;
    height: 60%;
    left: 10%;
    width: 80%;
}

div#window {
  position: relative;
  padding: 50px;
}

div#windowcontent {
  position: relative;
}

h1 {
  color: #1C140D;
}


/* unvisited link */
a:link {
    color: #1C140D;
}

/* visited link */
a:visited {
    color: #2C240D;
}

/* mouse over link */
a:hover {
    color: #5C540D;
}

@keyframes blinkAnim {
  0% {opacity: 0.0;}
  100% {opacity: 1.0;}
}

.animated-meta-circle {
  opacity: 0.0;
  animation-name: blinkAnim;
  animation-delay: 0.7s;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

.animated-meta-cross {
  opacity: 0.0;
  animation-name: blinkAnim;
  animation-delay: 0.7s;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

@keyframes circleAnim {
  0%   {stroke-dasharray: 0 20000;}
  100%   {stroke-dasharray: 360 20000;}
}

.animated-circle circle {
  animation-name: circleAnim;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
}

@keyframes crossAnim {
  0%   {stroke-dasharray: 0 20000;}
  100%   {stroke-dasharray: 110 20000;}
}

.animated-cross line:nth-child(1) {
  animation-name: crossAnim;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  stroke-dasharray: 0 20000;
}

.animated-cross line:nth-child(2) {
  animation-name: crossAnim;
  animation-delay: 0.3s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  stroke-dasharray: 0 20000;
}

@keyframes strokeAnim {
  0%   {stroke-dasharray: 0 20000;}
  100%   {stroke-dasharray: 850 20000;}
}

.animated-stroke {
  animation-name: strokeAnim;
  animation-delay: 0.5s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  stroke-dasharray: 0 20000;
}

.ghost {
  opacity: 0.0;
}

.ghost:hover {
  opacity: 0.6;
}

@keyframes activeBoardAnim { from { opacity:0.2; } to { opacity:1; } }
@keyframes inactiveBoardAnim { from { opacity:1.0; } to { opacity:0.2; } }

.active-board {
  animation-name: activeBoardAnim;
  animation-delay: 0.5s;
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

.inactive-board {
  animation-name: inactiveBoardAnim;
  animation-delay: 0.5s;
  animation-duration: 0.3s;
  animation-fill-mode: both;
}


@keyframes windowFadeIn { from { opacity:0; } to { opacity:0.9; } }

.window-fade-in {
  opacity: 0;  /* make things invisible upon start */
  animation:windowFadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration:0.5s;
}

.window-fade-in.delay {
  animation-delay: 1.5s;
}