* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #162c63;
    background-image: repeating-linear-gradient(45deg, #183169 0px, #183169 2px, #112453 2px, #112453 4px);
    font: 15px Verdana, Arial, sans-serif;
    color: #182145
}

.site {
    max-width: 1040px;
    margin: 24px auto;
    border: 5px ridge #dbdbdb;
    background: #ffffe9;
    box-shadow: 9px 12px #020a25
}

.ticker {
    background: #071e76;
    color: #fff6a5;
    text-align: center;
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .5px
}

.banner {
    min-height: 142px;
    background: linear-gradient(135deg, #f2d567, #e9e1bf 47%, #8ab9d2);
    border-bottom: 6px double #1b2c6b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 34px;
    gap: 25px
}

.logo {
    font: italic bold clamp(52px, 9vw, 112px) Georgia, serif;
    color: #081c64;
    letter-spacing: -7px;
    text-shadow: 3px 3px #fff, 6px 6px #b38e39
}

.logo span {
    font: 12px Arial;
    vertical-align: top;
    letter-spacing: 0
}

.tagline {
    color: #a8202b;
    text-align: right;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.5
}

.tagline small {
    font-size: 11px;
    color: #1a386b
}

.layout {
    display: grid;
    grid-template-columns: 210px 1fr
}

aside {
    background: #09216d;
    color: white;
    padding: 16px 11px;
    border-right: 4px ridge #aebad8
}

aside a {
    display: block;
    color: #fff6aa;
    margin: 3px 0;
    padding: 12px 8px;
    font-weight: bold;
    font-size: 13px;
    text-decoration: underline;
    border-bottom: 1px dashed #5176a3
}

aside a span {
    margin-left: 10px;
}

aside a:hover {
    background: #284ba0;
    color: white
}

.menutitle {
    padding: 11px 5px;
    color: #ffdf72;
    text-align: center;
    font-weight: bold;
    border: 2px outset #6381a8
}

.asidebox {
    margin-top: 27px;
    border: 2px inset #8da8c5;
    padding: 12px 7px;
    text-align: center;
    font: 12px/1.8 'Courier New', monospace
}

.asidebox strong {
    color: #ffe371
}

.tiny {
    font-size: 11px
}

.internet {
    color: #86dbff
}

.counter {
    display: inline-block;
    background: #040504;
    color: #50f350;
    letter-spacing: 3px;
    padding: 2px 6px;
    font-size: 20px
}

.blink {
    color: #53f45a;
    animation: blinking 1.5s step-end infinite
}

@keyframes blinking {
    50% {
        opacity: .1
    }
}

main {
    padding: 22px 30px 35px;
    min-width: 0
}

section {
    padding-bottom: 20px;
    margin-bottom: 18px;
    border-bottom: 2px dotted #d2cdb3
}

p {
    line-height: 1.68
}

.welcome {
    font: bold 26px Georgia, serif;
    text-align: center;
    color: #b42d28;
    letter-spacing: 1px;
    border-bottom: 2px solid #d8bd5a;
    padding-bottom: 10px
}

.hero {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #d5e9ef;
    border: 2px ridge #fff;
    padding: 13px
}

.hero img {
    max-width: 56%;
    border: 3px ridge silver
}

.hero h2 {
    font: bold 21px Georgia;
    color: #0a318b
}

.note, .disclaimer {
    font-size: 11px;
    color: #515971
}

.new {
    background: #ffef8e;
    border: 2px dotted #b3252d;
    padding: 13px;
    text-align: center;
    color: #8c2225;
    font-weight: bold;
    margin-top: 17px
}

.bar {
    font-size: 18px;
    color: white;
    background: #11328c;
    padding: 9px 14px;
    border-left: 9px solid #e4b54c
}

.features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.features div {
    padding: 12px;
    background: #f4f3dd;
    border: 1px solid #dad5aa;
    color: #1d4c23
}

.features small {
    display: block;
    margin: 7px 0 0 25px;
    color: #39435f;
    line-height: 1.5
}

.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.gallery figure {
    margin: 0;
    padding: 7px;
    background: #e6e6e6;
    border: 3px ridge #fff
}

.gallery img {
    width: 100%;
    height: auto;
    display: block
}

.gallery figcaption {
    text-align: center;
    padding: 8px 3px;
    font-size: 12px;
    font-weight: bold
}

.terminal {
    background: #050d0e;
    color: #71f88c;
    padding: 19px 24px;
    font: 18px/1.7 'Courier New', monospace;
    border: 5px ridge #888;
    letter-spacing: 1px
}

.retrobutton {
    display: inline-block;
    background: #c4c4c4;
    color: #071766;
    padding: 9px 13px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    border: 3px outset #f5f5f5;
    margin: 5px 5px 5px 0
}

.retrobutton:hover {
    border-style: inset;
    background: #efdd7d
}

footer {
    background: #07174e;
    color: #e0deaf;
    padding: 18px;
    text-align: center;
    font: 11px Verdana, sans-serif
}

footer a {
    color: #fff
}

@media(max-width:720px) {
    .site {
        margin: 0
    }
    .layout {
        grid-template-columns: 1fr
    }
    aside {
        border-right: 0;
        display: flex;
        gap: 5px;
        flex-wrap: wrap
    }
    aside a {
        padding: 7px
    }
    .menutitle, .asidebox {
        display: none
    }
    .banner {
        flex-direction: column;
        text-align: center;
        gap: 0
    }
    .tagline {
        text-align: center
    }
    main {
        padding: 17px
    }
    .hero {
        flex-direction: column
    }
    .hero img {
        max-width: 100%
    }
    .features, .gallery {
        grid-template-columns: 1fr
    }
}

/* Original 1998-style homepage: radio communication guide */

.radio-lead {
    font-size: 14px;
}

.radio-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 12px;
    margin: 12px 0 21px;
    background: #fff2c4;
    border: 2px ridge #e5cd75;
    color: #564018;
    font-size: 12px;
    line-height: 1.6;
}

.radio-notice i {
    color: #a56110;
    margin-top: 3px;
}

.radio-subheading {
    font: bold 17px Georgia, serif;
    color: #0b2d79;
    border-bottom: 2px solid #d9c265;
    margin: 24px 0 13px;
    padding-bottom: 6px;
}

.radio-subheading i {
    color: #b68d26;
    margin-right: 7px;
}

.radio-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.radio-step {
    background: #fff9d8;
    border: 2px outset #fff;
    padding: 12px 10px;
    font-size: 12px;
    min-width: 0;
}

.radio-step b {
    display: block;
    font-size: 13px;
    margin: 0 0 5px;
    color: #163777;
}

.radio-step p {
    margin: 20px 0 0;
    line-height: 1.55;
}

.radio-step-number {
    display: inline-block;
    float: left;
    margin: 0 8px 7px 0;
    text-align: center;
    width: 25px;
    height: 25px;
    font: bold 16px Georgia, serif;
    color: #fff;
    background: #bb2d31;
    border: 2px outset #e37b70;
    line-height: 16px;
}

.radio-format {
    margin-top: 17px;
    border: 3px ridge #bfc7d1;
    background: #fff;
}

.radio-format-top {
    background: #0b2c80;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 11px;
}

.radio-format-top i {
    color: #ffda67;
    margin-right: 6px;
}

.radio-command-example {
    text-align: center;
    background: #071420;
    color: #fff;
    font: bold clamp(20px, 4vw, 32px)/1.5 'Courier New', monospace;
    padding: 13px 8px 5px;
    letter-spacing: 1px;
}

.radio-command-example span {
    white-space: nowrap;
}

.radio-callsign {
    color: #84deff;
}

.radio-separator {
    color: #ffde79;
}

.radio-action {
    color: #8cff94;
}

.radio-parameter {
    color: #ffa6a5;
}

.radio-legend {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    color: #203458;
    font-size: 10px;
    background: #e5ecf7;
    padding: 9px 8px;
    text-align: center;
}

.radio-format p {
    margin: 10px 14px 14px;
    font-size: 12px;
}

.radio-format code, .radio-topics code, .radio-tips code, .radio-step code {
    background: #d9e5f9;
    color: #092e83;
    padding: 1px 3px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.radio-explain {
    margin-top: 0;
    font-size: 12px;
}

.radio-demo {
    margin: 13px 0 21px;
}

.radio-demo-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-end;
}

.radio-demo-tab {
    font: bold 11px Verdana, Arial, sans-serif;
    cursor: pointer;
    color: #122461;
    background: #d3d4d4;
    border: 3px outset #fff;
    padding: 10px 11px;
}

.radio-demo-tab:hover {
    background: #ffeaa7;
}

.radio-demo-tab.is-active {
    color: white;
    background: #143b8c;
    border: 3px inset #809cc6;
}

.radio-demo-tab i {
    margin-right: 4px;
}

.radio-window {
    border: 4px ridge #afb5be;
    background: #030d16;
}

.radio-window-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(90deg, #04267d, #4b79aa);
    color: white;
    padding: 6px 9px;
    font: bold 12px Arial, sans-serif;
}

.radio-window-controls {
    color: white;
    font: bold 15px monospace;
    white-space: nowrap;
}

.radio-window-body {
    min-height: 168px;
    padding: 14px 14px 7px;
}

.radio-line {
    display: grid;
    grid-template-columns: minmax(125px, .55fr) minmax(0, 1.45fr);
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px dashed #213d3e;
    padding: 8px 0;
    font: 12px/1.45 Verdana, Arial, sans-serif;
    color: #d6e6e5;
}

.radio-line code {
    color: #8aff9f;
    font: bold 14px 'Courier New', monospace;
    overflow-wrap: anywhere;
}

.radio-prompt {
    background: #102630;
    border-top: 1px solid #23524d;
    padding: 7px 14px;
    font: bold 13px 'Courier New', monospace;
    color: #78e8c2;
}

.radio-cursor {
    color: #79ff9d;
    animation: blinking 1.1s step-end infinite;
}

.radio-demo-note {
    font-size: 11px;
    color: #53607c;
    margin: 7px 2px;
}

.radio-topics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.radio-topic {
    background: #f0f2fa;
    border: 2px ridge white;
    padding: 12px 11px;
    min-width: 0;
}

.radio-topic h4 {
    margin: 0;
    color: #163985;
    font: bold 12px Verdana, Arial, sans-serif;
}

.radio-topic h4 i {
    color: #ae7520;
}

.radio-topic p {
    font-size: 11px;
    line-height: 1.55;
    margin: 10px 0;
}

.radio-topic a {
    font-size: 10px;
    font-weight: bold;
    color: #08399a;
}

.radio-tips {
    margin-top: 18px;
    background: #fdf3d0;
    border-left: 6px solid #c4a041;
    padding: 12px 16px;
}

.radio-tips h3 {
    color: #264479;
    font: bold 15px Georgia, serif;
    margin: 0 0 8px;
}

.radio-tips p {
    margin: 9px 0;
    font-size: 12px;
}

.radio-tips kbd, .radio-step kbd {
    font: bold 11px 'Courier New', monospace;
    background: #ececec;
    color: #222;
    padding: 2px 5px;
    border: 2px outset white;
}

.radio-footer-link {
    margin-top: 15px;
}

@media (max-width:840px) {
    .radio-steps, .radio-topics {
        grid-template-columns: 1fr;
    }
    .radio-step {
        min-height: 0;
    }
    .radio-legend {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:520px) {
    .radio-line {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .radio-window-body {
        min-height: 190px;
    }
    .radio-demo-tab {
        flex: 1;
        padding: 10px 4px;
        font-size: 10px;
    }
}