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

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

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

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

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

*::-webkit-scrollbar-thumb {
  background: url(/images/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;
}

html {
  cursor: url(/images/bowcursor.gif), auto !important;
}


body {
  background: url(/images/iron-fence.png) bottom repeat-x, url(/images/whtepinkdiabg.png) fixed;
  font-family: "Delius", cursive;
  position: relative;
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 1200px;
  margin-top: 5px;
  color: #e6aac5;
}

.frame {
  background: url(/images/index-frame.png);
  background-size: contain;
  height: 677px;
  width: 585px;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: block;
  position: relative;
  top: 0px;
  right: 0px;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 0 2px gray);
}

.blurb {
  text-align: center;
  position: absolute;
  width: 300px;
  top: 290px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
}

.enter {
  font-size: 75px;
  margin: 0 auto;
  text-decoration: none;
  font-family: adorablelady;
  font-weight: 900;
  color: #ffe7ea;
  text-shadow: 1px 0px #db93b3, -1px 0px #db93b3, 0px 1px #db93b3,
    0px -1px #db93b3, 0 0;
}

a:hover {
  cursor: crosshair;
  transition: 0.5s ease;
  color: #db93b3;
  text-shadow: 1px 0px #fff, -1px 0px #fff, 0px 1px #fff,
    0px -1px #fff, 0 0;
  background: rgb(236, 162, 194);
}

a {
  font-family: spirit;
  text-decoration: none;
  font-weight: 900;
  color: #fff;
  text-shadow: 1px 0px #db93b3, -1px 0px #db93b3, 0px 1px #db93b3,
    0px -1px #db93b3, 0 0;
}


.container {
  margin: auto;
  margin-top: -500px;
  filter: drop-shadow(0 0 2px gray);
  border-radius: 7px;
  border-style: solid;
  border-image: url(/images/lacebox.png) 40% fill / 22 round;
  border-image-outset: 20px 20px;
  outline: 1px dashed #da9eb6;
  outline-offset: -12px;
  text-align: center;
  background: white;
  width: 585px;
  height: 450px;
  z-index: 1;
  padding-top: 480px;
  overflow: auto;

}

.charmring {
  position: absolute;
  top: 175px;
  right: 200px;
  height: 250px;
  width: 150px;
  object-fit: contain;
  z-index: 999;
}

.charmring:hover {
  filter: saturate(400%);
  transition: 0.4s;
}

hr {
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right,
      transparent,
      #e6aac5,
      transparent);
  width: 80%;
  margin: 20px auto;
}


footer {
  text-align: center;
  margin-top: 40px;
}


input[name="tabs"] {
  display: none;
}


.layout-wrapper {
  position: relative;
  width: 585px;
  margin: 0 auto;
}


.sidebar {
  position: absolute;
  left: -110px;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 15;
}

.sidebar label {
  background: white;
  padding: 10px;
  border: 1px dashed #da9eb6;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  font-family: spirit;
  color: #e6aac5;
  font-size: 18px;
  transition: 0.3s;
}

.sidebar label:hover {
  background: #ffe7ea;
}


.content {
  display: none;
}


#tab1:checked~.container #content1,
#tab2:checked~.container #content2,
#tab3:checked~.container #content3 {
  display: block;
}


#tab1:checked~.sidebar label[for="tab1"],
#tab2:checked~.sidebar label[for="tab2"],
#tab3:checked~.sidebar label[for="tab3"] {
  background: #e8bed2;
  color: white;
  padding-right: 20px;
}