/*CSS document*/
* {
  text-align: center;
  text-decoration: none;
}
body {
  background-color: #262900;
  color: white;
  padding: 5px;
}
div {
  margin: 3px;
}
p {
  font-size: 1.2rem;
  margin-top: 3.2rem;
  font-family: initial;
}
#perfil {
  margin: 0 auto 3rem auto;
}
#perfil-image {
  width: 8rem;
  border-radius: 50%;
  transition: 0.2s;
}
#perfil-image:hover {
  transform: scale(1.1);
}
#name {
  margin: 0;
  font-size: 2rem;
  transition: 0.2s;
  color: white;
}
#name:hover {
  opacity: 0.8;
}
span {
  opacity: 0.5;
  color: white;
  transition: 0.2s;
}
span:hover {
  opacity: 0.8;
}
#sobre-mim {
  margin: 5px;
}
#grid-container {
  display: grid;
  grid-gap: 60px 20px;
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(3, 6rem);
  justify-content: center;
}
.grid-item {
  border-radius: 30px;
  background-color: #2d2b7b;
  cursor: pointer;
  transition: 0.5s;
}
.grid-item:hover {
  background-color: #5464f8;
  transform: scale(1.1);
}
a img {
  height: 4rem;
  margin: 15px;
  color: white;
  transition: 0.5s;
}
i {
  font-size: 4rem;
  margin: 15px;
  color: white;
  transition: 0.5s;
}
#tree {
  font-size: 1.5rem;
  margin: 0;
  color: green;
}
p#copy {
  margin: 6rem auto 0 auto;
}
@media (min-width: 600px) {
  #grid-container {
    grid-template-columns: repeat(4, 20%);
    grid-template-rows: repeat(2, 6rem);
  }
  p#copy {
    margin-top: 3rem;
  }
}