body, html {
	font-size: 18px;
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
}

img {
	margin: 0px;
	cursor: pointer;
	transition: transform 0.2s;
}



p {
	font-size: 14px;
	margin: 0px;
}

a {
	text-decoration: none;
	color: inherit;
}

hr {
	width: 100%;
	border: none;
	border-top: 5px solid black;
}

.micro-text {
	font-size: 8px;
}

.small-text {
	font-size: 14px;
}

.medium-text {
	font-size: 16px;
}

.image-container {
	text-align: center;
}

.container {
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	height: 100vh;
}

.side {
	background-image: url("./images/BG_OCT_50b.png");
	background-repeat: repeat;
	background-size: contain;
	background-color: black;
}

.main-content {
	text-align: left;
}

.main-lg {
	background-color: lightgrey;
	padding: 20px;
}

.main-dark {
	background-color: black;
	color: white;
	padding: 20px;
}

.main-night {
	background-color: #000025;/*#00005c;*/
	color: yellow;
	padding: 20px;
}

.main-beach {
	background-color: beige;
	padding: 20px;
}

.main-grass {
	background-color: palegreen;
	padding: 20px;
}

.img-w-text {
	display: flex;
	align-items: center;
}

.pad-col {
	padding: 20px;
	gap: 20px;
}

.side-text {
	flex: 1;
}

.columns {
	display: flex;
	gap: 5px;
	margin: 0 auto;
}

.border-column {
	border: 3px solid #AAA;
}



/*
style="border: 3px solid #AAA;"

<br><br><br>
<div class="image-container"><img src="./images/" alt="" width=50% height=auto><p></p></div>
<br><br>

<div class="img-w-text">
<img class="side-image" src="./images/" alt="" width=60% height=auto>
<div class="side-text">

</div>
</div>
<br>

.expandable {
  cursor: pointer;
  transition: transform 0.2s;
}

.expandable:hover {
  transform: scale(1.05);
}



<a href="" target="_blank"></a>


<br><br>
<hr>
<br>
<h1>Oct 5</h1>
<h2>Santa Cruz</h2>
<br>
*/




.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  border: 30px solid black;
}