@font-face {
  font-family: joystix;
  src: url('joystix monospace.ttf');
}

@keyframes background_animation {
 0% {background-color: red;}
 100% {background-color: yellow;}

}

@keyframes hover {
  from { margin-top: -10px;}
  to{ margin=top: - 10px}
}

html
{
  height: 100%;
  margin: 0;
  background-color: #000000;
}

header
{
  padding : 5px;
  float: right;
}

body
{
   /*background-color: grey;
   animation-name: background_animation;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-direction: alternate;*/
   /*background: linear-gradient(0deg, #111111, #555555 80%) no-repeat;*/
   height:inherit;
   padding: 0;
   margin: 0;
   background: linear-gradient(0deg,  #000000 0%,#000000 55%,#2B2B2B 75%,#353535 100%) no-repeat;


   font-family: joystix;
   color: white;
}
#centered {
  position: absolute;
  /*top: 20%;
  left: 50%;*/
  /*width: 250px;
  height: 250px;
  margin-top: -125px; 
  margin-left: -125px; */
  width: 100%;
  height: 100%;
  font-size: 25px;
  top:10%;
}

#logo {
  animation-name: hover;
  float:none;
  animation-duration: 1s;

  animation-iteration-count: infinite;;
  animation-direction: alternate-reverse;
  display: block;

}

.grid
{
  background-color: #000000;  
  width: 100%;
  text-align: justify;
  margin:auto;
}

.project_container
{
    display: block;
    max-width: 500px;
    margin:auto;
    padding-bottom: 50px;
}

.project_container img
{
  border: 5px solid white;
  width: 100%;
  height: 100%;
}

.project_container a
{
  color: white;
  font-size: larger;
  text-decoration: none;
}

.project_container a:hover
{
  color: yellow;
}

footer
{
  background-color: #000000;
  display: inline-block;
  position: absolute;
  height: 500px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
}