<style> .wrapper{grid-template-columns: 2fr 1fr 2fr;} .middle {background:black;} </style><div class = "wrapper"><div class = "left"><div class = "wrapperL"><div class = "columnimage"><img src = "/art/woodsr1_1.png"></img> <div class = "columntext"> [...]<rs1| (click: ?rs1)[A moss-covered stone rouses from a long sleep.]<rs2| (click: ?rs2)[They feel something is missing.]<rs3| (click: ?rs3)[[[Look for her.|2]]] </div></div></div> </div> <div class = "middle"> </div> <div class = "right"><div class = "wrapperR"><div class = "columnimage"><img src = "/art/woodsr1_1_2.png"><div class = "columntext"> [...]<lm1| (click: ?lm1)[The mist feels cold.]<lm2| (click: ?lm2)[It's empty here, and the fog rolls in, searching.]<lm3| (click: ?lm3)[[[Look for them.|2]]] </div></div> </div> </div><style> .wrapper{grid-template-columns: 2.2fr 1.6fr 2.2fr;} .left { background-image: url(/art/fogbog1.png); background-size: cover; } .right { background-image: url(/art/fogbog2.png); } .middle { background-image: url(/art/Illustration2-1.png); background-position: center top; background-size: cover; background-repeat: no-repeat;} .wrapperL .wrapperR { display: flex; } .wrapperL { justify-content: left; } .wrapperR { justify-content: right; } .wrapperL img{ height: 75px; width: auto; } .wrapperR img{ height: 75px; width: auto; } @media (max-width:667px){ .wrapperL img{ height: 40px; width: auto; } .wrapperR img{ height: 40px; width: auto; } } </style> <div class = "wrapper"><div class = "left"><div class = "wrapperL"> <div class = "columntext"> [<img src="/art/woodstr1_3_rs.gif">]<rs1| (click: ?rs1)[[[The forest is alien.|3]]] </div></div> </div> <div class = "middle"> </div> <div class = "right"><div class = "wrapperR"><div class = "columntext"> [<img src="/art/woodsr1_4_lm.gif">]<lm1| (click: ?lm1)[[[The fog doesn't reach far enough.|3]]] </div></div> </div> </div> <style> img { max-height: 70vh; max-width: 100%; width: auto; height: auto; } .wrapper { display: flex; justify-content: center; } </style> <div class = "wrapper"><div class = "together"><img src="/art/title.png"> A story about being lost in the [[woods.|1]]</div> </div><style> .wrapper{grid-template-columns: 2.25fr 1fr 2.25fr;} .left { background-image: url(/art/woodsr1_2.png); background-size: cover; text-align: center; } .right { background-image: url(/art/woodsr1_2_2.png); text-align: center; } .middle { background-image: url(/art/string2.png); background-position: center top; background-size: cover; background-repeat: no-repeat;} .wrapperL .wrapperR { display: flex; } .wrapperL { justify-content: center; } .wrapperR { justify-content: center; } .wrapperL img{ height: 75px; width: auto; } .wrapperR img{ height: 75px; width: auto; } @media (max-width:667px){ .wrapperL img{ height: 40px; width: auto; } .wrapperR img{ height: 40px; width: auto; } } </style><div class = "wrapper"> <div class = "left"><div class = "wrapperL"> <div class = "columntext"> [<img src="/art/woodstr1_3_rs.gif">]<rs1| (click: ?rs1)[I miss her voice.]<rs2| (click: ?rs2)[[[I would wander forever for her.|4]]] </div></div> </div> <div class = "middle"> </div> <div class = "right"><div class = "wrapperR"><div class = "columntext"> [<img src="/art/woodsr1_4_lm.gif">]<lm1| (click: ?lm1)[I miss their light.]<lm2| (click: ?lm2)[[[I will hunt through time for them.|4]]] </div></div> </div> </div><style> .wrapper{grid-template-columns: 5fr .5fr 5fr;} .left { background-image: url(/art/fogbog5.png); background-size: cover; text-align: right; } .right { background-image: url(/art/fogbog6.png); text-align: left; } .middle { background-image: url(/art/string3.png); background-position: center top; background-size: cover; background-repeat: no-repeat;} .wrapperL { justify-content: right; } .wrapperR { justify-content: left; } .wrapperL img{ height: 75px; width: auto; } .wrapperR img{ height: 75px; width: auto; } @media (max-width:667px){ .wrapperL img{ height: 40px; width: auto; } .wrapperR img{ height: 40px; width: auto; } } </style><div class = "wrapper"> <div class = "left"><div class = "wrapperL"> <div class = "columntext"> [<img src="/art/woodstr1_3_rs.gif">]<rs1| (click: ?rs1)[I miss her touch.]<rs2| (click: ?rs2)[I miss her care.]<rs3| (click: ?rs3)[[[I miss her wholely, and I will find her.|5]]] </div></div> </div> <div class = "middle"> </div> <div class = "right"><div class = "wrapperR"><div class = "columntext"> [<img src="/art/woodsr1_4_lm.gif">]<lm1| (click: ?lm1)[I miss their passion.]<lm2| (click: ?lm2)[I miss their thoughts.]<lm3| (click: ?lm3)[[[I miss their everything, and I will find them.|5]]] </div></div> </div> </div><div class = "wrapper"><div class = "together"><img src="/art/woodr1_4_3.png"> [[You're so close.|6]] </div></div> <div class = "wrapper"><div class = "together"><img src="/art/woodsr1_5bam.png"> (transition-time: 1s)+(t8n: "shudder")[[[WHAM|7]]] </div></div><div class = "wrapper"><div class = "together"><img src="/art/woodsr1_6.png"> [[["..."|8]]] </div></div><div class = "wrapper"> <div class = "together"><img src="/art/woodsr1_7.png"> [["...hello?"|9]]</div> </div><style> .wrapper { display:grid; height: 70vh; align-content: space-evenly; grid-template-columns: 25% 20% 17% 8% 5% 25%; grid-auto-rows: auto; grid-auto-rows: max-content; width: 100%; grid-column-gap: 0px; grid-template-areas: "rs rs . . . ." " . will1 . . . ." ". . . will2 will2 ." ". . lm lm lm lm"; min-height: 75vh; } .willimg { position: absolute; width: 100%; object-fit: scale-down; display: flex; justify-content: center; } .willimg img { max-height: 70vh; width: auto; } .rs { grid-area: rs; justify-self: start; } .lm { grid-area: lm; justify-self: end; text-align: right; } .will1 { grid-area: will1; justify-self: center; text-align: right; } .will2 { grid-area: will2; justify-self: center; text-align: center; } .flexwrap { display: flex; } .rsimg { justify-content: flex-start; align-self: flex-start; order: 0; width: 75px; height: auto; } .lmimg { justify-content: flex-end; align-self: flex-end; order: 2; flex-shrink: 0; width: 75px; height: auto; } @media (max-width:667px){ .rsimg, .lmimg { width: 40px; } } .text{ order: 1; padding: 1rem; } </style><div class ="wrapper"> <div class="willimg"><img src="/art/Illustration.png"></div> <div class="rs"><div class="flexwrap"><div class="rsimg"><img src="/art/woodsr1_3.gif"></div><div class="text">"Oh golly." "Who might this be who fell from the sky?"</div></div></div> <div class="will1">"ah... apologies."</div> <div class="will2">"i am (text-style: "bold")[the will of an eccentric]. i am a (text-style:"bold")[peddler], my wares are curses."</div> <div class="lm"><div class="flexwrap"><div class="lmimg"><img src="/art/woodsr1_4.gif"></div><div class="text">"S-sorry? Excuse me, um... Y-you said (text-style:"italic")[[curses|10]]?"</div></div></div> </div><style> .wrapper { display:grid; grid-template-columns: 21% 21% 25% 20%; grid-template-rows: auto; grid-auto-rows: max-content; grid-template-areas: "w1 . . ." ". . w2 w2" "w3 w3 . ." ". . . w4"; align-content: space-evenly; min-height: 75vh; } .willimg { position: absolute; width: 100%; object-fit: scale-down; display: flex; justify-content: center; } .willimg img { max-height: 70vh; width: auto; } .will1{ grid-area: w1; place-self: center; text-align: right; } .will2{ grid-area: w2; justify-self: center; text-align: left; } .will3{ grid-area: w3; justify-self: center; text-align: right; } .will4{ grid-area: w4; justify-self: center; text-align: left; } </style><div class="wrapper"> <div class="willimg"><img src="/art/Illustration3.png"></div> <div class="will1">"aye, curses."</div> <div class="will2">"curses, the threads that connect (text-style:"bold")[everything] to (text-style:"bold")[everyone]."<br><br></div> <div class="will3">"curses, the way you are seen, and the way one is (text-style:"bold")[heard]."<br><br></div> <div class="will4">"curses are everything, but they are especially [[you|11]]."</div> </div><style> .wrapper { display:grid; grid-template-columns: 2.5fr 2fr 1.5fr 1fr .5fr 2.5fr; grid-auto-rows: max-content; width: 100%; grid-column-gap: 0px; grid-template-areas: "rs1 rs1 . . . ." ". . . . lm1 lm1" " . w1 . . . ." " . . . w2 . ." "rs2 rs2 . . . ." " . w3 . . . ." "rs3 rs3 . . . ." ". . . . lm2 lm2"; align-content: space-evenly; min-height: 75vh; } @media (max-width:1279px) { .wrapper { display:grid; grid-template-columns: 25% 20% 15% 10% 5% 25%; grid-auto-rows: min-content; width: 100%; grid-column-gap: 0px; grid-template-areas: "rs1 rs1 rs1 rs1 . ." ". . . lm1 lm1 lm1" " . w1 . . . ." " . . . . w2 ." "rs2 rs2 rs2 rs2 . ." " . w3 w3 . . ." "rs3 rs3 rs3 rs3 rs3 ." ". lm2 lm2 lm2 lm2 lm2"; align-content: space-evenly; min-height: 75vh; } } .willimg { position: absolute; width: 100%; object-fit: scale-down; display: flex; justify-content: center; } .willimg img { max-height: 70vh; width: auto; } .rs1 { grid-area: rs1; justify-self: start; } .rs2 { grid-area: rs2; justify-self: start; } .rs3 { grid-area: rs3; justify-self: start; } .lm1 { grid-area: lm1; justify-self: end; text-align: right; } .lm2 { grid-area: lm2; justify-self: end; text-align: right; } .will1 { grid-area: w1; justify-self: center; text-align: center; } .will2 { grid-area: w2; justify-self: center; text-align: center; } .will3 { grid-area: w3; justify-self: center; align-self: end; text-align: center; } .flexwrap { display: flex; } .rsimg { justify-content: flex-start; align-self: flex-start; order: 0; width: 75px; height: auto; } .lmimg { justify-content: flex-end; align-self: flex-end; order: 2; flex-shrink: 0; width: 75px; height: auto; } @media (max-width:667px){ .rsimg, .lmimg { width: 40px; } } .text{ order: 1; padding: 1rem; } </style><div class ="wrapper"> <div class="willimg"><img src="/art/woodsr1_10.png"></div> <div class="rs1"><div class="flexwrap"><div class="rsimg"><img src="/art/woodsr1_3.gif"></div><div class="text">"Things and stuff and see and hear?" "I must have many curses, hoo."</div></div></div> <div class="will1">"well--"</div> <div class="lm1"><div class="flexwrap"><div class="lmimg"><img src="/art/woodsr1_4.gif"></div><div class="text">"Hehe. You certainly have the curse of being my love!"</div></div></div> <div class="will2">"uh--"</div> <div class="rs2"><div class="flexwrap"><div class="rsimg"><img src="/art/woodsr1_3.gif"></div><div class="text">"Ahh, and you the curse of mine!"</div></div></div> <div class="will3">"it's... <br>certainly<br> so, but--"</div> <div class="rs3"><div class="flexwrap"><div class="rsimg"><img src="/art/woodsr1_3.gif"></div><div class="text">"It makes me wonder how <br>deep our love grows, exactly."</div></div></div> <div class="lm2"><div class="flexwrap"><div class="lmimg"><img src="/art/woodsr1_4.gif"></div><div class="text">"The type of curse I would never [[peddle off!|12]]"</div></div></div> </div><style> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-areas: "w0 . . . ." ". w1 . w2 w2" ". . . . ." "w3 w3 . w4 w4" ". . . w4 w4"; align-content: space-evenly; min-height: 75vh; } .willimg { position: absolute; width: 100%; height: 100%; object-fit: fill; display: flex; justify-content: center; } .willimg img { max-height: 70vh; width: auto; height: auto; } .will0{ grid-area: w0; place-self: center; text-align: center; } .will1{ grid-area: w1; place-self: center; text-align: right; padding-right: 2rem; padding-top: 1rem; } .will2{ grid-area: w2; place-self: center; text-align: center; padding-top: 1rem; } .will3{ grid-area: w3; justify-self: center; text-align: right; } .will4{ grid-area: w4; justify-self: center; align-self: stretch; text-align: center; } </style><div class="wrapper"> <div class="willimg"><img src="/art/Illustration4.png"></div> <div class="will0">(text-style:"bold")["i am not in the business of buying love."]</div> <div class="will1">"i purchase and cherish that which everlasts."</div> <div class="will2">"(text-style:"bold")[love] is like buying (text-style:"bold")[life itself]. it will fade, and it will die."</div> <div class="will3">"like all things, eventually."</div> <div class="will4">"to live and to die and to love is outside of my purview. i care for one thing: my wares. to care for caring itself is [[folly|13]]."</div> </div><style> .wrapper { display:grid; grid-template-columns: 25% 20% 15% 10% 5% 25%; grid-auto-rows: auto; width: 100%; grid-column-gap: 0px; grid-template-areas: "rs1 rs1 . . . ." ". . . . lm1 lm1" "rs2 rs2 . . . ."; min-height: 75vh; height: 100%; } .willimg { position: absolute; width: 100%; object-fit: scale-down; display: flex; justify-content: center; } .willimg img { max-height: 70vh; width: auto; } .rs1 { grid-area: rs1; justify-self: start; } .rs2 { grid-area: rs2; justify-self: start; } .lm1 { grid-area: lm1; justify-self: center; align-self: center; text-align: right; } .flexwrap { display: flex; } .rsimg { justify-content: center; align-self: center; order: 0; flex-shrink: 0; width: 75px; height: auto; } .lmimg { justify-content: flex-end; align-self: center; order: 2; flex-shrink: 0; width: 75px; height: auto; } @media (max-width:667px){ .rsimg, .lmimg { width: 40px; } } .text{ order: 1; padding: 1rem; } </style><div class ="wrapper"> <div class="willimg"><img src="/art/woodsr1_12.png"></div> <div class="rs1"><div class="flexwrap"><div class="rsimg"><img src="/art/woodsr1_3.gif"></div><div class="text">"..." "Well, that's silly."</div></div></div> <div class="lm1"><div class="flexwrap"><div class="lmimg"><img src="/art/woodsr1_4.gif"></div><div class="text">"Res! Don't be rude!"</div></div></div> <div class="rs2"><div class="flexwrap"><div class="rsimg"><img src="/art/woodsr1_3.gif"></div><div class="text">"I quite mean it." "A sad life to live, everlasting or not, if you've foresaken life itself." "Don't you ever get [[lonely|14]]?"</div></div></div> </div><style> .wrapper { display:grid; grid-template-columns: 25% 20% 15% 10% 5% 25%; grid-auto-rows: auto; width: 100%; grid-column-gap: 0px; grid-template-areas: " . w1 . . . ." "rs1 rs1 . . . ." ". . . . lm1 lm1" " . . . w2 . ." "rs2 rs2 rs2 . . ." ". . lm2 lm2 lm2 lm2"; min-height: 75vh; } @media (max-width:1279px) { .wrapper { display:grid; grid-template-columns: 25% 20% 15% 10% 5% 25%; grid-auto-rows: auto; width: 100%; grid-column-gap: 0px; grid-template-areas: " . w1 w1 . . ." "rs1 rs1 rs1 . . ." " . . . . . ." ". . . . lm1 lm1" " . . . w2 w2 ." "rs2 rs2 rs2 rs2 . ." ". lm2 lm2 lm2 lm2 lm2"; min-height: 75vh; } } .willimg { position: absolute; width: 100%; height: 100%; object-fit: cover; display: flex; justify-content: center; } @media (max-width:1279px){ .willimg { position: absolute; width: 100%; height: 100%; object-fit: cover; display: flex; justify-content: center; } } .willimg img { max-height: 75vh; width: auto; } .rs1 { grid-area: rs1; justify-self: start; } .rs2 { grid-area: rs2; justify-self: start; } .lm1 { grid-area: lm1; justify-self: end; text-align: right; } .lm2 { grid-area: lm2; justify-self: end; text-align: right; } .will1 { grid-area: w1; justify-self: center; text-align: center; padding-top: 3rem; } .will2 { grid-area: w2; justify-self: center; text-align: center; padding-left: 1rem; } .flexwrap { display: flex; } .rsimg { justify-content: flex-start; align-self: center; flex-shrink: 0; order: 0; width: 75px; height: auto; } .lmimg { justify-content: flex-end; align-self: center; order: 2; flex-shrink: 0; width: 75px; height: auto; } @media (max-width:667px){ .rsimg, .lmimg { width: 40px; } } .text{ order: 1; padding: 1rem; } </style><div class ="wrapper"> <div class="willimg"><img src="/art/Illustration5.png"></div> <div class="will1">"n-no--"</div> <div class="rs1"><div class="flexwrap"><div class="rsimg"><img src="/art/woodsr1_3.gif"></div><div class="text">"We are timeless too. Lifetimes worth of love."</div></div></div> <div class="lm1"><div class="flexwrap"><div class="lmimg"><img src="/art/woodsr1_4.gif"></div><div class="text">"... Well, yes. I've looked through time itself to find you before."</div></div></div> <div class="will2">"... that's not,"</div> <div class="rs2"><div class="flexwrap"><div class="rsimg"><img src="/art/woodsr1_3.gif"></div><div class="text">"It's true! And she has found me time and time again. And has our love ever once waned?"</div></div></div> <div class="lm2"><div class="flexwrap"><div class="lmimg"><img src="/art/woodsr1_4.gif"></div><div class="text">"If you don't believe us, Mr. Eccentric, can't you just... [[see|15]] the curses we have?"</div></div></div> </div><style> .wrapper { min-height: 75vh; } .together img { max-height: 50vh; max-width: 100%; height: auto; width: auto; } </style> <div class = "wrapper"> <div class = "together"> "fine."
<img src="/art/woodsr1_14.png">
"i will [[look|16]]."</div> </div>
<style> @keyframes background{ from {background-color: black;} to {background-color: #cc3e63;} } body, tw-story { background: #cc3e63; animation-name: background; animation-duration: 8s; animation-timing-function: ease; animation-fill-mode: forwards; font-weight: 800; font-size: 18px; } @media (max-width:667px){ body, tw-story { font-size: 15px; } } tw-link { color: #99b5bc; } tw-link:hover { color: #7b8ca6; } .bg { position: absolute; width: 100%; object-fit: cover; z-index: 0; height: 75vh; width: 100%; } .together { object-fit: cover; min-height: 75vh; width: 100%; } </style> <div class = "bg"><img src= "/art/Timeline-1.gif"></div> <div class = "wrapper"><div class = "together"><img src="/art/woodsr1_15.png"> [[oh my|17]] </div> </div><style> body, tw-story { background: #cc3e63; } .wrapper { display:flex; flex-direction: column; justify-content: space-between; align-items: space-between; width: 100%; height: 75vh; background: url("/art/woodsr1_16.png") no-repeat center center; background-size: contain; } .rs { order: 1; align-self: flex-start; font-size: 26px; padding-left: 10rem; } .lm { order: 2; align-self: flex-end; text-align: right; font-size: 20px; padding-bottom: 10rem; padding-right: 10rem; } @media (max-width:667px){ rs { font-size: 70%; } ls { font-size: 70%; } } .will { text-align: center; } tw-link { color: #99b5bc; } tw-link:hover { color: #7b8ca6; } </style><div class = "wrapper"><div class = "rs">"Are <sub>you <sub>okay<sub> there?"</sub></sub></sub></div> <div class = "lm">(text-style: "mirror")["Mr. Eccentric?"]</div></div><p class="will">they are <b>everything</b> and i am so [[small|18]]</p><style> body, tw-story { background: #cc3e63; overflow-x: hidden; } .wrapper { display: grid; grid-template-rows: max-content; align-content: stretch; grid-template-areas: "w1 . . . ." ". . . . w2" ". w3 . . w4" "w5 . . w6 w6" ". w7 . . ." "w8 . . . w9"; width: 100%; height: auto; max-height: 100vh; min-height: 75vh; } .willimg { position: absolute; object-fit: cover; display: flex; justify-content: center; z-index: 0; width: 100%; height: 100%; } .willimg img { min-height: 75vh; height: auto; width: auto; } .w1 { grid-area: w1; } .w2 { text-align: right; grid-area: w2; padding-right:4rem; } .w3 { padding-top: 4rem; grid-area: w3; } .w4 { padding-top: 6rem; grid-area: w4; } .w5 { grid-area: w5; } .w6 { grid-area: w6; padding-right: 7rem; padding-top: 5rem; } .w7 { grid-area: w7; } .w8 { grid-area: w8; } .w9 { grid-area: w9; padding-right: 5rem; } .center { text-align: center; width: 100%; z-index: 5; padding-top: 5%; } </style><div class="center">[their curses flow through time itself]<w1|</div> <div class = "wrapper"> <div class= "willimg"><img src="/art/woodsr1_17.png"></div> <div class ="w1">(click: ?w1)[the moss-- it grows endlessly]<w2|</div> <div class ="w2">(click: ?w2)[the fog-- it rolls in from everywhere]<w3|</div> <div class ="w3">(click: ?w3)[they're interconnected]<w4|</div> <div class ="w4">(click: ?w4)[between time, space,]<w5|</div> <div class ="w5">(click: ?w5)[and <b>me</b>]<w6|</div> <div class ="w6">(click: ?w6)[remarkable?]<w7|</div> <div class ="w7">(click: ?w7)[no, no-- it hurts to see.]<w8|</div> <div class ="w8">(click: ?w8)[it hurts to <b>feel</b>]<w9|</div> <div class ="w9">(click: ?w9)[[[it's too much|19]]]</div></div><style> body, tw-story { background: rgb(204,62,99); background: linear-gradient(90deg, rgba(204,62,99,1) 0%, rgba(0,0,0,1) 50%, rgba(204,62,99,1) 100%); } .together { min-height: 75vh; object-fit: cover; } .together img { max-height: 70vh; max-width: 100%; width: auto; height: auto; } .forward { text-align: center; } </style> <div class="wrapper"><div class="together"> <img src="/art/woodsr1_18.png"> <div class = "forward">[[rip it all out|20]]</div> </div></div><style> .together { min-height: 75vh; object-fit: cover; } .together img { max-height: 70vh; max-width: 100%; width: auto; height: auto; } </style> <div class = "wrapper"><div class = "together"><img src="/art/woodr1_19.png"> [[and be gone|21]]</div></div><div class = "wrapper"><div class = "together"><img src="/art/woodsr1_20.png"></div></div><div class="text"> <== ["Oh!"]<res1| (click: ?res1)["Lady Mist! There you are!"]<res2| ==> (click: ?res2)["Res! I've been looking all over for you!"]<lam1| <== (click: ?lam1)["And I you! How I've missed you so."]<res3| ==> (click: ?res3)["Me too! It's-- I'm so glad I've found you."]<lam2| <== (click: ?lam2)["..."]<res4| (click: ?res4)["Do you feel that too?"]<res5| ==> (click: ?res5)["... I-- Yeah..."]<lam3| (click: ?lam3)["Like something is [[missing|22]]."] </div><style> .text{ text-align: center; padding-left: 40%; } </style> <div class = "wrapper"><div class = "together"><img src="/art/woodsr1_21.png"></div></div> <div class="text">"Ah well. With each other, nothing is lost." "If it were important, we would remember it!" "Let us [[leave this place|23]]."</div><style> .end { padding-right: 12%; text-align: right; grid-row: 2; grid-column: 1/ span 3; font-size: 24px; } .text{ top: 75px; left: 75px; position: absolute; } .credits{ font-size: 12px; opacity: 80%; } </style><div class="text">and the will of an eccentric wanders on.</div> <div class = "wrapper"><div class = "together"><img src ="/art/Illustrationlast.png"></div><div class = "end">[[END.|0]] <div class="credits"> by (link:"tooth bradley")[(gotourl:"https://www.toothmonster.com")] Res belongs to (link:"Mythee")[(gotourl:"https://mythee.carrd.co/")] Lady Mist belongs to (link:"FallingMist")[(gotourl:"https://fallingmist.carrd.co/")] </div></div></div>