body {
background-image:url(https://file.garden/aA0eX2ASI2C8Ym93/backgrounds/d20-bg-polkadot.gif);
padding:0px;
margin:0px;
cursor: url('https://file.garden/aA0eX2ASI2C8Ym93/cursors/cursor_point3a.gif'),  auto;
}

@font-face {
	src: url(https://file.garden/aA0eX2ASI2C8Ym93/fonts/RomanceA.ttf);
	font-family: RomanceA;
}

html {
	padding:0px;
	margin:0px;
}

#label {
	font-size:25px;
	font-family:romancea;
	color:white;
	filter: drop-shadow(0px 1px #fc97aa) drop-shadow(0 -1px #fc97aa) drop-shadow(1px 0 #fc97aa) drop-shadow(-1px 0 #fc97aa);
	text-align:center;
}

.main {
	width:700px;
    background-color:white;
	margin:auto;
	height:500px;
}

#cal {
	position:absolute;
	width:fit-content;
	height:fit-content;
	left:775px;
	top:310px;
}

#blinkies {
	width:100px;
	height:fit-content;
	left:784px;
	top:75px;
	position:absolute;
}

#blinkies img {
	width:100px;
}

.box06 { 
background : url(https://file.garden/aA0eX2ASI2C8Ym93/backgrounds/gingamcheck_pt.gif); 
border-radius : 10px ; 
box-sizing : border-box; 
margin:0;
margin-left:20px;
padding:15px; 
width: fit-content;
margin-top:30px;
border:1px solid black;
} 

.box-inner { 
background : #fff ; 
border-radius:10px ; 
padding : 10px ;
border:1px solid black;
} 

.left {
	float:left;
	height:100%;
	width:200px;
	border-right:2px dashed #c3c2ad;
	overflow-y:auto;
	font-family:ms gothic;
	font-size:10px;
	text-align:center;
	padding-right:10px;
}

.right {
	float:right;
	height:100%;
	width:485px;
	background-image:url(https://file.garden/aA0eX2ASI2C8Ym93/backgrounds/2a3npc.gif);
	border-radius:5px;
	border-top:2px ridge pink;
	border-right:2px ridge pink;
	border-bottom:2px ridge pink;
	cursor: url('https://file.garden/aA0eX2ASI2C8Ym93/cursors/cursor_point3a.gif'),  auto;
}

#toggleButton {
  color: black;
  padding: 5px;
  font-family:ms gothic;
  border-width:8px;
  border-style:solid;
  border-image: url(https://file.garden/aA0eX2ASI2C8Ym93/button%20and%20banner%20templates/borders/white-border.gif) 8 fill round;
  width:440px;
  margin:auto;
  margin-left:30px;
  margin-top:10px;
  cursor: url('https://file.garden/aA0eX2ASI2C8Ym93/cursors/cursor_point3a.gif'),  auto;
}

#toggleButton h1{
	font-size:15px;
	padding:5px;
	margin:0px;
}

#expandableContent {
    /* Start state: hidden by default */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
  margin-left:30px;
  font-family:ms gothic;
  cursor: url('https://file.garden/aA0eX2ASI2C8Ym93/cursors/cursor_point3a.gif'),  auto;
  background-color:white;
}

#expandableContent p {
  font-size:12px;
  padding:5px;
  margin:0px;
  margin-bottom:5px;
}

#expandableContent.expanded {
    /* End state: set to a height larger than its content to ensure everything is visible */
    /* Using a fixed large number or max-height: 100% can work for content that fits */
    /* For variable content, max-height can be tricky; an alternative is using a display toggle */
    max-height: 200px; /* Adjust this value as needed for your content */
    transition: max-height 0.5s ease-in;
	max-width:440px;
	overflow-y:auto;

/* Alternative for simple show/hide without animation */
/*
.collapsed {
    display: none;
}

.expanded {
    display: block;
}
*/

#date {
	margin-bottom:10px;
	margin-top:5px;
}