.grid {
  display: grid;
  grid-template-columns: repeat(3, max(30%));
  margin-left : 4em;
  margin-right : 4em;
  gap: 2em;

}

.grid > div {
  border: 2px solid black;
  background-color: white;
  box-shadow: 8px 8px;
  text-align: left;
  padding : 1em;
  min-width: 6em;
  block-size: fit-content;


}

.grid > div:hover{
  transform : scale(1.1);
}


.box2 {
  border: 2px solid black;
  background-color: white;
  box-shadow: 4px 4px;
  text-align: center;
  padding : 1em;
  max-width: 50em;
  padding-right: 1em;
  padding-left: 1em;
  margin: auto;
  position: relative;
}

.box3 {
  border: 2px solid black;
  background-color: white;
  box-shadow: 4px 4px;
  text-align: center;
  padding : 1em;
  padding-right: 1em;
  padding-left: 1em;
  margin: auto;
  position: relative;
}


a {
  text-decoration: none;
  color : #0034ff;
}


#title {
  color: white;
  position: relative;
  left: 2em;
  max-width: 16em;
}

.hobbies {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
}

.dni {
  grid-row-start: 3;
  grid-column-start: 1;
}

.guest {
  grid-column-start: 2;
  grid-row-start: 2;
  border-style: dotted;
}

.flash {
  font-size: 32px;
  vertical-align: middle;
  text-align: center;

}
.flash > a {
  text-decoration: none;
  animation: flash 3s ease-in-out infinite;
  color: black;
}



iframe {
  width: 400px;
  height: 200px;
  padding: 1em;
}

@media (max-width : 800px) {
  .grid {
    grid-template-columns: repeat(2, max(50%));
    gap: 2em;
  }

  .grid > div {
    padding : 1em;
    min-width: none;
    block-size: fit-content;
    word-wrap: break-word;
    font-size: 14px;
  }
  .flash {
    font-size: 24px;


  }
}

@keyframes flash {
  0%, 100% {
    color: #0034ff;

  }
  50% {
    color: #ff9863;

  }
}

h1 {
  text-shadow: 2px 0px black;
  text-shadow: 2px 2px black;
  text-shadow: 0px -2px black;
  text-shadow: 2px -2px black;

}