@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');

::-moz-selection {
  color: #000;
  background: #F2E33D;
}

::selection {
  color: #000;
  background: #F2E33D;
}

body {
  background: #000;
  font-family: 'Open Sans', sans-serif;
  color: #F2F2F2;
  margin: 0;
}

a, a:visited {
  color: #F2E33D;
  transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition: color .1s;
  -moz-transition: color .1s;
  -webkit-transition: color .1s;
  -o-transition: color .1s;
}

a:hover, a:active {
  color: #FFF58C;
}

#veikkeli {
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  margin: auto;
  max-width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  margin-right: -50%;
  margin-bottom: -50%;
}

#veikkeli > a {
  margin: 0;
  display: inline-block;
}

#veikkeli > p {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 96pt;
  font-size: calc(16pt + 11vmin);
  font-weight: 300;
  text-transform: uppercase;
  margin: 0;
  width: calc(100% + .27em);
  margin-left: -.135em;
  white-space: nowrap;
}

#veikkeli > p > span {
  display: inline-block;
  color: #F2E33D;
  transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition: width .1s, font-size .1s;
  -moz-transition: width .1s, font-size .1s;
  -webkit-transition: width .1s, font-size .1s;
  -o-transition: width .1s, font-size .1s;
  width: .27em;
  margin: auto -.03em;
}

#veikkeli > p:hover > span {
  width: 0%;
  font-size: 0;
}

#veikkeli > p:hover {
  width: calc(100% + .81em);
  margin-left: -.405em;
}

.links {
  margin: 1em 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  background: #000;
}

.links > li {
  list-style-type: none;
  font-size: 1em;
  margin: 1em;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.links > li > a {
  display: block;
  font-family: 'Open Sans Condensed', sans-serif;
  text-decoration: none;
}

.links > li > .info {
  visibility: hidden;
  display: block;
  opacity: 0;
  transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition: opacity .1s;
  -moz-transition: opacity .1s;
  -webkit-transition: opacity .1s;
  -o-transition: opacity .1s;
  font-size: .75em;
  font-family: 'Open Sans', sans-serif;
  color: #404040;
  height: 0;
  margin: 0 -9999px;
}

.links > li > a:hover + .info {
  visibility: visible;
  opacity: 1;
}

.info:hover {
  visibility: visible !important;
  opacity: 1 !important;
}