body, a{
    
    font-family: Garamond; color:#92b2ea;text-decoration:none;
}

	div {}
		#container {position: fixed;
    left: 0;
    width: 100%;
    // background-color: red;
    text-align: center;
    z-index: 9;
}


h1{

}
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
//   background-color: red;
   color: white;
   text-align: center;
    z-index: 9;
}


input {
  display: block;
  position: absolute;
  appearance: none;
  cursor: pointer;
  z-index: 1;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  opacity: 0;
}
input:hover + .block {
  box-shadow: 1px 1px 1px 0px black, inset 1px 1px 1px 0px white;
  background: #fff2d1;
}
input:checked + .block {
  background: #F9BF3B;
  border-radius: 100%;
}
input:checked + .block.Ns {
  border-top-left-radius: 5px;
}
input:checked + .block.NEs {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
input:checked + .block.Es {
  border-top-right-radius: 5px;
}
input:checked + .block.SEs {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
input:checked + .block.Ss {
  border-bottom-right-radius: 5px;
}
input:checked + .block.SWs {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
input:checked + .block.Ws {
  border-bottom-left-radius: 5px;
}
input:checked + .block.NWs {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.block {
  position: absolute;
  background: #fffaef;
  border-radius: 5px;
  transition: border-radius 750ms, background 500ms;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  box-shadow: 1px 1px 1px 0px black, inset 1px 1px 1px 0px rgba(255, 255, 255, 0.8);
}

body {
  background: #222;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}