body {
    background-repeat: no-repeat; /* Prevents repetition */
    background-position: center; /* Centers the image horizontally and vertically */
    background-size: cover; /* Scales the image to cover the entire page */
    background-color: rgb(131, 164, 213);
    background-image: url(pics/clouds.jpg);
    background-blend-mode:lighten;}

p {
    font-family: "Jacquard 12", system-ui;
    text-align:center;
    font-weight: 100;
    font-style: light;
    font-size:large;
    color: #e780e8;
    margin: 6px 15px 6px 15px; }

a {
    text-decoration: none;
    color:#e284e1;}

.middlediv {
    display:flex;
    flex-wrap: wrap;
    justify-self: center;
    width: 70%;
    height:97vh;
    margin: 0px 0px 0px 0px;}

.pic1 {
    height:16%; 
    width:100%;
    background-size: contain;
    background-position: center;
    background-image: url(pics/pngrainbow.png);
    background-repeat: no-repeat;}

.middlediv2 {
    width: 80%;
    height:97vh;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(253, 231, 255);
    border-style:double;
    border-width: 5px;
    border-radius: 12px;
    border-color: #deaaf4;}

.leftdiv {
    background-color: rgb(222, 217, 254);
    border-style:double;
    border-width: 5px;
    border-radius: 15px;
    border-color: rgb(230, 154, 255);
    margin: 0px 10px 0px 0px;
    width: 18%;
    height: 100%;}

.guest{
    height: 28%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;}

.handjetfont{
    font-family: "Handjet", sans-serif;
    width: 100%;
    font-weight: 500;
    text-align: center;
    font-style: normal;
    font-size: medium;
    color: #e780e8;}

.buttondiv {
    height:auto;}

.button1 {
    font-family: "Handjet", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: medium;
    color: #ff97fc;
    margin: 2px 0px 2px 0px;
    width:100%;
    height:22px;
    background: linear-gradient(to right, rgb(0, 0, 0,0) 0%, rgb(230, 252, 255) 20%, rgb(230, 252, 255) 80%, rgb(0, 0, 0,0) 100%);
    transition: all 0.2s ease-in-out;
    border-style: none;}

button:hover {
  background-color: #abc3ff; 
  color: #fff2f2;}

.pdiv {
    width:100%;
    height:84%}

.header {
        color:rgb(254, 235, 253);
        font-size: xx-large;
        margin: 5px 0px 5px 0px;
        text-align: center;
        height:30px;
        text-shadow:
            1px 1px 1px rgb(255, 84, 232),
            0 0 .5em rgb(233, 156, 248),
            0 0 .5em rgb(219, 96, 184);}
            
.scrollbar {
    height: 80%;
    width: 60%;
    overflow: auto;} 
    ::-webkit-scrollbar {
        width: 12px;
        border-radius: 20px;}
    ::-webkit-scrollbar-track {
        border-radius: 20px;
        background-color: #dcf5ff;}
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(
        rgb(250, 128, 228) 0%,
        rgb(249, 195, 114) 10%,
        rgb(244, 252, 130) 20%,
        rgb(149, 253, 145) 30%,
        rgb(144, 250, 249) 40%,
        rgb(132, 232, 248) 50%,
        rgb(118, 179, 249) 60%,
        rgb(164, 122, 250) 70%,
        rgb(222, 130, 255) 80%,
        rgb(249, 127, 233) 90%,
        rgb(252, 136, 227) 100%);}

.formdiv {
    width:100%;
    height:100px;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
    margin-bottom:50px;}
.commentbutton {
background-color: rgb(188, 176, 255);
border-color: #ef7bd6;
width: 100px;
height:30px;
color:#f2f6ff;
font-family: "Handjet";
margin: 10px 0px 10px 140px;
justify-self:center;}
.form{
    width:60%;
    height:80px;
    justify-self:center;}
.message{
    width:100%;
    height:80px;
    border-color: #ef7bd6;
    border-width: 3px;
    color:orchid;
    background-color:hsl(198, 100%, 91%);
    justify-self:center;}
.comment-box{
display: flex;
flex-wrap: wrap;
width:60%;
justify-self: center;
background-color: transparent;
color:rgb(222, 92, 218);
font-family: "Handjet";
font-size: medium;
margin: 8px 0px 8px 0px;
border-style: dotted;
border-color: #d283cf;
border-width: 1px;
padding: 10px 10px 10px 10px}

.cakepic{
    width: 80%;
    border: 20px solid transparent; /* Define a transparent border to make space for the image border */
    border-image: url('pics/laceborder.png') 400 round;/* Use an image as the border, sliced and repeated */}

.divider{
        height:15px;
        width:80%;
        display:flex;
        justify-self: center;}

.binky{
    display:flex;
    justify-self:center;
    margin: 10px 0px 0px 0px;}

.hobbydiv{
    display:flex;
    justify-self:center;
    justify-content: center;
    flex-wrap: wrap;
    width:90%;}

.hobbybutton{
    background-color: rgb(199, 211, 253);
    border-style:solid;
    border-color: #eda8f2;
    border-width: 3px;
    border-radius: 3px;
    margin-bottom:10px;
    width:55%;
    padding-top: 8px;
    padding-bottom: 8px;
    color: rgb(255, 255, 255);
    font-family: "Jacquard 12";
    text-decoration: none;
    font-size:x-large;}

.hobbylink{
    color: rgb(255, 255, 255);
    font-family: "Jacquard 12";
    text-decoration: none;
    font-size:x-large;}

.picturediv{
    width: 100%;
    display:flex;
    flex-wrap: nowrap;
    align-items: flex-start;}

.leftdiv2{
    width:50%;
    display:flex;
    flex-direction: column;
    row-gap: 20px;
    flex-wrap:wrap;
    height:100%;
    align-items: center;}

.rightdiv{
    width:50%;
    display:flex;
    flex-direction: column;
    flex-wrap:wrap;
    row-gap:20px;
    height:100%;
    align-items: center;}

.cakepic1{
    width: 80%;
  border: 20px solid transparent; /* Define a transparent border to make space for the image border */
  border-image: url('pics/goldframe.jpg') 150 round;/* Use an image as the border, sliced and repeated */}

.cakepic2{
    width: 80%;
  border: 20px solid transparent; /* Define a transparent border to make space for the image border */
  border-image: url('pics/frame2.jpg') 90 round;/* Use an image as the border, sliced and repeated */}

.cakepic3{
    width: 80%;
  border: 20px solid transparent; /* Define a transparent border to make space for the image border */
  border-image: url('pics/pictureframe1.jpg') 70 round;/* Use an image as the border, sliced and repeated */}

.cakepic4{
    width: 80%;
  border: 20px solid transparent; /* Define a transparent border to make space for the image border */
  border-image: url('pics/frame4.jpg') 550 round;/* Use an image as the border, sliced and repeated */}
        
* {box-sizing:border-box}

.slideshow-container {
      background-image: url(pics/purplecamera.png);
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 27px;
      width:80%;
      height: 75%;
      padding: 8.3% 0% 0% 5.5%;
      text-align: center;
      border-style:none;
      justify-self: center;
      display: flex;}
    .slide {
      display: none;
      width: 55.5%;
      height: auto;}
    .slide img {
      width: 100%;
      height: auto;}
    .slide-description {
      font-size: 16px;
      font-family: "Handjet", system-ui;
      color: #d869de;}
    .nav-buttons {
      margin: none;
      display: flex;
      width: 7%;}
    .nav-buttons button {
      width: 100%;
      align-self: center;
      font-size: 13px;
      background-color: transparent;
      border-style: solid;
      border-radius: 2px;
      border-color: #e7c1ee;
      font-family: "Handjet", system-ui;
      color: #dbc4f1;}
    .nav-buttons button:hover {
      background-color: #af96d9;}

.headdiv{
    display:flex;
    flex-wrap: nowrap;}

.goback{
    margin: 6px 210px 0px 6px;
    width:10%;
    background-image: url(pics/back.gif);
    background-repeat: no-repeat;
    background-size: contain;}

.stampdiv{
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
    margin: 20px 0px 0px 0px;}

.stamp{
    width: 150px;
    height: 30px;
    margin: 5px 2px 0px 0px;}

.mooddiv {
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 72px;
    width: 72px;
    background-color:rgb(252, 212, 252);
    border-radius: 1px;
    border-style: inset;
    border-width: 2px;
    border-color: #f7c2f5;}

.tama{
    width:92%;
    margin: 0px 0px 0px 5px;
    padding: 47px 0px 0px 34px;
    height:160px;
    background-image: url(pics/tama.png);
    background-size: cover;
    align-self: flex-start;}

.mediapic{
    width:100px;
    height: auto;
    margin: 2px 2px 2px 2px;}

.entry-title {
      font-family: "Handjet";
      font-size: large;
      color: rgb(233, 151, 233);
      padding: 3px 0px 3px 10px;}
.entry-title:hover {
      background-color: #e4e5ff;}
.entry-content {
    display: none; /* Hide by default */
    margin-left: 1em;
    font-family: "Handjet";
    font-size: large;
    color: rgb(228, 144, 228);}
.toc {
      list-style-type: none;
      padding: 10px 0px 0px 0px;}
.toc li {
      margin-bottom: 5px;}

.video{
    width:100%;}

.mediaentry-content{
    display: none; /* Hide by default */
    margin-left: 1em;}

.row{
    width:100%;
    display:flex;
    flex-wrap: nowrap;
    padding: 20px 10px 10px 10px;}

.column{
        display:flex;
        flex-wrap: wrap;
        justify-content: center;    
        width:50%;}

.gifbox{
    padding: 0% 0% 0% 15%;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    height: 50%;
    width: 95%;
    flex-wrap: wrap;
}

.piclink{
    width: 65%;
    height: auto;
}