/* Layout & styles carried over from the Blogger template */
body { height: 100%; margin: 0; background-color: #FAFDFE; font-size: large; font-family: Arial, sans-serif; }
html { height: 100%; }

.warn { font-weight: bold; color: #AA0000; }
.note { font-style: italic; font-size: medium; }

#layoutWrapper { height: auto !important; min-height: 100%; margin: 0 auto -6em; }
#layoutContent { margin: 0 5em; line-height: 150%; }
#layoutFooter  { margin: 0 5em; text-align: center; font-style: italic; font-size: smaller; height: 6em; }

#siteHeader {
  height: 61px;
  background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhoa5tDb9myJgD8l5_5CxkTRBM_XhJEN2W_imchN3EqSxz_tIGzZAaWstfJLW37F7YlD6hdXYXRqYDo4tpM92ID2zxiGS4HbyxqWGsWYajqR5OqqBwteTFREuTDb6ZaSCL-HzcvLFryJB1ISnXuruqVsSD_CeU1NL6NGYT8EUbOsVy7REplQg6lLBjPPHed);
}
#siteHeader img { display: block; max-width: 100%; height: auto; }

button { padding: 0.5em; font-size: large; border-radius: 5px; }

.attention { font-size: larger; }
.attention, .error { color: #F60; font-weight: bold; opacity: 1; }

.separator { clear: both; text-align: center; }
.separator img, .step-img img { max-width: 100%; height: auto; }
.step-img { clear: both; text-align: center; }

.custom-btn {
  font-size: 16px; color: #fff; border: none; padding: 12px 24px; border-radius: 6px;
  margin: 5px; font-weight: 500; box-shadow: 0 2px 4px rgba(0,0,0,.1);
  transition: all .3s ease; cursor: pointer; display: inline-block;
  text-decoration: none; line-height: normal;
}
.btn1:hover { background: #45a049 !important; color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,.2); transform: scale(1.05); filter: brightness(1.1); }
.btn2:hover { background: #1976D2 !important; color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,.2); transform: scale(1.05); filter: brightness(1.1); }

/* Popup */
.popup {
  display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 300px; padding: 20px; background-color: #fff; border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0,0,0,.1); z-index: 1000;
}
.overlay { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); z-index: 999; }
.close-btn { display: block; text-align: right; }
.close-btn button { background-color: #f44336; color: #fff; border: none; padding: 5px 10px; cursor: pointer; font-size: medium; }

/* Mobile (added: original template had no viewport rules) */
@media (max-width: 700px) {
  body { font-size: medium; }
  #layoutContent, #layoutFooter { margin: 0 1em; }
  #layoutFooter { height: auto; padding-bottom: 2em; }
  #layoutWrapper { margin-bottom: 0; }
}