/* Definição do fundo animado */
body {
  margin: 20;
  padding: 5%;
  padding-top: 1%;
  background: black; /* Cor de fundo alternativa */
  font-family:'Courier New', Courier, monospace;
  overflow:hidden;
}

.background {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  
  /* Aplica a textura e define a repetição */
  background-image: url('images/background.png');
  background-size: 256px 256px;
  background-repeat: repeat;
  background-position: 0 0;

  /* Mantém o fundo atrás de tudo */
  z-index: -1;

  /* Animação do scroll infinito */
  animation: scroll-diagonal 20s linear infinite;
}

@keyframes scroll-diagonal {
  from {
      background-position: 0 0;
  }
  to {
      background-position: -512px 512px; /* Move 2 blocos de 256px */
  }
}

/*Conteudo da tela*/
p {
  text-align: center;
  color:#F8FFE5;
  position: relative
}

@font-face {
  font-family: 'title'; /*a name to be used later*/
  src: url("fonts/Retrogression-Regular.ttf"); /*URL to font*/
}

h1 {
  font-family: "title";
  color: whitesmoke;
  width: 30%;
  text-align: center;
  position: absolute;
  left: 33%;
  font-size: 3.5em;
}

h2 {
  color:#11ADC1FF
}

a {
  color: #F8FFE5;
  font-family: "Courier New", monospace;
  font-weight: bold;
  text-decoration: none;
}

.planet {
  height: 200px;
  width: 200px;
  position: absolute;
  animation-name: planet-animation;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.guestbook {top: 70%; left: 60%;}
.guestbook:hover {content:url('images/planet02.png');}
.studies {top: 23%; left: 75%;}
.studies:hover {content:url("images/planet12.png");}
.reading:hover {content:url("images/planet22.png");}
.reading {top: 40%; left: 25%;}
.projects:hover {content:url("images/blackhole2.png");}
.projects {top: 23%; left: 40%;}
.media:hover {content:url("images/fallingstar2.png");}
.media {top: 40%; left: 60%;}
.photos:hover {content:url("images/galaxy2.png");}
.photos {top: 70%; left: 35%;}
.blog:hover {content:url("images/ovni2.png");}
.blog {top: 55%; left: 80%;}

.aboutme {
  height:300px;
  width:300px;
  top: 15%; left: 5%;
}

.aboutme:hover {content:url("images/foguete2.png");}

@keyframes planet-animation {
  0% { transform: translateY(0px);}
  50% { transform: translateY(-10px)}
  100% { transform: translateY(0px)}
}

.music-container {
  transform: scale(0.5); /* Reduz tudo */
  position: absolute; 
  top: 45%; 
  left: 5%;
}

.music {
  height: 512px;
  width: 512px;
  background: url('images/planet411.png');
  background-repeat: no-repeat;
  animation-name: music-animation, planet-animation;
  animation-direction: linear, alternate;
  animation-duration: 0.7s, 2s;
  animation-timing-function: steps(4), ease-in-out;
  animation-iteration-count: infinite, infinite;
}

@keyframes music-animation {
  from { background-position: 0px; }
  to { background-position: -2048px; }
}

.music:hover {
  background: url('images/planet431.png');
}