[data-theme="light"] {
    .section > *:not(h3) {
        font-family: LightBody;
    }
}

[data-theme="dark"] {
    .section > *:not(h3) {
        font-family: DarkBody;
    }
}

#topLine {
    background: var(--accent-colour-3);
    color: var(--text-colour-3);
}

#backgroundImage {
    background: url('images/towers.png'), var(--background-colour);
    background-size: auto 66.5%;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: bottom;
    background-attachment: fixed;
}

.bodyContent {
    text-align: center;
    width: 60%;
    position: relative;
    left: 20%;
    margin-top: 1%;
    margin-bottom: 0;
    padding-bottom: 30px;
}

.section {
    border: 2px solid var(--foreground-colour);
    border-radius: 20px;
    overflow: hidden;
    margin: 4% 0%;
    background-color: var(--background-colour);
}

.section > *:not(h3) {
    text-align: left;
    padding: 0% 4%;
}

li {
    margin: 1% 0;
    list-style-type: none;
}

h3 {
    margin: 0;
    padding: 1.5% 0 1.5% 4%;
    text-align: left;
}

#gear > h3 {
    color: var(--text-colour-1);
    background-color: var(--accent-colour-1);
}

#general > h3 {
    color: var(--text-colour-2);
    background-color: var(--accent-colour-2);
}

#cw > h3 {
    color: var(--text-colour-3);
    background-color: var(--accent-colour-3);
}

#digital > h3 {
    color: var(--text-colour-4);
    background-color: var(--accent-colour-4);
}

#satellite > h3 {
    color: var(--text-colour-5);
    background-color: var(--accent-colour-5);
}

h5 {
    font-weight: bold;
    text-decoration: underline;
    margin-top: 1.4em;
    margin-bottom: 1.4em;
}

#aptloop > img {
    margin: 1% 2%;
    width: 45%;
}

#aptloop > p { 
    margin: 0%;
}

@media (max-aspect-ratio: 1/0.8) {
    .bodyContent {
        text-align: center;
        width: 80%;
        margin-bottom: 0;
        position: relative;
        left: 10%;
        margin-top: 1%;
    }
}