* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 1.0em;
}
body {}

.toptitle { background-color:#F1C232; }

.home { clear:both; margin:0; padding:0; background-color:#F1C232; }
.widecontentpuzzle3 { width:99%; max-width:99%; height:1000px; max-height:1080px; margin:5px auto; padding:2px; clear:both; border:#000 3px solid; }
.jig { width:100%; height:100%; border:none; background:transparent; overflow:hidden; }
.searchbar { max-width:800px; margin:0 auto; }

.toptitle h1 { font-size:1em; text-align:center; color:#FFF; margin:0; padding:5px; }
.toptitle h1 a:link,
.toptitle h1 a:visited,
.toptitle h1 a:active { text-decoration:none; color:#FFF; }
.toptitle h1 a:hover { text-decoration:underline; color:#FFF; }

/* Merge duplicate .home h2/h3 blocks */
.home h2 {
  text-align:center;
  font-size:3em;            /* chose 3em (later rule) */
  padding:10px 0;
}
.home h2 a:link,
.home h2 a:visited,
.home h2 a:active { text-decoration:none; color:#000; }
.home h2 a:hover { text-decoration:underline; color:#FFF; }

.home h3 {
  text-align:center;
  font-size:1em;            /* chose 1em (later rule) */
  background-color:inherit;
}
.home h3 a:link,
.home h3 a:visited,
.home h3 a:active { text-decoration:none; color:#000; }
.home h3 a:hover { text-decoration:underline; color:#FFF; }

.outerwrap { margin:0 10px; padding:10px; overflow:hidden; }

.homecontent { clear:both; text-align:center; margin-top:50px; }
.hiddengallery { visibility:hidden; display:none; }

.wrap { clear:both; overflow:hidden; max-width:100%; }

.box-main { width:100%; margin:0 auto; overflow:hidden; }
.box-main-home { width:100%; margin:0 auto; }

/* Merge duplicate .box-side */
.box-side { width:100%; max-width:800px; margin:0 auto; }

.box-side-home { max-width:800px; margin:0 auto; }
.box-side-leftarea { margin:0 auto; }

.pictureborder,
.pictureborder-side,
.pictureborder-side2,
.pictureborder2 {
  border:#CCC thin solid;
  overflow:hidden;          /* keep one overflow (was auto then hidden) */
  border-radius:3%;
  padding:10px;
  clear:both;
  margin:10px 0;
}
.pictureborder-side,
.pictureborder-side2 { margin:10px auto; max-width:450px; }
.pictureborder-side2 { border-radius:1.5%; }
.pictureborder2 { border-radius:1%; }

.contentarea,
.contentarea2,
.contentarea3 {
  border:#CCC thin solid;
  overflow:hidden;          /* keep hidden only */
  border-radius:3%;
  padding:10px;
  clear:both;
  margin:10px 0;
}
.contentarea2 { border-radius:1%; }
.contentarea3 { border:none; padding:5px; }

.contentpic { float:left; width:305px; margin:5px; padding:5px; }

.picturearea,
.picturearea2,
.picturearea3 {
  padding:5px;
  margin:5px;
  width:100%;
  text-align:center;
}

.area-a { padding:10px; /* clear:right removed if not needed with floats */ width:100%; }

.picturearea img,
.picturearea2 img { width:100%; height:auto; }

.clear-right-600 { clear:right; height:600px; }
.clear-both { clear:both; }

h1, h2, h3, h4 {
  line-height:1.4em;
  font-size:1em;
  color:#000;
  font-weight:lighter;
  padding:10px;
}
h1 { font-size:1.4em; }
h2 { font-size:1.4em; text-align:center; }
h3 { font-size:1.0em; }
h5 { font-size:1.0em; padding:5px; }
h6 { font-size:1.0em; padding:5px; text-align:center; }

.homecontent h1,
.homecontent h2 { font-size:1.0em; font-weight:lighter; padding:5px; }

/* Base link styles — keep inline to avoid layout side-effects */
a:link,
a:visited,
a:active { text-decoration:underline; color:#000; }
a:hover { text-decoration:none; color:#000; }

/* Specific link blocks where inline-block is desired */
.homecontent h1 a:link,
h2 a:link { display:inline-block; }
.homecontent h1 a:link { text-decoration:none; color:#000; }
.homecontent h1 a:visited { text-decoration:none; color:#000; }
.homecontent h1 a:hover { text-decoration:underline; color:#666; }
.homecontent h1 a:active { text-decoration:none; color:#000; }

h2 a:visited { text-decoration:none; color:#000; }
h2 a:hover { text-decoration:underline; color:#666; }
h2 a:active { text-decoration:none; color:#000; }

h6 a {
  border:#C03 thin solid;
  border-radius:8px;
  margin:5px;
  background-color:#3CC;
  box-shadow:0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  clear:both;
}
h6 a:link {
  text-decoration:none;
  display:block;
  text-align:center;
  font-family:"Palatino Linotype","Book Antiqua",Palatino,serif;
  font-size:1.0em;
  padding:5px;
  background-color:#3CC;
  color:#000;
  line-height:1.4em;
}
h6 a:visited { text-decoration:none; background-color:#3CC; color:#FFF; }
h6 a:hover { text-decoration:none; background-color:#F66; color:#FFF; }
h6 a:active { text-decoration:none; background-color:#3CC; color:#FFF; }

.box-side h6 a {
  border:#000 thin solid;
  border-radius:8px;
  margin:0;
  box-shadow:0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
}
.box-side h6 a:link {
  text-decoration:none;
  display:block;
  text-align:center;
  font-family:"Palatino Linotype","Book Antiqua",Palatino,serif;
  font-size:1.0em;
  padding:5px;
  background-color:#FFF;
  color:#000;
  line-height:1.4em;
}
.box-side h6 a:visited { text-decoration:none; background-color:#FFF; color:#000; }
.box-side h6 a:hover { text-decoration:underline; background-color:#39F; color:#FFF; }
.box-side h6 a:active { text-decoration:none; background-color:#FFF; color:#000; }

.alignmiddle { text-align:center; }
.largeheading { font-family:Verdana, Geneva, sans-serif; font-size:1.2em; text-align:center; margin:10px 0; }

.advertisement { font-size:0.7em; text-align:center; font-style:italic; font-weight:lighter; }
.advertisement a:link,
.advertisement a:visited,
.advertisement a:active { text-decoration:none; color:#000; }
.advertisement a:hover { text-decoration:underline; }

.picturecaption {
  text-align:center;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size:0.85em;
  display:block;
}
.picturecaption a:link,
.picturecaption a:visited,
.picturecaption a:active { text-decoration:underline; color:#000; }
.picturecaption a:hover { text-decoration:none; color:#000; }

.wrappuzzle,
.wrappuzzle2 {
  max-width:100%;
  margin:10px 0;
  border:#CCC thin solid;
  border-radius:1%;
  padding:10px;
  clear:both;
  overflow:hidden;         /* keep hidden only */
}

.jigsaw,
.jigsaw2 { width:100%; height:500px; }

/* iframe container */
.iframe-container {
  position:relative;
  width:100%;
  height:0;
  padding-bottom:50%; /* 16:9 would be 56.25% */
}
.iframe-container iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}
/* iframe end */

/* Global images with frame/shadow (kept as in your original) */
img {
  max-width:100%;
  height:auto;
  border:#000 thin solid;
  box-shadow:0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  border-radius:8px;
}

/* FIX: impossible selector 'img a' -> 'a img' */
a img {
  max-width:100%;
  height:auto;
  border:#000 thin solid;
  box-shadow:0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  border-radius:8px;
  float:left;
}

.homecontent img {
  border:none;
  box-shadow:none;
  border-radius:0;
}

.content { float:left; width:100%; margin:5px; padding:5px; }
.content75 { width:100%; margin:5px; padding:5px; float:left; }

/* FIX: removed duplicate semicolon after margin */
.pagefooter { width:90%; text-align:center; padding:10px; margin:0 auto; clear:both; }
.minifooter { width:80%; text-align:center; clear:both; padding:5px; margin:0 auto; }

.pagefooter p { line-height:1.2em; font-size:0.85em; padding:5px; color:#000; }
.pagefooter p a:link,
.pagefooter p a:visited,
.pagefooter p a:active { text-decoration:none; color:#000; }
.pagefooter p a:hover { text-decoration:underline; color:#00F; }

.pagefooter h3 { text-align:center; font-size:1.4em; color:#000; }
.pagefooter h3 a:link,
.pagefooter h3 a:visited,
.pagefooter h3 a:active { text-decoration:none; color:#000; }
.pagefooter h3 a:hover { text-decoration:underline; color:#00F; }

/* Footer on dark background — FIX: ensure readable text */
.footer {
  width:80%;
  text-align:center;
  background-color:#000;
  padding:10px;
  margin:0 0 -45px 0;
  clear:both;
}
.footer p { line-height:1.2em; font-size:0.85em; padding:5px; color:#FFF; }        /* was #000 */
.footer p a:link,
.footer p a:visited,
.footer p a:active { text-decoration:none; color:#FFF; }                           /* was #000 */
.footer p a:hover { text-decoration:underline; color:#0AF; }
.footer h3 { text-align:center; font-size:1.4em; color:#FFF; }                      /* was #000 */
.footer h3 a:link,
.footer h3 a:visited,
.footer h3 a:active { text-decoration:none; color:#FFF; }
.footer h3 a:hover { text-decoration:underline; color:#0AF; }

.topbtn {
  font-size:18px;
  cursor:pointer;
  background-color:#F00;
  color:white;
  padding:10px 20px 0 20px;
  border:none;
  position:fixed;
  right:80px;
  top:0;
  z-index:10;
  border:#000 thin solid;
  border-top:none;
  box-shadow:0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  border-radius:0 0 8px 8px;
}
.topbtn:hover { background-color:#444; }
.topbtn a:link,
.topbtn a:visited,
.topbtn a:active,
.topbtn a:hover { text-decoration:none; color:#FFF; }

.topbtn2 {
  cursor:pointer;
  color:white;
  padding:5px;
  border:none;
  position:fixed;
  right:20px;
  top:0;
  z-index:10;
}
.topbtn2 img { width:auto; border-radius:0; padding:0; margin:0; box-shadow:none; border:none; }

#bottomBtn {
  display:none;
  position:fixed;
  bottom:60px;
  right:30px;
  z-index:99;
  font-size:18px;
  border:none;
  outline:none;
  background-color:#666;
  color:white;
  cursor:pointer;
  padding:15px;
  border-radius:4px;
}
#bottomBtn:hover { background-color:#555; }

.noradius { box-shadow:none; border-radius:0; border:none; }

/* Start of slide-out-side menu */
.sidebar {
  height:100%;
  width:0;
  position:fixed;
  z-index:1;
  top:0;
  left:0;
  background-color:#111;
  overflow-x:hidden;
  transition:0.5s;
  padding-top:60px;
}
.sidebar a {
  padding:8px 8px 8px 32px;
  text-decoration:none;
  font-size:25px;
  color:#818181;
  display:block;
  transition:0.6s;
}
.sidebar a:hover { color:#f1f1f1; }
.sidebar .closebtn {
  position:absolute;
  top:0;
  right:25px;
  font-size:36px;
  margin-left:50px;
}
.openbtn {
  font-size:20px;
  cursor:pointer;
  background-color:#636;
  color:white;
  padding:10px 15px;
  border:none;
  position:fixed;
  left:0;
  top:0;
  z-index:1;
}
.openbtn:hover { background-color:#444; }

#main { transition:margin-left .5s; padding:16px; }
/* end of slide-out-side menu end */

.navbar {
  overflow:hidden;
  background-color:#069;
  position:fixed;
  bottom:0;
  width:100%;
}
.navbar a {
  float:left;
  display:block;
  color:#FFF;
  text-align:center;
  padding:5px 16px;
  text-decoration:none;
  font-size:15px;
}
.navbar a:hover { background-color:#ddd; color:black; }
.navbar a.active { background-color:#000; color:white; }
.navbar .icon { display:none; }

/* Dropdown — add missing baseline */
.dropdown-content { display:none; }
.dropdown-content a:hover { background-color:#ddd; color:black; }
.dropdown:hover .dropdown-content { display:block; }
/* end of dropdown dropdown */

@media screen and (max-height:450px) {
  .sidebar { padding-top:15px; }
  .sidebar a { font-size:18px; }
}

@media screen and (max-width:600px) {
  .navbar a:not(:first-child) { display:none; }
  .navbar a.icon { float:right; display:block; }
  .navbar.responsive .icon { position:absolute; right:0; bottom:0; }
  .navbar.responsive a { float:none; display:block; text-align:left; }
}

@media only screen and (min-width:960px) {
  .wrap { max-width:1024px; margin:0 auto; padding:10px; clear:both; overflow:hidden; }
  .wrappuzzle { max-width:900px; margin:0 auto; }
  .wrappuzzle2 { max-width:900px; margin:0 auto; }
  .jigsaw { width:100%; height:750px; overflow:hidden; }
  .jigsaw2 { width:100%; height:750px; overflow:hidden; }

  .homecontent h1 { font-size:2.6em; text-align:center; margin:0; }
  .homecontent h2 { font-size:1.3em; text-align:center; margin:0; }

  .picturearea { float:left; padding:5px; margin:5px; width:300px; height:290px; text-align:center; }
  .picturearea2 { float:left; padding:5px; margin:5px; width:300px; height:310px; text-align:center; }
  .picturearea3 { float:left; padding:5px; margin:5px; width:300px; height:260px; text-align:center; }

  .area-a { float:left; padding:10px; width:430px; }

  .content { width:310px; margin:5px; padding:5px; float:left; }
  .content75 { width:600px; max-width:600px; margin:5px; padding:5px; float:left; }
}

@media only screen and (min-width:1000px) {
  .homecontent { clear:both; text-align:center; margin-top:0; }

  .box-main { max-width:1000px; padding:10px; margin:0 auto; }
  .box-main-home { max-width:1000px; padding:10px; margin:0 auto; }
  .homecontent h1 { font-size:3em; text-align:center; margin:0; }
  .homecontent h2 { font-size:1.3em; text-align:center; margin:0; }

  /* removed duplicate #bottomBtn block (base covers it) */
}

@media only screen and (min-width:1280px) {
  .box-main { width:1000px; padding:10px; margin:0 auto; }

  .wrappuzzle { max-width:1060px; margin:0 auto; }
  .wrappuzzle2 { max-width:1200px; margin:0 auto; }
  .jigsaw { width:100%; height:900px; }
  .jigsaw2 { width:100%; height:1000px; }

  .content { width:310px; margin:5px; padding:5px; float:left; }
  .content75 { width:620px; max-width:620px; margin:5px; padding:5px; float:left; }
}

@media only screen and (min-width:1580px) {
  .box-main { width:1000px; padding:10px; margin:0 auto; }
  .box-main-home { width:1280px; padding:10px; margin:0 auto; }

  .wrappuzzle { max-width:1060px; margin:0 auto; }
  .wrappuzzle2 { max-width:1400px; margin:0 auto; }
  .jigsaw { width:100%; height:900px; }
  .jigsaw2 { width:100%; height:1000px; }

  .box-side {
    width:400px;
    padding:10px;
    position:fixed;
    top:60px;
    right:10px;
    overflow:hidden;
  }

  .box-side-leftarea {
    width:310px;
    height:900px;
    padding:10px;
    position:fixed;
    top:60px;
    left:0;
    overflow:hidden;
  }

  .box-side-leftarea-jigsaw {
    width:400px;
    height:820px;
    padding:10px;
    position:absolute;
    top:60px;
    left:0;
    overflow:hidden;
  }
}