/*   -=====-                         -=====-
                _..._                           _..._
              .~     `~.                     .~`     ~.
      ,_     /          }                   {          \     _,
     ,_\'--, \   _.'`~~/                     \~~`'._   / ,--'/_,
      \'--,_`{_,}    -(                       )-    {,_}`_,--'/
       '.`-.`\;--,___.'_                     _'.___,--;/`.-`.'
         '._`/    |_ _{@}                   {@}_ _|    \`_.'
            /     ` |-';/           _       \;'-| `     \
           /   \    /  |       _   {@}_      |  \    /   \
          /     '--;_       _ {@}  _Y{@}        _;--'     \
         _\          `\    {@}\Y/_{@} Y/      /`          /_
        / |`-.___.    /    \Y/\|{@}Y/\|//     \    .___,-'| \
^^^^`--`------'`--`^^^^^^^^^^^^^^^^^^^^^^^^^`--`'------`--`^^^^^^^ 

♡ Not quite love, not quite a dream—just something valentinely in between. ♡


Thank you for visiting Valentinely! I kindly ask that you do not take/use/reproduce/repost any of my art and assets.  

Questions? Concerns? Comments? Reach me via email or through telepathic message! 

*/

@import url("https://fonts.googleapis.com/css2?family=Mali&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Delius&display=swap");

* {
  box-sizing: border-box;
}

@font-face {
  src: url(/assets/fonts/Loverine.otf);
  font-family: loverine;
}

@font-face {
  src: url(/assets/fonts/Spirit.ttf);
  font-family: spirit;
}

@font-face {
  src: url(/assets/fonts/NewRomantics.TTF);
  font-family: newromantics;
}

@font-face {
  src: url(/assets/fonts/AdorableLady.ttf);
  font-family: adorablelady;
}

@font-face {
  src: url(/assets/fonts/5squared-pixel.ttf);
  font-family: squared;
}

body {
  background: url(/images/home-dia2.png);
  margin-top: 70px;
  font-family: "Mali", cursive;
  position: relative;
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 1000px;
  height: 300px;
  color: #d986ad;
  overflow-x: hidden;
}

h1 {
  font-family: loverine;
  font-size: 40px;
  text-shadow: 2px 0px #fff, -2px 0px #fff, 0px 2px #fff, 0px -2px #fff, 0 0;
  text-align: right;
  margin-top: 25px;
  margin-right: 25px;
  margin-bottom: -15px;
  filter: drop-shadow(0 0 2px gray);
  z-index: 999;
  color: #e6aac5;
}

h2 {
  color: #fff;
  background: #f0d9df;
  font-weight: 900;
  text-shadow: 1px 1px 0px #d1a1c3, -1px -1px 0px #d1a1c3, -1px 1px 0px #d1a1c3,
    1px -1px 0px #d1a1c3, 0px 0px 1px #d1a1c3, 0px 0px 1px #ff7fbf,
    0px 0px 1px #d1a1c3, 0px -1px 1px #d1a1c3, 2px 1px 1px #d1a1c3,
    0px 1px 1px #d1a1c3;
}

h3 {
  font-family: squared;
  font-size: 8px;
  margin: 0;
  font-weight: 200;
}

h4 {
  font-family: loverine;
  font-size: 40px;
  text-shadow: 2px 0px #fff, -2px 0px #fff, 0px 2px #fff, 0px -2px #fff, 0 0;
  text-align: left;
  margin-top: -375px;
  margin-right: 25px;
  filter: drop-shadow(0 0 2px gray);
  z-index: 999;
  color: #e6aac5;
  pointer-events: none;
}

h5 {
  font-family: loverine;
  font-size: 40px;
  text-shadow: 2px 0px #fff, -2px 0px #fff, 0px 2px #fff, 0px -2px #fff, 0 0;
  text-align: right;
  margin-top: -375px;
  margin-right: -275px;
  filter: drop-shadow(0 0 2px gray);
  z-index: 999;
  color: #e6aac5;
  pointer-events: none;
}


h6 {
  margin: 0;
  font-size: 20px;
  font-family: adorablelady;
  font-weight: 900;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 2px 0px #75676e, -2px 0px #75676e, 0px 2px #75676e,
    0px -2px #75676e, 0 0;
  background: url(/images/banneroverlay.png) repeat-x,
    url(/images/banner-bg.png);
  width: 100%;
  padding: 5px;
  filter: drop-shadow(0 0 2px gray);
  border: 1px solid #e8b9cf;
  border-radius: 10px 10px 0px 0px;
}

.top {
  pointer-events: none;
  width: 100%;
  height: 95px;
  position: fixed;
  right: 0px;
  top: 0px;
  background: url(/images/home-lace.png) repeat left top;
  z-index: 99999999;
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000004d);
}

.hanger {
  position: absolute;
  top: 25px;
  left: -175px;
  height: 433px;
  width: 240px;
  object-fit: contain;
  z-index: 999;
  pointer-events: none;
  animation-name: floating;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }

  50% {
    transform: translate(0, 15px);
  }

  100% {
    transform: translate(0, -0px);
  }
}

.container {
  display: grid;
  grid-template-columns: 0.7fr 1.7fr 0.6fr;
  grid-template-rows: 0.4fr 1.3fr 1.3fr;
  gap: 10px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "nav banner banner"
    "nav intro otherlinks"
    "nav deco otherlinks";
  width: 1000px;
  height: 1000px;
  margin: auto;
  margin-top: -25px;
  filter: drop-shadow(0 0 2px gray);
  border-radius: 7px;
  border-style: solid;
  padding: 25px;
  border-image: url(/images/lacebox.png) 40% fill / 22 round;
  border-image-outset: 20px 20px;
  background: #fff;
  outline: 1px dashed #da9eb6;
  outline-offset: -12px;
  z-index: 2;
}

.nav {
  grid-area: nav;
  width: 250px;
  background: url(/images/nav-hdr.png) repeat-x, url(/images/sozai/argyle17.png);
  filter: drop-shadow(0 0 2px gray);
  border: 1px solid #e8bed2;
  padding-top: 125px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 14px;
  font-family: "Delius", cursive;
  font-weight: 400;
  font-style: normal;
}

.nav h2 {
  background: #f2d3e1;
  margin-top: 10px;
  font-family: AdorableLady;
  font-size: 14px;
  letter-spacing: 8px;
  color: white;
  text-shadow: 1px 0px #c17194, -1px 0px #c17194, 0px 1px #c17194,
    0px -1px #c17194, 0 0;
  border: 1px dashed #a3736790;
  outline: 1px dashed #a3736790;
  outline-offset: 2px;
  width: 100%;
}

.nav h2::before {
  content: url(/images/blkcross.png);
  display: inline-block;
  width: 25px;
  height: 30px;
  transform: scale(2);
  z-index: 999999;
}

#navlace {
  position: relative;
  z-index: 999;
  width: 100%;
  background-image: url(/images/rosebowstring.gif);
  background-repeat: repeat-x;
  height: 38px;
  filter: drop-shadow(0 0 2px #ffdef0) saturate(60%);
  margin: 0;
  margin-top: -12px;
  margin-bottom: -10px;
  margin-left: 10px;
}

#navlace2 {
  position: relative;
  z-index: 999;
  width: 100%;
  background-image: url(/images/rosebowstring2.gif);
  background-repeat: repeat-x;
  height: 38px;
  filter: drop-shadow(0 0 2px #ffdef0) saturate(70%);
  margin: 0;
  margin-top: -12px;
  margin-bottom: -10px;
  margin-left: 10px;
}

ul {
  list-style-image: url(/images/ul-bow.gif);
}

.nav li{margin: 10px;
    padding: 3px;
    border: 1px dashed #a3736790;
    text-align: center;
}

.nav ul li:nth-child(odd):hover {
  background-repeat: no-repeat;
  background-position: right;
  background-image: url(/images/ul-tea.gif);
}

.nav ul li:nth-child(even):hover {
  background-repeat: no-repeat;
  background-position: right;
  background-image: url(/images/ul-rose.png);
}

.nav ul li:nth-of-type(2n + 1){
	background: #c1719420;
	border-radius: 7px;
	width: 125px;
	
}

.nav li:nth-of-type(2n + 2){
	background: #4d435220;
	border-radius: 7px;
	width: 125px;
}


.clock {
  position: absolute;
  top: 125px;
  left: 275px;
  height: 72px;
  width: 47px;
  object-fit: contain;
  z-index: 999;
  pointer-events: none;
}

@media (max-width: 768px) {
  .clock {
    display: none;
  }
}

.banner {
  grid-area: banner;
  text-align: right;
  font-size: 12px;
  background: url(/images/banneroverlay.png) repeat-x,
    url(/images/banner-bg.png);
  height: 100px;
}

#icin-lace {
  position: relative;
  z-index: 900;
  width: 100%;
  background-image: url(/images/icing-nyaa.png);
  height: 41px;
  background-repeat: repeat-x;
  margin-top: -15px;
  filter: drop-shadow(0 0 2px #c985a0);
}

.intro {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1.3fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "greetings greetings decoboxx"
    "greetings greetings decoboxx"
    "greetings greetings decoboxx";
  grid-area: intro;
  overflow: hidden;
}

.greetings {
  grid-area: greetings;
  border: 1px dotted #e6aac5;
  outline: 1px dashed #cf8aa9;
  outline-offset: -5px;
  overflow: hidden;
  padding: 15px;
  text-align: justify;
  font-size: 12px;
  background: url(/images/whtepinkdiabg.png) center;
  background-size: 20%;
  text-shadow: 1px 0px #fff, -1px 0px #fff, 0px 1px #fff, 0px -1px #fff, 0 0;
}

.decoboxx {
  grid-area: decoboxx;
  border-width: 7px;
  border-style: solid;
  border-image: url(/images/pinkborder.gif) 7 round;
  background: url(/images/valentinely-sml-lace.gif) repeat-x, url(/images/pinkquiltbg.png) center;
  overflow: auto;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  background-size: auto, 20%;
  outline: 1px dashed #cf8aa9;
  outline-offset: -10px;
}


.decoboxx img {
  filter: saturate(50%);
  opacity: 0.8;

}

.decoboxx img:hover {
  opacity: 1;
  filter: saturate(100%);
  transition: 0.4s;
  transform: scale(1.3);
}

.decoboxx p {
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid #e6aac5;
  padding: 10px;
}

.date {
  font-size: 11px;
  background: #f2d3e1;
  border-right: 2px solid #e6aac5;
  border-bottom: 2px solid #e6aac5;
  padding: 2px;
  font-family: ms gothic;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
}

.date::before {
  content: url(/images/sozai/candelabra2.gif);
  display: inline-block;
  width: 25px;
  height: 30px;
  transform: scale(2);
  z-index: 999999;
}


.otherlinks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "one one one"
    "two two two"
    "three three three";
  grid-area: otherlinks;
  filter: drop-shadow(0 0 2px gray);
  border: 1px solid #e8bed2;
  padding: 15px;
  background: url(/images/pinkcheck.png);
  font-family: ms gothic;
}

.one {
  grid-area: one;
  filter: drop-shadow(0 0 2px gray);
  border: 1px solid #e8bed2;
  border-radius: 30px 30px 0px 0px;
  outline: 1px dashed #cf8aa9;
  outline-offset: 5px;
  padding: 12px 8px;
  font-size: 10px;
  text-align: center;
  background: url(/images/sozai/lrgdotsbg.png);
  background-size: 75%;
  overflow: hidden;
  box-shadow: rgba(242, 182, 208, 0.35) 0px -50px 36px -28px inset;
}

.one a {
  font-size: 14px;
}

#frill {
  background-image: url(/images/frill.png);
  background-size: auto 100%;
  width: 100%;
  height: 32px;
  filter: drop-shadow(0px 1px #c4c4c4);
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999;
}


.one h2 {
  font-size: 14px;
  box-shadow: 3px 3px #ccc;
}

.one img {
  filter: saturate(70%);
  opacity: 0.7;
}

.one img:hover {
  opacity: 1;
  filter: saturate(100%);
  transition: 0.4s;
}


.two {
  grid-area: two;
  filter: drop-shadow(0 0 2px gray);
  border: 1px solid #e8bed2;
  outline: 1px dashed #cf8aa9;
  outline-offset: 5px;
  text-align: center;
  background: url(/images/piiano.gif) repeat-x, url(/images/linesgray-mewchara.png), white;
  background-size: 520px, auto;
  box-shadow: rgba(242, 182, 208, 0.35) 0px -50px 36px -28px inset;
}

.two h2 {
  font-size: 14px;
  box-shadow: 3px 3px #ccc;
}

.two img {
  filter: saturate(50%);
  opacity: 0.8;
}

.two img:hover {
  opacity: 1;
  filter: saturate(100%);
  transition: 0.4s;
  transform: scale(1.3);
}

.three {
  grid-area: three;
  filter: drop-shadow(0 0 2px gray);
  border: 1px solid #e8bed2;
  outline: 1px dashed #cf8aa9;
  outline-offset: 5px;
  background: url(/images/piiano.gif) repeat-x, url(/images/gridbg.png), white;
  background-size: 520px, 8%;
  text-align: center;
  overflow: auto;
  box-shadow: rgba(242, 182, 208, 0.35) 0px -50px 36px -28px inset;
}

.three h2 {
  font-size: 14px;
  box-shadow: 3px 3px #ccc;
}

.three img {
  filter: saturate(50%);
  opacity: 0.8;
}

.three img:hover {
  opacity: 1;
  filter: saturate(100%);
  transition: 0.4s;
  transform: scale(1.2);
}

.deco {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "markeww markeww markeww"
    "latest-art feat-oc deco2"
    "latest-art feat-oc deco2";
  grid-area: deco;
  height: 300px;
}

.markeww {
  grid-area: markeww;
  border-width: 10px;
  border-style: solid;
  border-image: url(/images/marqborder.png) 35 round;
  text-align: center;
  background: url(/images/pink-dots-tile.png);
  height: 60px;
}

.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 50px;
  overflow: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 8s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.latest-art {
  grid-area: latest-art;
  border-width: 7px;
  border-style: solid;
  border-image: url(/images/pinkborder.gif) 7 round;
  background: url(/images/pinkquiltbg.png);
  background-size: 20%;
  text-align: center;
  overflow: hidden;
  outline: 1px dashed #cf8aa9;
  outline-offset: -10px;
}

.latest-art img {
  width: 100px;
  border-radius: 15px;
  border: 2px outset #e6aac5;
  margin-top: 10px;
}

.latest-art img:hover {
  filter: saturate(0%);
  transition: 2s;
}

.feat-oc {
  grid-area: feat-oc;
  border-width: 7px;
  border-style: solid;
  border-image: url(/images/pinkborder.gif) 7 round;
  background: url(/images/pinkquiltbg.png);
  background-size: 20%;
  text-align: center;
  outline: 1px dashed #cf8aa9;
  outline-offset: -10px;
}

.feat-oc img {
  width: 100px;
  border-radius: 15px;
  border: 2px outset #e6aac5;
  margin-top: 10px;
}

.feat-oc img:hover {
  filter: saturate(0%);
  transition: 2s;
}

.deco2 {
  grid-area: deco2;
  border-width: 7px;
  border-style: solid;
  border-image: url(/images/pinkborder.gif) 7 round;
  background: url(/images/pinkquiltbg.png);
  background-size: 20%;
  text-align: center;
  font-size: 12px;
  outline: 1px dashed #cf8aa9;
  outline-offset: -10px;
}

.deco2 img {
  width: 100px;
  border-radius: 15px;
  border: 2px outset #e6aac5;
  margin-top: 10px;
}

.deco2 img:hover {
  filter: saturate(0%);
  transition: 2s;
}

.softy {
  opacity: 0.7;
}

.dressforms {
  position: absolute;
  bottom: 375px;
  left: 300px;
  height: 50px;
  width: 57px;
  object-fit: contain;
  z-index: 9999;
  filter: saturate(75%);
}

.ribon {
  position: absolute;
  top: 525px;
  right: 280px;
  height: 52px;
  width: 339px;
  object-fit: contain;
  z-index: 9999999;
  pointer-events: none;
}

.heartpin {
  position: absolute;
  top: 5px;
  right: -20px;
  height: 70px;
  width: 76px;
  object-fit: contain;
  filter: pixelate;
  pointer-events: none;
  z-index: 99999;
  filter: drop-shadow(0 0 2px #c4849d);
}

#lace {
  position: relative;
  z-index: 999;
  width: 100%;
  background-image: url(/images/lace.png);
  background-repeat: repeat-x;
  height: 15px;
  filter: drop-shadow(0 0 2px #c985a0);
}

footer {
  margin: auto;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  font-family: ms gothic;
}

a {
  font-family: "Delius", cursive;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  color: #fff;
  text-shadow: 1px 0px #db93b3, -1px 0px #db93b3, 0px 1px #db93b3,
    0px -1px #db93b3, 0 0;
}

a:visited {
  color: #fff;
}

a:hover {
  font-family: spirit;
  font-size: 15px;
  cursor: crosshair;
  transition: 1.0s ease;
  color: #fff;
  text-shadow: 1px 0px #db93b3, -1px 0px #db93b3, 0px 1px #db93b3,
    0px -1px #db93b3, 0 0;
  background: rgb(242, 211, 225);
  text-decoration: underline wavy #fff;
}

.lantern {
  bottom: -690px;
  position: absolute;
  right: 12px;
  height: 156px;
  width: 41px;
  object-fit: contain;
  pointer-events: none;
  z-index: 9999;
}

@media (max-width: 768px) {
  .lantern {
    display: none;
  }
}

.lovey {
  bottom: -625px;
  position: absolute;
  left: 425px;
  height: 40px;
  width: 240px;
  object-fit: contain;
  pointer-events: none;
  z-index: 9999;
}

.dia {
  bottom: -350px;
  position: absolute;
  left: 300px;
  height: 13px;
  width: 483px;
  object-fit: contain;
  pointer-events: none;
  z-index: 9999;
}

.side1 {
  background: url(https://maidenless.neocities.org/new/newer/Wavingdede.gif);
  background-size: contain;
  height: 200px;
  width: 200px;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: block;
  position: relative;
  top: -260px;
  left: -572px;
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000004d);
  pointer-events: none;
}

.side2 {
  background: url(/images/art/valentinely-milkydoll.png);
  background-size: contain;
  height: 500px;
  width: 500px;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: block;
  position: relative;
  top: -1200px;
  right: -725px;
  filter: saturate(75%) opacity(90%);
  pointer-events: none;
}

#currently {
  position: absolute;
  width: 300px;
  top: 300px;
  right: -375px;
  z-index: 9999999999;
}

#currently p {
  text-align: justify;
  font-size: 12px;
}

#currently .spiral {
  height: 14px;
  width: 200px;
  margin: -17px 0 0 -10px;
  overflow: hidden;
  position: absolute;
  background: url(/images/notepad-spiral.png);
}

#currently .pad {
  width: 200px;
  height: 150px;
  margin-bottom: 20px;
  padding: 5px 10px 5px 10px;
  background: url(/images/notepad.png);
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  z-index: 9999;
  box-shadow: rgba(0, 0, 0, 0.07) 5px 5px;
  font-size: 13px;
  line-height: 13px;
}

.nb {
  font-family: spirit;
}

.gbook {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 30px;
  grid-auto-flow: row;
  grid-template-areas:
    "cbox updates updates"
    "cbox updates updates"
    "cbox updates updates";
  width: 1000px;
  height: 400px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 25px;
  filter: drop-shadow(0 0 2px gray);
  border-radius: 7px;
  border-style: solid;
  padding: 25px;
  border-image: url(/images/lacebox.png) 40% fill / 22 round;
  border-image-outset: 20px 20px;
  background: #fff;
  outline: 1px dashed #cf8aa9;
  outline-offset: -12px;
  z-index: 2;
}

.cbox {
  grid-area: cbox;
  border: 1px solid #e8bed2;
}

.updates {
  grid-area: updates;
  filter: drop-shadow(0 0 2px gray);
  border: 1px solid #e8bed2;
  overflow: auto;
  text-align: justify;
  padding: 25px;
  background: url(/images/sozai/ribonbg1.png);
  background-size: 25%;
}

.updates::before {
  content: "";
  transform: scaleY(-1);
  border-radius: 3px;
  z-index: 99;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background: url(/images/homelacewhite.png);
  background-size: cover;
  height: 35px;
  filter: drop-shadow(1px 0px 1px #b6b6b6) drop-shadow(1px -1px 1px #b6b6b6);
}

.updates p {
  background: url(/images/sozai/argyle17.png);
  padding: 10px;
  border-radius: 25px;
  box-shadow: 5px 5px 5px #cccccc90;
}

*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  border-radius: 2px;
  border: 1px dotted #e6aac5;
  background: #fff;
}

*::-webkit-scrollbar-thumb {
  background: url(/images/sozai/whitepinkdiamond-bg.png) repeat;
  background-size: 60px;
  border-radius: 2px;
  border: 1px dotted #e6aac5;
}

::-moz-selection {
  color: #fff;
  background: #de6a95;
}

::selection {
  color: #fff;
  background: #e8bed2;
}