body  {
background-image:linear-gradient(to bottom, #7c26040a 20%, #ffffcc00 80%, #ffecda60 100%),  url('graphics/plaidbrown.jpg');
background-attachment: fixed;
background-repeat: repeat;
overflow: hidden;
}


.frill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index:-22;
  height: 84px;
transform: translateY(-16px);
  background: url('graphics/lace.png') repeat-x;
filter: drop-shadow(3px 1px 0px #0e0e0e44);
   opacity: 90%;
}

 
/* ----------------------------------------------
 * Generated by Animista on 2025-5-9 16:44:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
 
/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
 
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.main-container
{
    display: flex;
    width: 600px;
  height: 550px;
  margin: auto;
  margin-top: 120px;
}

img {
  filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
pointer-events:none;
}

.main
{
border: 1px solid white;
  background-image: url('graphics/plain.jpg');
  background-attachment: fixed;
  background-repeat: repeat;
  width: 600px;
  height: 450px;
  position: relative;
  padding: 5px;
  z-index: 4;
  border: #ebd8b6 dashed;
  display: flex;
  box-shadow: 0rem -0rem 0.5rem 0.5rem #FFFFFF;
 filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
}

@font-face {
src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
font-family: jojoba;
}
 
 .section
{
font-family: jojoba;
  color: black;
  font-size: 1em;
  background: white;
  border: 3px solid #cca37c;
  padding: 5px;
  width: 330px;
  height: 250px;
  overflow-y: scroll;
  -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.button-container
{
  position: absolute;
  top: 3em;
  left: 20.875em;
  height: 200px;
  width: 100px;
  z-index: -5;
}

button
{
  cursor:pointer;
  font-family:jojoba;
  color:#b17c4b;
  border-right: 3px solid #e6c5a8;
  border-top: 3px solid #e6c5a8;
  border-bottom: 3px solid #e6c5a8;
  border-radius: 0px 10px 10px 0px;
  border-left: none;
  padding: 3px;
  padding-right:20px;
  text-align:right;
  margin-block: 2px;
  background: #fff2ea;
  height: 50px;
  width: 90px;
  transition: transform 0.3s ease;
}


 button:hover {
  transform: translateX(10px);
 }

.content 
{
  display:flex;
  align-items: center;
  background:#fff3e9;
  border-radius: 20px;
  margin-block:35px;
  margin-inline:20px;  
  width: 20rem;
  height:1fr;
}



p, h1, h2, h3, h4, h5, h5  {
    font-family: jojoba;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--darkcolor);
}

p {
    color: var(--textcolor);
}