:root{
 --bg:#ffffff;
 --card:#f6f6f6;
 --gold:#b89b2f;
 --text:#222;
 --muted:#555;
 --border:#e3e3e3;
}

body{
 margin:0;
 background:var(--bg);
 color:var(--text);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
 font-size:15px;
 line-height:1.7;
}

.container{
 max-width:960px;
 margin:auto;
 padding:15px;
}

header img{
 width:100%;
 border-radius:10px;
 border:1px solid var(--border);
}

nav{
 margin:15px 0;
 background:#fff;
 border-radius:8px;
 border:1px solid var(--border);
}

nav ul{
 list-style:none;
 padding:0;
 margin:0;
 display:flex;
}

nav li{flex:1}

nav a{
 display:block;
 padding:14px;
 text-align:center;
 color:var(--gold);
 font-weight:600;
}

nav a:hover{
 background:#f2f2f2;
}

main{
 background:var(--card);
 padding:22px;
 border-radius:12px;
 border:1px solid var(--border);
}

h1,h2,h3{
 font-family:'Libre Baskerville',serif;
 color:var(--gold);
 text-align:center;
 margin-top:30px;
}

p{
 color:var(--muted);
 text-align:justify;
}

strong{
 color:#111;
}

iframe{
 width:100%;
 border-radius:10px;
 border:1px solid var(--border);
 background:#fff;
}

.iframe-wrap{
 position:relative;
 height:700px;
 margin:20px 0;
}

.iframe-wrap iframe{
 position:absolute;
 inset:0;
}

footer{
 margin-top:30px;
 background:#fff;
 padding:15px;
 text-align:center;
 font-size:13px;
 color:#777;
 border-radius:8px;
 border:1px solid var(--border);
}
.header-banner{
  display:flex;
  flex-direction:column;   
  align-items:center;      
  gap:1px;
  margin:16px 0;
}

.header-banner a{
  display:block;
  text-align:center;
}

.header-banner img{
  display:block;
  width:auto;
  max-width:100%;          
  height:auto;
  margin:0 auto;           
}
.floating-top,
.floating-bottom{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 728px;
  max-width: 728px;
  z-index: 2147483647;
}

.floating-top{ top: 0; }
.floating-bottom{ bottom: 0; }

.floating-top a,
.floating-bottom a{
  display:block;
}

.floating-top img,
.floating-bottom img{
  width: 728px;
  height: 90px;
  display: block;
}
 

@media(max-width:768px){
 nav ul{flex-direction:column}
 main{padding:15px}
 h1{font-size:22px}
 h2{font-size:18px}
 .iframe-wrap{height:600px}
}
.floating-top,
  .floating-bottom{
    width: 100%;
    padding: 0 6px;
  }

  .floating-top img,
  .floating-bottom img{
    width: 100%;
    height: auto;
  }