* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  height: 100%;
  background-color: #fff;
  font-size: 100%;
}

header {
  background-color: #081152 ;
  width: 100%;
  height: 20%;
  position:fixed;
  z-index: 12;
}

footer {
  background-color: #081152;
  width: 100%;
  height: 10%;
  position: fixed;
  bottom: 0px;
  z-index: 16;
}

h1, h2 {
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: bold;
  color: #f7eead;
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(#f7eead, #c1ac51);
  -webkit-background-clip: text;
}

h1 {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  font-size: 4.0em;
  font-variant: small-caps;
}

h2 {
  text-align: right;
  font-size: .75em;
}

p {
margin:2%;
}

.alignright {
  text-align: right;
}

.arrowimg {
    height: 8%;
}

.arrowleft {
  position: relative;
  height: 100%;
  width: 10%;
  float: left;
}

.arrowright {
  position: relative;
  height: 100%;
  width: 10%;
  float: left;
}

.inarrowleft {
  position: absolute;
  top: 8%;
  left: 10%;
  width: 90%;
  height: 95%;
  text-align: left;
}

.inarrowright {
  position: absolute;
  top: 8%;
  left: 0%;
  width: 90%;
  height: 95%;
  text-align: right;
}

.innercontent {
  width: 80%;
  height: 100%;
  float: left;
}

.content {
  height: 100%;
  width: 25%;
  float: left;
  position: relative;
}

.innerpiece {
  position: absolute;
  top: 20%;
  width: 100%;
  height: 70%;
}

#copy {
  position: absolute;
  top: 60%;
  width: 98%;
}

#innerhaiku1 {
  position: absolute;
  top: 30%;
  left: 38%;
  width: 36%;
  height: 70%;
  text-align: left;
  font-family:  Futura, 'Trebuchet MS', Arial, sans-serif;
  font-size: x-large;
  font-weight: normal;
  color: #000;
}

#innerpresent {
  position: absolute;
  top: 30%;
  left: 26%;
  width: 48%;
  height: 70%;
  text-align: left;
  font-family:  Futura, 'Trebuchet MS', Arial, sans-serif;
  font-size: x-large;
  font-weight: normal;
  color: #000;
}

#innernamenothing {
  position: absolute;
  top: 30%;
  left: 38%;
  width: 36%;
  height: 70%;
  text-align: left;
  font-family:  Futura, 'Trebuchet MS', Arial, sans-serif;
  font-size: x-large;
  font-weight: normal;
  color: #000;
}

#innerssssh {
  position: absolute;
  top: 80%;
  left: 60%;
  width: 25%;
  height: 70%;
  text-align: left;
  font-family:  Futura, 'Trebuchet MS', Arial, sans-serif;
  font-size: x-large;
  font-weight: normal;
  color: #000;
}

#haiku1 {
  background-color: #eea;
}

#namenothing {
  background-color: #dfc;
}

#ssssh {
  background-color: #d8d0c8;
}

#wrapper {
  height: 100%;
  width: 400%;
  overflow: hidden;
  z-index: 4;
}

#present {
  background-color: #fdc;
}