*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background-image: url("bg.jpg"); background-size: auto 100%; background-attachment: fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* container */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* header */
.site-header{padding:5px 0; text-align:center}
.site-logo{max-width:325px; display:inline-block}

/* main panels */
.site-main{padding-bottom:20px}
.panels{display:flex; flex-direction:column; justify-content: center; align-items: center; gap:10px;}

/* panel */
.panel{width:85%; max-width:819px; position:relative; display:block}
.panel-link{display:block; text-decoration:none; color:inherit; border-radius:4px; overflow:hidden;}
.panel-image{
  display:block;
  width:100%;
  height:auto;
  transition: filter 0.2s ease;
  filter: opacity(.9) saturate(1);
}

.panel-image:hover {
  filter: opacity(1) saturate(1.2);
}

/* footer */
.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
  padding: 0px 0;
}

.footer-icon img {
  display: block;
  width: 100px;
  height: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}

.ml-onclick-form img {
  display: block;
  width: 100px;
  height: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}

.footer-icon img:hover {
  transform: scale(1.05);
  opacity: 1;
}

.ml-onclick-form img:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* Mobile adjustments */
@media (max-width: 675px) {
  .site-footer {
	display: inline-block;
	text-align: center;
    gap: 40px;
    padding: 0px 0;
  }
  .footer-icon img {
	text-align: center;
	display: inline-block;
    width: 90px;
	height: auto;
  }
  .ml-onclick-form img {
	text-align: center;
	display: inline-block;
    width: 90px;
	height: auto;
  }
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}


/* Accessibility: hide but available for screen readers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Responsive tweaks */
@media (max-width:900px){
  :root{--max-width:780px}
  .site-logo{max-width:320px}
}
@media (max-width:600px){
  :root{--max-width:620px}
  .panels{gap:18px}
  .site-header{padding:28px 0}
  .site-footer{padding:28px 0; align-items:flex-start; flex-direction:column; gap:8px}
}