:root {
  --white: #faf5f8;
  --gray: #e6dae0;
  --black: #4a303e;
  --black1: #755064;
  --pink: #f5b3d7;
  --pink1: #eb7fba;
  --pink2: #bf4d80;
  --green: #c4ed8e;
  --green1: #91c251;
  
  --blackoutline: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black), 0 0;
  
  --greenbutton: linear-gradient(to bottom, #c8ef95 0%,#b8e28c 10%,#a3d17b 25%,#a3d779 37%,#a6de78 50%,#92d15b 51%,#c3e587 83%,#e1f199 100%);
  --pinkbuttonn: linear-gradient(to bottom, #f8c2df 0%,#f0b4d1 10%,#e29ebc 25%,#e79fbd 37%,#eca0c0 50%,#e17fa9 51%,#f1b1d7 83%,#fac6ef 100%);
  
}

@font-face {
  font-family: chaos;
  src: url(https://file.garden/ZXJkOcYwORXn2d9V/stamps/Les%20Flos%20Chaos.otf)
}

span.chaos {
  font-family: chaos;
}

img.div {
  width: 100%;
}

flex {
  display: flex;
  
}

flex left, flex middle {
  display: block;
  margin-right: 5px;
}

flex right {
  display: block;
}

.wrapper.one {
  display: inline-block;
border-width: 7px;

padding: 5px;
border-style: solid;
border-image: url("https://file.garden/ZXJkOcYwORXn2d9V/stamps/ididnt/end%20up.png") 7 fill round;       
    
}

.main {
  width: 900px;
  border: 2px solid var(--black1);
  background: var(--white);
  color: var(--black);
  border-radius: 10px;
    font-family: "Unkempt", cursive;
}


.div.pinkgreenlace {
 width: 100%;
 height: 40px;
 position: relative;
  z-index: 2;
  background-size: 32%;
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/stamps/ididnt/pinkgreen%20upd.png);
  background-repeat: repeat-x;
}

.head {
  box-sizing: border-box;
  aspect-ratio: 75 / 8;
  margin-top: -10px;
  padding: 5px;
  position: relative;
  border-bottom: 1px solid var(--black);
  z-index: 1;
  font-size: 20px;
  background: var(--pink);
  color: var(--pink1);
}

flex.one left {
  width: calc(80% - 5px);
}
.chat {
  /* triangle dimension */
  --a: 90deg; /* angle */
  --h: 0.5em;   /* height */

  --p: 64%;  /* triangle position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */
  --b: 2px; /* border width  */
  --c1: var(--black1);
  --c2: var(--white);
    color: var(--black1);
  font-size: 18px;
  width: 85%;
  text-align: center;
display: inline-block;
  padding: 8px;
  border-radius: var(--r)/var(--r) min(var(--r),var(--p) - var(--h)*tan(var(--a)/2)) min(var(--r),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r);
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,
    100% min(100%,var(--p) + var(--h)*tan(var(--a)/2)),
    calc(100% + var(--h)) var(--p),
    100% max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)));
  background: var(--c1);
  border-image: conic-gradient(var(--c1) 0 0) fill 0/
    max(0%,var(--p) - var(--h)*tan(var(--a)/2)) 0 max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
  position: relative;
}
.chat:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: var(--b);
  border-radius: inherit;
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,
    calc(100% - var(--b)) min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)),
    calc(100% + var(--h) - var(--b)/sin(var(--a)/2)) var(--p),
    calc(100% - var(--b)) max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)));
  background: var(--c2) content-box;
  border-image: conic-gradient(var(--c2) 0 0) fill 0/
    max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) 0 max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
}

.head img {
  width: 10%;
  position: absolute;
  right: 5px;
}

flex.one right {
  width: 20%;
}

flex.one left {
  width: 80%;
  background: linear-gradient(0deg,rgba(196, 237, 142, 1) 0%, rgba(250, 245, 248, 1) 100%);
  border-radius: 10px;
}

.pfp img {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-width:8px;
border-style:solid;
margin-bottom: 25px;
border-image: url("https://file.garden/ZXJkOcYwORXn2d9V/stamps/ididnt/output-onlinepngtools.png") 8 fill round;  

}

flex.one {
  padding: 5px;
}

.marquee {
  border: 2px solid var(--black);
  background: var(--white);
  padding: 5px;
  color: var(--pink1);
  --gap: 0px;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 15s linear infinite;
    animation-play-state: running;
}

.marquee__content img {
  display:inline-block;
  width: 100px;
  margin-right: 3px;
  filter: sepia(1) hue-rotate(-75deg) brightness(0.95) saturate(1.1);
  transition: 0.5s;
}

.marquee:hover .marquee__content {
  animation-play-state: paused;
}

.marquee:hover .marquee__content img {
  filter: none;
}

flex.two left, flex.two right {
  width: calc(40% - 5px);
  background: none;
  border-radius: 0px;
  padding: 0px;
}

flex.two left {
  border-width:12px;
border-style:solid;
background: var(--white);
background-clip: padding-box;
border-image: url("https://file.garden/ZXJkOcYwORXn2d9V/stamps/pink%20lace%20grey.png") 11 fill round;  
}

flex.two middle {
  width: 20%;
}

flex.three left {
  width: calc(50% - 5px);
  border: none;
}


flex.three right {
  width: 50%;
}


.disclaim {
position: relative;
overflow: hidden;
background-color: #e3fcc1;
background-image: repeating-linear-gradient(45deg, #a1dd5480 0, #a1dd5480 16px, #e3fcc1 16px, #e3fcc1 32px);
border: 2px solid var(--black1);
border-radius: 10px;
padding: 2px;
font-weight: 700;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
}


@keyframes scroll {
0% {
  transform: translateX(0);
}
100% {
  transform: translateX(calc(-100% - var(--gap)));
}
}

center.abt {
  color: var(--pink2);
  font-size: 18px;
  letter-spacing: -1px;
}

.mainnav {
  border: 2px solid var(--black1);
  border-radius: 10px;
  background: var(--white);
}

.mainnav a {
  display: inline-block;
  width: calc(100% - 10px);
  padding: 5px;
  text-shadow: var(--blackoutline);
  color: var(--white);
  font-weight: 700;
  border-bottom: 1px solid var(--black1);
  transition: 0.5s;
}

.mainnav a:first-of-type {
  border-radius: 10px 10px 0px 0px;
}

.mainnav a:last-of-type {
  border-radius: 0px 0px 10px 10px;
  border-bottom: none;
}

.mainnav a:nth-of-type(odd) {
  background: var(--pinkbuttonn);
}

.mainnav a:nth-of-type(even) {
  background: var(--greenbutton);
}


.mainnav a:hover {
  filter: brightness(1.1);
}

.mainnav a.work {
  text-decoration: line-through;
  pointer-events: none;
}

.mainnav a.new:before {
  content:"NEW ! ";
}

.fanlist, .webring {
  border: 2px solid var(--black);
  background: var(--white);
  height: 175px;
  border-radius: 10px;
  overflow: auto;
  margin-top: 5px;
  text-align: center;
  padding: 3px;
}

.fanlist img {
  display: inline-block;
  width: 25%;
  margin: 2px;
  transition: 0.5s;
}

.fanlist a img {
  filter: sepia(1) brightness(0.90) hue-rotate(30deg);
}

.fanlist a img:hover {
  filter: sepia(0) brightness(1) hue-rotate(0deg);
}

.webring {
  width: calc(100% - 14px);
  height: 200px;
  text-align: center;
  padding: 5px;
  background: linear-gradient(180deg,rgba(245, 179, 215, 1) 0%, rgba(250, 245, 248, 1) 100%);
}

.fanlist {
  border-width: 7px;
margin-top: 10px;
border-style: solid;
border-image: url("https://file.garden/ZXJkOcYwORXn2d9V/stamps/ididnt/end%20up.png") 7 fill round;    
}

.webring span#title {
  font-family: chaos;
  font-size: 25px;
  color: var(--green);
  text-shadow: var(--blackoutline);
}

.webring div, .webring img {
  width: 100%;
  margin-bottom: 2px;
}

.top {
  padding: 10px;
  padding-bottom: 0px;
  position: relative;
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/stamps/ididnt/andmore.jpeg);
  background-size: 100%;
  border-radius: 10px 10px 0px 0px;
}

.top .nav {
  border: 2px solid var(--black);
  padding: 5px;
  border-radius: 10px 10px 0px 0px;
  background: var(--white);
  border-bottom: none;
  position: absolute;
  bottom: 0;
  right: 10px;
}

.top .nav a {
  display: inline-block;
  border: 1px solid var(--black1);
  padding: 5px;
  transition: 0.5s;
  font-size: 20px;
  border-radius: 10px;
  background: var(--pinkbuttonn);
  font-weight: 700;
  color: var(--white);
  text-shadow: var(--blackoutline);
}

.top .nav a:hover {
  filter: brightness(1.1);
}

.top #site {
  display: inline-block;
  font-size: 80px;
  font-family: chaos;
  text-shadow: var(--blackoutline);
}

.top #site span:nth-of-type(odd) {
  display: inline-block;
  color: var(--pink1);
}
.top #site span:nth-of-type(even) {
  display: inline-block;
  color: var(--green);
}

flex.four left {
  width: calc(40% - 5px);
}

flex.four right {
  width: 60%;
}

.top #site span:hover {
  animation: jump 1s infinite;
}

@keyframes jump {
0%, 100% {
    transform: translateY(0px);
  }
  
  50% {
    transform: translateY(-10px);
  }

}