@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Cormorant+Garamond:wght@400;600&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f6f1e8;
    overflow:hidden;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    font-family:'Cormorant Garamond',serif;
}

#landing{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    text-align:center;
}

#photo{
    width:280px;
    cursor:pointer;

    border-radius:12px;

    transition:.35s;
}

#photo:hover{
    transform:scale(1.03);
}

#message{
    margin-top:20px;

    font-size:30px;

    font-family:'Special Elite',monospace;

    color:#4a4035;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
  background: #f2e8d5;
  color: #302823;
}

#landing-page {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;

  background-color: #f2e8d5;
  background-image:
    radial-gradient(
      circle at 25% 20%,
      rgba(255, 255, 255, 0.5),
      transparent 30%
    ),
    repeating-radial-gradient(
      circle,
      rgba(76, 53, 36, 0.025) 0 1px,
      transparent 1px 5px
    );
}

#landing {
  position: absolute;
  left: 50%;
  top: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: clamp(150px, 24vw, 240px);
  padding: 0;

  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;

  transform: translate(-50%, -50%);
  transition:
    left 400ms cubic-bezier(0.2, 0.9, 0.2, 1.15),
    top 400ms cubic-bezier(0.2, 0.9, 0.2, 1.15),
    transform 220ms ease;
}

#photo {
  display: block;
  width: 100%;
  height: auto;

  /* This keeps the image background completely clear. */
  background: transparent;

  filter:
    drop-shadow(0 12px 10px rgba(73, 48, 33, 0.18))
    sepia(0.05);
}

#message {
  margin-top: 10px;
  padding: 6px 10px;

  font-family: "Courier New", monospace;
  font-size: 15px;
  text-align: center;

  background: rgba(247, 239, 221, 0.82);
  border: 1px dashed rgba(48, 40, 35, 0.35);
  transform: rotate(-1deg);
}

.background-doodles {
  position: absolute;
  inset: 0;
  overflow: hidden;

  /* Crucial: the drawings cannot intercept clicks. */
  pointer-events: none;
}

.doodle {
  position: absolute;
  color: #8057c8;
  opacity: 0.72;

  font-family: "Comic Sans MS", cursive;
  font-size: clamp(25px, 5vw, 55px);
}

.doodle-one {
  top: 9%;
  left: 5%;
  transform: rotate(-10deg);
}

.doodle-two {
  top: 13%;
  right: 24%;
  transform: rotate(9deg);
}

.doodle-three {
  right: 8%;
  bottom: 19%;
  transform: rotate(-7deg);
}

.doodle-four {
  left: 9%;
  bottom: 15%;
  transform: rotate(14deg);
}

.doodle-five {
  top: 47%;
  right: 5%;
  transform: rotate(-12deg);
}

.doodle-six {
  top: 37%;
  left: 19%;
  transform: rotate(8deg);
}

.purple-line {
  position: absolute;
  width: clamp(180px, 35vw, 430px);
  overflow: visible;
  opacity: 0.48;
}

.purple-line path {
  fill: none;
  stroke: #8057c8;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-one {
  top: 3%;
  left: -4%;
  transform: rotate(-5deg);
}

.line-two {
  right: -5%;
  bottom: 3%;
  transform: rotate(7deg);
}