:root {
  --white: #f1e2dc;
  --white2: #f2ebe9;
--purp1: #785589;
--purp2: #977390;
--pink: #e5a2ca;
--tan: #e9c299;
--black: #172121;
}

@font-face {
  font-family: pork;
  src: url(https://file.garden/ZXJkOcYwORXn2d9V/porkys/PORKYS_.TTF);
}

@font-face {
  font-family: dis;
  src: url(https://file.garden/ZXJkOcYwORXn2d9V/fonts/discipline.otf);
}


html {
  background-color: var(--white2);
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/ash%20audio/output-smallpngtools.png);
  background-size: 15%;
}
body {
  width: 70vw;
margin-top: 20px;
color: var(--black);
  margin-left: auto;
  margin-right: auto;
  font-family: dis;

}

banner.a {
  position: relative;
  display: block;
  width: calc(100% - 4px);
  border: 3px solid var(--black);
  margin-bottom: 15px;
  background-color: var(--white);
  border-radius: 10px;
  
}

.marquee-container {
  overflow: hidden; 
  white-space: nowrap;
  width: 100%;
}

.marquee-content {
    display: inline-block;
  letter-spacing: 0px;
  font-size: 0px;
    line-height: 0px;
  animation: scroll 10s linear infinite; 
  z-index: 1;
}


.marquee-content img {
  display: inline-block;
  width: 10%;
  margin: 0px;
  opacity: 50%;
    vertical-align: top;
    margin-top: -2%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

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

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

banner.a span.logo {
  display: inline-block;
  font-family: pork;
  position: absolute;
  z-index: 5;
  font-size: 8vw;
  left: 50%;
  letter-spacing: 5px;
  text-shadow: -6px 6px 0px #F1E2DC, 6px 6px 0px #F1E2DC, 6px -6px 0px #F1E2DC, -6px -6px 0px #F1E2DC, -6px 0px 0px #F1E2DC, 6px 0px 0px #F1E2DC, 0px 6px 0px #F1E2DC, 0px -6px 0px #F1E2DC, 0px -8px 0px #172121, 0px 8px 0px #172121, 8px 8px 0px #172121, -8px 8px 0px #172121, -8px -8px 0px #172121, 8px -8px 0px #172121, 0px -8px 0px #172121;
  transform: translateX(-50%);
  -webkit-text-stroke: 2px var(--black);
  top: -35%;
  
}

span.logo span {
   display: inline-block;
}


span.logo span:nth-child(odd) {
   color: var(--purp1);
}

span.logo span:nth-child(even) {
  color: var(--pink);
}

flex {
  display: flex;
}

a {
  color: var(--purp1);
}


flex.a left {
  display: block;
  width: calc(25% - 5px);
  margin-right: 5px;
}
flex.a right {
  display: block;
  width: 75%;
}

flex.a left about, flex.a left navigate {
  display: block;
  background: var(--white);
  width: calc(100% - 14px);
  padding: 4px;
  border-radius: 5px;
  font-size: .95vw;
  border: 3px solid var(--black);
  margin-bottom: 5px;
  
}
flex.a left about {
  background: var(--white2);
}

flex.a left about img.pfp {
  width: 25%;
  aspect-ratio: 1 / 1;
  float: left;
  
}

navigate span {
  display: inline-block;
  width: 100%;
  font-family: pork;
  color: var(--pink);
  -webkit-text-stroke: 2px var(--black);
  font-size: 3vw;
  border-bottom: 4px var(--tan) dashed;
}


navigate a {
  display: inline-block;
  background: #f2ebe9;
  width: calc(100% - 8px);
  border: 2px solid var(--black);
  padding: 2px;
  border-bottom: 1px solid var(--black);
  border-top: none;
  color: var(--black);
  transition: 1s;
  font-size: 1.2vw;
  text-decoration: none;
}

navigate a:hover {
  background: var(--tan);
  letter-spacing: 3px;
}

navigate a:first-of-type {
    margin-top: 5px;
  border-top: 2px solid;
  border-radius: 10px 10px 0px 0px;
}

navigate a:last-of-type {
  border-bottom: 2px solid;
  border-radius: 0px 0px 10px 10px;
}


right main.a {
  display: block;
  background: var(--white2);
  border: 3px solid var(--black);
  padding: 5px;
  width: calc(100% - 16px);
  border-radius: 5px;
}


main.a img.mainchibi {
  Float: left;
  width: 30%;
}

main.a span.title {
  display: inline-block;
  font-family: pork;
  font-size: 4vw;
  padding-left: 15px;
  color: var(--tan);
  -webkit-text-stroke: 2px var(--black);
}

main.a divider {
  display: block;
  width: 80%;
  margin-left: auto;
  background: url(https://file.garden/ZXJkOcYwORXn2d9V/flower%20lace.png);
  background-size: 10%;
  background-repeat: repeat-x;
  aspect-ratio: 21 / 1;
}

main.a .lyrics {
  color: var(--purp2);
  display: inline-block;
  font-size: 1.75vw;
  margin-bottom: 5px;
  font-family: dis;
}

flex.b left {
  width: 50%;
  margin-right: 5px;
  overflow: hidden;
}

flex.b right {
  width: calc(50% - 5px);
}

.cbox {
  border: 3px solid var(--black);
}

flex.b left .music {
  border-radius: 10px;
  overflow: hidden;
  width: calc(100% - 6px);
  border: 3px solid var(--black);
  aspect-ratio: 1.75 / 1;
  

}

flex.b right interests {
  display: block;
  padding: 5px;
  border-radius: 10px;
  background: var(--white);
  width: calc(100% - 16px);
  overflow: auto;
  border: 3px solid var(--black);
  aspect-ratio: 1.75 / 1;
  

}

interests .title {
  
  display: inline-block;
  font-family: pork;t
  height: 20%;
  color: var(--tan);
  font-size: 2.25vw;
    -webkit-text-stroke: 2px var(--black);
}

interests div.interests {
  border-radius: inherit;
  background: var(--white2);
  border: 1px solid var(--black);
  height: 50%;
}

div.interests span.sub {
  font-size: 1.5vw;
  color: var(--pink);
  font-weight: 600;
      -webkit-text-stroke: 0.5px var(--black);
}

interests div.characters {
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  margin-top: 3px;
      white-space: nowrap;
  height: calc(30% - 8px);
}
.characters::-webkit-scrollbar {
  display: none;
}

div.characters img {

  aspect-ratio: 1 / 1;
  height: calc(100% - 2px);
  border-radius: 50%;
  border: 1px solid var(--black);
  margin-right: 4px;
  filter: sepia(1);
  transition: 0.5s filter;
}

div.characters img:hover {
  filter: sepia(0);
}