::-webkit-scrollbar { 
display:none; 
}

div.main
{
width:600px;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
text-align:left;
background-color:rgba(150,150,150,1.0);
margin-left:auto;
margin-right:auto;
margin-top:80px;
margin-bottom:80px;
}

h1 { 
text-align:center;
}

p
{
text-align:left;
color:rgb(20,20,20);
text-decoration:none;
text-indent:0px;
font-size:15px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
}

ul
{
text-align:left;
color:rgb(20,20,20);
text-decoration:none;
text-indent:0px;
font-size:15px;
margin-top:0px;
}

a.linktext
{
color:rgb(0,0,256);
text-decoration:none;
font-weight:bold;
}
	
a.linktext:hover, a.linktext:visited
{
	color:rgb(0,0,128); /*color:rgb(0,0,128);*/
}

body
{
margin:0px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
font-family:arial;
background-color:rgb(64,64,64);
}

hr.hr{
	border-color:#FFF;
	margin-top:30px;
}

/* ICON SESSION START */

/* --- Layout: flexible row of icons --- */
.feature-icons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

/* --- Icon item: square, responsive --- */
.feature-icons .icon-item {
  flex: 1;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  min-width: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- Image inside icon --- */
.feature-icons .icon-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- Icon "spotlight" effect on hover --- */
.feature-icons .icon-item:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.feature-icons .icon-item:hover img {
  transform: scale(1.06);
  opacity: 0.9;
}

/* ICON SESSION END */