:root {
  --blog-font-size: clamp(0.2rem, 2vw + 1vh, 5rem);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100dvh;
  min-width: 100dvw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bodydiv {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.blog-wrapper {
  z-index: 1;
  border: 2px solid #2afd00;
  border-radius: calc(1dvh + 2dvw);
  box-shadow: 0 0 calc(var(--blog-font-size) * 0.5)
    calc(var(--blog-font-size) * 0.2) #2afd0044;
  animation: fadeIn 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  position: absolute;
  width: 50%;
  height: 60%;
}
.blog-wip-img {
  border-radius: calc(1dvh + 2dvw);
  width: 100%;
  height: 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}