*{
    margin: 0;
    font-family: Comic Sans MS;
}

#profile{
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100pt;
}

#profile a{
    text-decoration: none;
    color: black;
}

#profile h1{
    font-size: 50pt;
    margin-top: 50pt;
}

img {
  display: block;
  max-width: 100%;
}

.stack {
  width: 100%; /* ou outro valor menor */
  max-width: 400px;
  transition: 0.25s ease;
}

.stack:hover {
  transform: rotate(5deg);
}

.stack:hover .card::before {
  transform: translateY(-2%) rotate(-4deg);
}

.stack:hover .card::after {
  transform: translateY(2%) rotate(4deg);
}

.card {
  aspect-ratio: 3 / 2;
  border: 4px solid;
  background-color: #fff;
  position: relative;
  transition: 0.15s ease;
  cursor: pointer;
  padding: 5% 5% 15% 5%;
}

.card::before,
.card::after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  border: 4px solid;
  background-color: #fff;
  transform-origin: center center;
  z-index: -1;
  transition: 0.15s ease;
  top: 0;
  left: 0;
}

.card::before {
  transform: translateY(-2%) rotate(-6deg);
}

.card::after {
  transform: translateY(2%) rotate(6deg);
}

.image {
  width: 100%;
  border: 4px solid;
  background-color: #eee;
  aspect-ratio: 1 / 1;
  position: relative;
}

.browser-warning {
  margin-bottom: 4rem;
}

@supports (aspect-ratio: 1 / 1) {
  .browser-warning {
    display: none;
  }
}