@font-face {
  src: url(fonts/handjet/Handjet-Regular.ttf);
  font-family: Handjet;
}

@font-face {
  src: url(fonts/ibmplexmono/IBMPlexMono-MediumItalic.ttf);
  font-family: IBM;
}

@font-face {
  font-family: PatrickHand;
  src: url(fonts/patrickhand/PatrickHand-Regular.ttf);
}

@font-face {
  font-family: HomeadeApple;
  src: url(fonts/homeadeapple/HomemadeApple-Regular.ttf);
}

*::selection{
  color:#c01168;
  background-color: #fff1bb8a;
}


   ::-webkit-scrollbar {
width: 14px
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e1cbd7, #ffe7f5 20%);
border-left: 1px solid #c33072;
}

::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(90deg, rgb(122, 27, 79) 0%, rgb(255, 194, 219) 28%, rgb(238, 138, 190) 55%, rgb(252, 202, 239) 87%);
  border-left: 1px solid #c33072;
}

/*horizontal scroll*/

::-webkit-scrollbar:horizontal {
height: 14px
}

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e1cbd7, #ffe7f5 20%);
 border-top: 1px solid #c33072;
}

::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(180deg,  rgb(122, 27, 79) 0%, rgb(255, 194, 219) 28%, rgb(238, 138, 190) 55%, rgb(252, 202, 239) 87%);
  border-top: 1px solid #c33072;
}


body {
    background-image: url(bg/strawbs.jpg);
    margin: 0;
    width: 730px;
    height: 1343px;
    position: relative;
}

#blessthismess {
    display: block; 
    position: relative;
    margin-left: auto; 
    margin-right: auto; 
    width: 80%; 
    margin-top: 20px;
    filter: drop-shadow(0px 5px 5px #ff1158a3);
    animation: heartbeat 2s ease-in-out infinite;
    z-index: 999;
}

#rosary {
    position: absolute;
    width: 50%;
    top: 3%;
    left: 20%;
    filter: drop-shadow(0px 0px 5px #ffe294);
    z-index: 2;
}

@keyframes heartbeat {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.thissite {
    font-weight: bold;
    margin-top: -15px;
    position: relative;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.1em;
    font-style: italic;
    z-index: 3;
    background-image: url(divs/glitterstripe.gif);
    color:#ffe294;
    text-shadow: 2px 2px 0px #60001d, -2px -2px 0px #ff0da6;
}

.cliques {
    position: relative;
    width: 300px;
    margin-top: 2%;
    left: 3%;
    z-index: 0;
    filter: drop-shadow(5px 0px 5px #ff649be3);
    transition: filter 0.3s ease-in-out;
}

.cliques:hover {
    filter: drop-shadow(5px 0px 5px #cb0047);
    z-index: 10;
}

.notecliques {
  position: absolute;
  width: 100%;
  z-index: 0;
  filter: sepia(100%) hue-rotate(-60deg) saturate(300%);
}

.cliquescont {
  position: absolute;
  margin-top: 13%;
  margin-left: 6%;
  z-index: 1;
  width: 60%;
  font-family: PatrickHand;
  line-height: 1.06em;
  color: #60001d;
}

a {
  color: #ffda83;
  text-shadow:0px 0px 3px #90002b;
  transition: 0.3s ease-in-out;
}

a:hover {
  color: antiquewhite;
  text-shadow: 0px 0px 5px #e300a6;
}

#applepie {
  position: relative;
  width: 250px;
  margin-top: 100px;
  margin-left: 5%;
  z-index: 2;
  filter: drop-shadow(0px 5px 5px #bb107c);
}

.applegotch {
  background-color: #e300a6;
  position: relative;
  margin-top: -30%;
  margin-left: 37%;
  width: 275px;
  z-index: 1;
  filter: drop-shadow(0px 5px 5px #e9149bbb);
  transition: 0.3s ease-in-out;
}

.apple {
  position: absolute;
  width: 100%;
  z-index: 1;
}

.gotchtext {
  text-align: center;
  box-sizing: border-box;
  display: block;
  font-family: Handjet;
  font-size: 0.9rem;
  letter-spacing: -0.03em;
  line-height: 0.8em;
  padding: 8px;
  background-image: url(bg/5QV3UYs.gif);
  color: white;
  position: absolute;
  margin-top: 33%;
  width: 37%;
  height: 100px;
  left: 17%;
  z-index: 1;
}

.applegotch:hover {
  transform: scale(1.1);
  filter: drop-shadow(0px 5px 5px #ffe367bb);
  transform-origin: bottom center;
}

#milkis {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: 11%;
  margin-top: -35%;
  transform: rotate(20deg);
  width: 30%;
  filter: drop-shadow(-5px 0px 10px #ffe367bb) sepia(100%) hue-rotate(-60deg) saturate(300%);
  z-index: 0;
}

#pricetag {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: 0;
  margin-top: -90%;
  width: 60%;
  z-index: -1;
  box-shadow: 0px 0px 10px #60001dbb;
}

#monamies {
  z-index: 1;
  font-size: 2.1em;
  position: absolute;
  display: inline-block;
  background-image: url(img/diary/padbg.png);
  font-family: HomeadeApple;
  line-height: 1em;
  padding: 10px;
  color: #eb0076;
  text-shadow: 2px 2px 3px #ffa3cb;
  text-decoration: underline wavy #ff4abd;
  box-shadow: 0px 3px 3px #ff258e9f;
    margin-bottom: 0;
}

.webname {
  z-index: 0;
  position: relative;
  left: 7%;
  margin-top: 12%;
  width: 325px;
  height: 250px;
  background-image: url(bg/cherryblossoms.jpg);
  padding: 10px;
  border-radius: 25px;
  filter: drop-shadow(0px 0px 10px #ffe7ab);
  transition: filter 0.2s ease-in-out;
}

.webname:hover {
  z-index: 99;
  filter: drop-shadow(0px 0px 10px #ff3cb1);
}

#whymonamies {
  text-align: left;
  font-family: IBM;
  letter-spacing: -0.05em;
  line-height: 1em;
  font-size: 0.9em;
  padding: 5px;
  top: 32%;
  margin-left: 5%;
  width: 85%;
  position: absolute;
  background-color: rgba(255, 239, 244, 0.841);
  box-shadow: inset 0px -3px 5px #ca2178c7;
  font-style: italic;
  color: #60001d;
}

#monawrap{
  left: 225px;
  top: -40px;
  width: 125px;
  position: relative;
  animation: shake 0.5s;
  animation-iteration-count: infinite;
  filter: drop-shadow(0px 3px 5px #ff258b) sepia(100%) hue-rotate(-60deg) saturate(300%);
  z-index: 9;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}



#max {
  margin-top: -15%;
  margin-left: 5%;
  z-index: 0;
  transform: rotate(-10deg);
  background-image: linear-gradient(#ffffff50, #ffa6c7), url('img/abtsite/honadith1.png');
  box-shadow: 0px 3px 10px #d68eab, inset 13px 0px 6px -10px #fff, inset -13px 0px 6px -10px #fff, inset 0px 13px 6px -9px #ffffff, inset 0px -13px 6px -10px #fff;
  transition: box-shadow 0.3s ease-in-out;
}
#max:hover {
  z-index: 99;
  box-shadow: 0px 3px 7px 7px #ff5a9cb3, inset 13px 0px 6px -10px #ffeaac, inset -13px 0px 6px -10px #ffeaac, inset 0px 13px 6px -9px #ffeaac, inset 0px -13px 6px -10px #ffeaac;
}

#max .content {
  /* change the background color of the slide up */
background-color: #ffe294;
padding-right: 10px;
padding-left: 10px;
/* make the shadow the same color as the background */
box-shadow: 0 0 30px 35px #ffe294;
}

#design {
  margin-top: -15%;
  position: relative;
  margin-left: 45%;
  z-index: 0;
  transform: rotate(10deg);
  background-image: linear-gradient(#ffffff50, #ffe294), url('img/abtsite/sakidith2.png');
  box-shadow: 0px 3px 10px #d68eab, inset 13px 0px 6px -10px #fff, inset -13px 0px 6px -10px #fff, inset 0px 13px 6px -9px #ffffff, inset 0px -13px 6px -10px #fff;
  transition: box-shadow 0.3s ease-in-out;
}
#design:hover {
  z-index: 99;
  box-shadow: 0px 3px 7px 7px #ff5a9cb3, inset 13px 0px 6px -10px #ffa6c7, inset -13px 0px 6px -10px #ffa6c7, inset 0px 13px 6px -9px #ffa6c7, inset 0px -13px 6px -10px #ffa6c7;
}

#design .content {
  /* change the background color of the slide up */
background-color: #ffa6c7;
padding-right: 10px;
padding-left: 10px;
/* make the shadow the same color as the background */
box-shadow: 0 0 30px 35px #ffa6c7;
}

.container {
position: relative;
width: 45%;
height: 200px;
z-index: 999;
background-position: center;
background-size: cover;
color: #fff;
overflow: hidden;
border-radius: 10px;
}
 
h1 {
position: absolute;
font-family: HomeadeApple;
display: block;
color: #fff7cd;
font-size: 3em;
text-align: center;
animation: glow 1.5s infinite;
}

@keyframes glow { 0% { text-shadow: 0px 0px 15px rgb(255, 159, 183); } 50% { text-shadow: 0px 0px 5px rgb(255, 219, 228); } 100% { text-shadow: 0px 0px 15px rgb(255, 159, 183); }
}

p {
  margin-top: -1%;
font-family: PatrickHand;
color: #af0e3e;
font-size: 0.9em;
text-align: right;
margin-right: 10%;
}
 
p2 {
color: #4800007c;
font-size: 0.6em;
text-align: right;
font-style: italic;
font-weight: 900;
}
 
 
.top-left {
position: absolute;
top: 0px;
left: 8px;
}
 
.top-right {
position: absolute;
top: 4px;
right: 8px;
}
 
.content {
  line-height: 0.8em;
position: absolute;
top: 60px;
/* change the opacity of the slide up */
opacity: .7;
width: 100%;
height: 90%;
-webkit-transform: translateY(80%);
transform: translateY(80%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.2s 0.3s, -webkit-transform 0.4s;
transition: opacity 0.2s 0.3s, -webkit-transform 0.4s;
transition: transform 0.4s, opacity 0.2s 0.3s;
transition: transform 0.4s, opacity 0.2s 0.3s, -webkit-transform 0.4s;
}
 
.slide-up:hover .content {
/* change the opacity of the slide up */
opacity: .8;
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: opacity 0.2s, -webkit-transform 0.4s;
transition: opacity 0.2s, -webkit-transform 0.4s;
transition: transform 0.4s, opacity 0.2s;
transition: transform 0.4s, opacity 0.2s, -webkit-transform 0.4s;
}

#suselle {
  position: absolute;
  right: 12%;
  margin-top: -32%;
  z-index: 2;
  transform: rotate(10deg);
  width: 30%;
  filter: drop-shadow(0px 5px 2px #bd1265d6);
}

title {
  background-color: #60001d;
}

#honawie {
  position: absolute; 
  width: 60%;
  bottom: 0;
  left: -10%;
  z-index: 1;
}

h3 {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-style: italic;
  font-size: 5rem;
  position: absolute;
  bottom: 0;
  right: 5%;
  line-height: 0;
    font-family: IBM;
  letter-spacing: 1.9px;
  color: #ffe799;
  text-shadow: 2px 2px 4px #e26b97;

  padding-left: 0;
  margin-left: 0;

  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #e26b97;
  text-underline-offset: 4px;

  transition: text-shadow 0.3s ease-in-out;
  z-index: 9;
}
h3:hover {
  text-shadow: 2px 2px 4px #fff495;
    text-decoration-color: #ff9ccc;
}

#julyna {
  position: absolute;
  right: 5%;
  bottom: 2%;
  width: 40%;
  transform: rotate(5deg);
  z-index: -1;
  --shadow: drop-shadow(-5px 0px 5px #ffedc5);
}

#totalgirl {
  position: absolute;
  z-index: -1;
  transform: rotate(-20deg);
  right: 40%;
  width: 25%;
  --shadow: drop-shadow(0px 0px 5px #ffedc5);
}

#dolorosa {
  position: absolute;
  bottom: 0;
  --shadow: drop-shadow(0px 0px 5px #ffebb5);
  width: 15%;
  right: 5%;
}

#monapack {
  position: absolute;
  bottom: 15%;
  width: 20%;
  right: 30%;
  --shadow: drop-shadow(0px 3px 5px #ffedc5);
}

#pinkplush {
  position: absolute;
  bottom: 0;
  width: 35%;
  z-index: 6;
  left: 10%;
  --shadow: drop-shadow(-5px 0px 5px #ffedc5);
}

#mcr {
  position: absolute;
  z-index: -1;
  width: 10%;
  margin-top: -15%;
  left: 37%;
  --shadow: drop-shadow(0px 0px 5px #ffedc5);
  transform-origin: top center; 
  animation: swing ease-in-out 2s infinite alternate; 
}

@keyframes swing {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }}

#aioi {
  position: absolute;
  bottom: 5%;
  width: 30%;
  z-index: 1;
  left: 35%;
  --shadow: drop-shadow(0px 0px 5px #ffedc5);

}

#leomcr {
  position: absolute;
  z-index: -2;
  width: 17%;
  margin-top: -13%;
  left: 25%;
  --shadow: drop-shadow(0px 0px 5px #ffedc5);
}

#ven {
  position: absolute;
  width: 20%;
  transform: rotate(30deg);
  right: 15%;
  transform: rotate(30deg);
  --shadow: drop-shadow(0px 0px 5px #ffedc5);
}

#xiao {
  position: absolute;
  width: 19%;
  right: 42%;
    transform: rotate(-40deg);
  bottom: 8%;
  z-index: 1;
  --shadow: drop-shadow(0px 0px 5px #ffedc5);
}

.moodboard img{
  filter: sepia(100%) var(--shadow, none) hue-rotate(-60deg) saturate(300%);
  transition: filter 0.1s ease-in-out;
}

.moodboard img:hover{
  filter: sepia(0%) var(--shadow, none) hue-rotate(0deg) saturate(100%);
}