{
  box-sizing: border-box;
}

body {
  background-image: url(https://open-window.neocities.org/journal/jg/ma08-bg-stripe.png);
  padding:50px;
  cursor: url(https://open-window.neocities.org/journal/jg/pencil.png), auto;
  font-family: "rainyhearts"; 
}

@font-face {
    font-family: "April"; 
    src: url("https://open-window.neocities.org/journal/April.woff"); 
}

@font-face {
    font-family: "rainyhearts"; 
    src: url("https://open-window.neocities.org/I_G/rainyhearts.woff"); 
}

.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }

 #spiral {
  position: absolute;
   left:687px;
   top:50px;
  filter: drop-shadow(3px 3px 3px grey);
}

#flowers {
  position: absolute;
  left:0px;
  top: 0px;
}

#buttons {
  position: absolute;
  right:190px;
  top: 320px;
}

mark { 
  background-color: #d8e5f3;
  color: black;
}

mark2 { 
  background-color: #d7edc5;
  color: black;
}

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

.link {
  position: relative;
  transition: clip-path 275ms ease;
  &:hover span::before, &:focus span::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  span {
    position: relative;
    display: inline-block;
    color: 	#005c99;
    &::before {
      position: absolute;
      content: attr(data-content);
      color: #e67300;
      text-decoration: underline;
      text-decoration-color: $darkblue;
      clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
      transition: clip-path 275ms ease;
    }
  }
}

span.dashed::before {
  text-decoration-style: dashed;
}

a:hover {
  cursor: url(https://open-window.neocities.org/I_G/linkhand.png), auto;
}

div.b {
  font-size: 20px;
}
div.c {
  font-size: 25px;
}