@charset"utf-8";

body{
	color:#ff8c00;
	background-color:black;
}

caption{
	font-size:150%;
}

th{
	background-color:#333;
	color:#a0522d;
	padding:5px;
	width:400px;
	margin:0 auto 0 auto;
}
td{
	background-color:#CCC;
	color:#d2691e;
	padding:5px;
	text-align:left;	
}
.footer-info{
	text-align:center;
	font-weight:bold;
}

.section-divider {
  border-top: 4px solid #332d30;
  margin: 30px 0;
}

/*
.section-divider2 {
  border-top: 2px solid #ccc0b4;
  margin: 30px 0;
}
*/



#contents{
	width:800px;
	margin:0 auto 0 auto;
	text-align:center;
}


#contents h1{
	margin-left:100px;
	margin-right:100px;
	margin-bottom:0;
	padding:0;
	font-size:150%;
}

#contents h2{
	color:#ffff00;
	margin-left:100px;
	margin-right:100px;
	margin-bottom:0;
	padding:0;
}


.photo{
	margin-left:100px;
	margin-right:100px;
	margin-bottom:0;
	padding:0;
}

.name{
	font-size:150%;
	color:yellow;
	font-weight:bold;
	line-height:0.5;
}

.transparent-box {
  opacity: 0.5;
}

/*
.item1{	
	width:45%;
	float:left;
	padding:10px;
	flex-grow: 1; 
	flex-shrink: 1; 
	flex-basis: 0; 
}

.item2{	
	float:left;
	width:45%;
	padding:10px;
	flex-grow: 1; 
	flex-shrink: 1; 
	flex-basis: 0;
}

*/

.items-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;

}


.item{
	padding:15px;
	border: 1px solid #ccc;
	text-align: center;
}

/*
.comment {
  min-height: 80px; 
  padding: 10px;
  background-color: #f0f0f0;
}
*/



footer p{
	padding:14px 0 14px 0;	
	text-align:center;
}

footer small{
	font-size:100%;

}


header{
	width:800px;
	height:150px;
	margin:0 auto 0 auto;
	position:relative;
}

header h1{
	margin:0;
	position:absolute;
}

header p{
	font-size:200%;
	text-align:center;
	position:relative;
	font-weight:bold;
}


nav{
	position:absolute;
	right:0;
	font-size:20px
}

nav ul{
	list-style-type:none;
	display:flex;
  	gap:10px;
}
nav ul li{
	float:left;
}