.box {
	max-width: 1000px;
	margin: 50px auto;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 250px minmax(0, 1fr);
}

.active {
	color: #F7D36A
}

.dotted-line {
  border: none; /* Removes default styling */
  border-top: 2px dotted #A65698; /* Creates the dotted line */
  width: 100%; /* Adjusts the line length */
  margin: auto; /* Centers the line */
}

#text {
    padding: 10px;
	color: #F2C9D4;
}

#list {
	color: #F2C9D4;
}

a:link {
	color: #F2C9D4;
	background-color: transparent;
	text-decoration: none;
	text-shadow: 2px 2px 20px #A65698;
	font-weight: bold;
}

a:visited {
	color: #A65698;
	background-color: transparent;
	text-decoration: none;
	text-shadow: 2px 2px 20px #A65698;
	font-weight: bold;
}

a:hover {
  color: #A65698;
  background-color: #4A3CA6;
  text-decoration: underline;
  text-shadow: 2px 2px 20px #A65698;
  font-weight: bold;
}

h1, h3 {
	text-shadow: 2px 2px 20px #A65698;

}

h2 {
	color: #A65698;
}

body {
  background-image: url("../images/background.jpg");
  font-family: "papyrus", "goudy old style", serif;
  background-attachment: fixed;
}

header, nav, main, footer {
	border-radius: 25px;
	background: #4A3CA640;
		/*transparency codes are at the END of the hex code*/
	border: #A65698 2px dotted;
}

header {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
}

nav {
	margin: 15px;
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	height: max-content;
}
	
main {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	height: max-content;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
	cursor: pointer;
	background-color: #4A3CA6BF;
	color: #F2C9D4;
	padding: 20px;
	border-radius: 25px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	font-family: "papyrus", "goudy old style", serif;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
	background-color: #3e328c80;
}

.collapsible.active + .content {
	max-height: 200px; /* A height sufficient to show all content. Can be dynamic using JS */
}

/* Style the collapsible content. Note: hidden by default */
.content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out; /* Adds smooth animation */
	padding: 0 18px; /* Use padding on a wrapper if needed, not the .content itself */
	border-radius: 25px;
	color: #F2C9D4;
	background: #4A3CA640;
}
	
footer {
	grid-row: 3 / 4;
	grid-column: 1 / 3;	
}

/* hexcode palette: 
	light pink #F2C9D4
	dark pink #A65698
	light purple #D9A0CF
	dark purple #4A2759
	blue #4A3CA6 - SHADOW #3e328c
 */