:root {}

@font-face {
  font-family: rainyhearts;
  src: url('/fonts/rainyhearts.ttf');
}


@font-face {
  font-family: basiic;
  src: url('/fonts/basiic.ttf');
}

@font-face {
  font-family: porkys;
  src: url('/fonts/PORKYS.ttf');
}

@font-face {
  font-family: kinkee;
  src: url('/fonts/KINKIE.ttf');
}

@font-face {
  font-family: pixelscript;
  src: url('/fonts/PixelScript.otf');
}

body {
  background-color: white;
  color: black;
  font-family: rainyhearts;
  background-image: url('/assets/bg/pastelgoth.jpg');
}

.maincontainer {
  display: flex;
  flex-flow: column wrap;
  max-width: 1600px;
  max-height: 900px;
  margin: 70px auto 0;
  gap: 10px;
}

.columncontainer {
  display: flex;
  flex-flow: column wrap;
  gap: 10px;
}

.rowcontainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

.sidebarcontainer {
  display: flex;
  flex-flow: column wrap;
  gap: 10px;
}

main {
  max-width: 800px;
  left: 400px;
  display: block;
  background-color: white;
  padding: 20px;
}

.sidebar {
  display: block;
}

.left {
  width: 200px;
}

.right {
  width: 300px;
}

splits {
  display: block;
  background-color: white;
  height: 40px;
}

.cute {
  background-image: url('/assets/bg/pastels2.gif');
  background-size: auto;
}

.base {
  background-color: white;
  padding: 20px;
}

.displaycase {
  background-image: url('/assets/bg/heartgrid.gif');
  background-size: auto;
  padding: 10px;
}

#displaycase {
  height: 60px;
  background-size: 100%;
}

.pastelrainbow {
  background-image: url('/assets/pastelrainbowbanner.jpg');
}

.indiestyle {
  background-image: url('/assets/indiestylebanner.jpg');
}


.linksout {
  background-image: url('/assets/bg/pastelgoth2.jpg');
  background-size: 100%;
  padding: 10px;
  width: 200px;
}

.linksout h2 {
  color: #ff83d9;
  width: 82%;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  background-color: white;
  padding: 10px;
  border-radius: 20px 20px 0px 0px;
  border: 3px ridge #f6a0ff;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.linksout a {
  display: block;
  font-weight: bold;
  width: 82%;
  color: #ff83d9;
  text-decoration: none;
  background-color: white;
  padding: 10px;
  border: 3px ridge #f6a0ff;
}

.linksout a:hover {
  color: black;
  text-decoration: underline wavy #D6FFFF 1px;
}

.borderend {
  border-radius: 0px 0px 20px 20px;
}

.images {
  width: 100%;
  max-height: 80px;
  overflow: hidden;
}

.border {
  border-width: 7px;
  border-style: solid;
  border-image: url("/assets/borders/border.png") 8 round;
  border-radius: 10px;
}

.border2 {
  border-width: 7px;
  border-style: solid;
  border-image: url("/assets/borders/border2.png") 8 round;
  border-radius: 10px;
}

.border3 {
  border-width: 10px;
  border-style: solid;
  border-image: url(https://foollovers.com/mat/plate/pl034-plate-i08.gif) 20 fill round;
  border-radius: 20px;
}

header img {
  display: block;
  margin: 0 auto;

  width: 50%;
}

header {
  background-image: url('/assets/bg/starsBG.gif');
  width: auto;
  padding: 10px 0;
  margin: 0 20px 10px;
}

nav {
  position: fixed;
  left: -230px;
  top: 0;
  width: 230px;
  height: 100%;
  box-shadow: 2px 2px 3px 3px #ccc;
  box-sizing: border-box;
  padding: 20px 30px;
  background: white;
  background-image: url('/assets/bg/gingham.gif');
}

nav .menu a {
  display: block;
  margin-bottom: 10px;
  font-size: 1.2rem;
  text-decoration: none;
  font-weight: bold;
  color: white;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #8a77a9;
  font-family: porkys;
  padding: 10px;
  text-align: center;
  background-image: url('/assets/bg/heartgrid.gif');
  border-radius: 30px;
  border: 3px dashed #f6a0ff;
}

.menu {
  width: 100%;
}

.close-icon {
  position: absolute;
  right: 15px;
  top: 23px;
  text-decoration: none;
  font-size: 1.4rem;
  color: white;
}

.open-icon {
  position: fixed;
  left: 5px;
  top: 25px;
  text-decoration: none;
  padding: 10px 5px;
  box-shadow: 1px 1px 1px 1px white;
  background-color: #EEC7FF;
}

.hide {
  transition: left 0.8s linear;
  left: -230px;
}

.show {
  transition: left 0.8s linear;
  left: 0px;
}

.trimt {
  background-image: url('/assets/borders/trimt.gif');
  position: fixed;
  z-index: 10;
  width: 1920px;
  height: 33px;
  top: -5px;
}

.trimb {
  background-image: url('/assets/borders/trimb.gif');
  position: fixed;
  z-index: 10;
  width: 1920px;
  height: 33px;
  bottom: -5px;
}

.blockimages {
  display: block;
  margin: 0 auto;
}

.inlineimages {
  width: inherit;
}

.sweetsdivider {
  background-image: url(/assets/pixels/sweetsdivider.webp);
  background-size: auto;
  background-repeat: repeat-x;
  width: 100%;
  height: 34px;
  margin-bottom: 10px;
}

.rainbowdivider {
  background-image: url(/assets/pixels/rainbowdivider.webp);
  background-size: auto;
  background-repeat: repeat-x;
  width: 100%;
  height: 34px;
  margin-top: 10px;
}

h1,
h2,
h3,
h4 {
  font-family: kinkee;
}