@font-face {
  font-family:'Ethiopia Jiret'; src:url(font/jiret.ttf?v=2026-05-31);
}

.nav{
    border:0px solid white;
    border-width:0px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-family: "Arial", Gadget, sans-serif;
    font-size:130%;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    margin-top:20px;
    padding-left:20px;
    padding-right:20px;
    text-align:center;
}
a, u {
    text-decoration: none;
    color:#08582C;
    font-family: "Arial", Gadget, sans-serif;
}

a.currentmenu {
    font-weight: bold;
    background-color: #21F380;
}

.midcontent {
    margin: auto;
    width: 50%;
    border: 0px solid green;
    padding-top: 30px;
    text-align:center;
}

.fb-like-wrap, .fb-comments-wrap {
    text-align: center;
    margin: 16px 0;
    /* FB plugin iframes render at fixed pixel widths; on a narrow phone the
       Like/Share widget is wider than the viewport and forces the whole page
       to scroll sideways. Clamp the wrapper (and the SDK-generated spans/
       iframes) to the available width so it can't push past the viewport. */
    max-width: 100%;
    overflow-x: hidden;
}
.fb-like-wrap > span, .fb-comments-wrap > span,
.fb-like-wrap iframe, .fb-comments-wrap iframe {
    max-width: 100% !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.input-wrap {
    text-align: center;
    margin: 0 auto;
    padding: 0 8px;
}

.input-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 8px auto 16px;
}

.actionbtn {
    cursor: pointer;
    font-family: "Arial", Gadget, sans-serif;
    font-size: 14pt;
    color: #08582C;
    background-color: #fff;
    border: 2px solid #21F380;
    border-radius: 6px;
    padding: 8px 16px;
    min-height: 44px;
    min-width: 44px;
    line-height: 1;
}
.actionbtn:hover, .actionbtn:focus {
    background-color: #21F380;
    color: #08582C;
    outline: none;
}
.actionbtn:active {
    transform: translateY(1px);
}

.copy-status {
    font-family: "Arial", Gadget, sans-serif;
    color: #08582C;
    font-size: 12pt;
    min-width: 80px;
    text-align: left;
}

.seo-content {
    max-width: 760px;
    margin: 24px auto;
    padding: 16px 20px;
    font-family: "Arial", Gadget, sans-serif;
    font-size: 14pt;
    line-height: 1.55;
    color: #222;
}
.seo-content h2 {
    color: #08582C;
    font-size: 22pt;
    margin: 0 0 12px;
}
.seo-content h3 {
    color: #08582C;
    font-size: 16pt;
    margin: 20px 0 8px;
}
.seo-content p { margin: 0 0 12px; }
.seo-content ul { margin: 0 0 12px 24px; padding: 0; }
.seo-content li { margin: 4px 0; }
.seo-content a { color: #08582C; text-decoration: underline; }
.footer-credit {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #ddd;
    text-align: center;
    font-size: 11pt;
    color: #555;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .nav { font-size: 110%; padding: 0 8px; }
    .nav a { padding-left: 12px; padding-right: 12px; margin-top: 12px; }
    .midcontent { width: auto; padding: 16px; }
    .midcontent iframe { width: 100%; max-width: 560px; height: auto; aspect-ratio: 16 / 9; }
    .seo-content { font-size: 12pt; padding: 12px 16px; }
    .seo-content h2 { font-size: 18pt; }
    .seo-content h3 { font-size: 14pt; }
}

@media (max-width: 600px) {
    /* Stack the two keyboard halves vertically on phones */
    .kb-layout, .kb-layout > tbody, .kb-layout > tbody > tr, .kb-layout > tr { display: block; }
    .kb-layout > tbody > tr > td, .kb-layout > tr > td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 0 16px !important;
    }
    .lettertable { margin: 0 auto; }
    .lettertable td { padding: 2px; }
}