/* basic elements */
body {
    font:24px georgia, serif;
    letter-spacing: .5px;
    line-height: 28px;
    color:#333; 
    margin:0; 
    border:1px solid #000;
    background-color: ivory;
    }	
p {
    font:24px georgia, serif; 
    margin:0 0 0 48px;
    width: 40em;
    }
li {
   font:20px georgia, serif; 
}
h3 {
    font:bold 32px georgia, serif; 
    margin-bottom:0;
    }
h4 {
    text-align: center;
}
    
a:link, a:visited {
    text-decoration:none;
    color:#900;
    }
a:hover, a:active {
    text-decoration:underline;
    color:#c00;
    }

/* specific divs */
.page-wrapper {
    width:45em; 
    padding:2em; 
    margin:80px auto 80px 80px;
    background-color: white;
    border: 15px solid indianred;
    border-style: groove;
}
.toc {
    margin: 2em;
    display: block;
}
.bioSHORT {
    background-image: url("images/Shakespeare-Laura-Mandell-2048x1070.jpg");

  /* Set a specific height */
    min-height: 500px;

  /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.bioTEXT {
    font:20px georgia, serif;
    letter-spacing: 0px;
    line-height: 22px;
    display: block;
    width: 15em;
    float: left;
    border: 1px solid black;
    margin-top: 200px;
    padding: 1em;
    background: ivory;
    
}
.main {
    margin-top: 3em;
}
header {
    text-align: center;
}
header h1 {
    padding:0;
    }
header h2 {
    padding:1em;
    border-bottom:solid 1px black;
    }
/* Slide Carousel */
.carousel {
  display: flex;
  width: 32em; /* Set carousel width */
  margin-left: 10%;
}
.carousel2 {
  display: flex;
  width: 14em; /* Set carousel width */
  margin-left: 30%;
}
.carousel img {
  flex: 0 0 auto; /* Ensure each image takes up the necessary space */
  width: 100%; /* Ensure images take full width of the carousel */
  background-color: ivory;
  transition: transform 0.5s; /* Smooth transition effect */
  padding: 1.5em;
}
.carousel2 img {
  flex: 0 0 auto; /* Ensure each image takes up the necessary space */
  width: 100%; /* Ensure images take full width of the carousel */
  background-color: ivory;
  transition: transform 0.5s; /* Smooth transition effect */
  padding: 1.5em;
}
.carousel img:hover {
  transform: scale(1.1); /* Zoom effect on hover */
  }
.carousel2 img:hover {
  transform: scale(1.1); /* Zoom effect on hover */
  }
  /* power-pointish */
div.table {
    display: table;
    font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1.0em;
	line-height: 1.8em;
	width: 100%;
}
p.tableRow {
   display: table-row-group;
}
span.left {
    display: table-cell;
    width: 40%;
    float: left;
}
span.right {
    display: table-cell;
    width: 56%;
    float: right;
    text-align: center;
}
img.cell {
    border: 2px solid black;
}