html body {
    min-height: 100vh;
}

body {
    margin: 0px auto 0px auto;
    padding: 0px;
    border-width: 0px;
    max-width: 1290px;
    box-shadow: 0px 0px 3px #b2b2b2;
    display: flex;
    flex-direction: column;
}

p {
    text-align: justify;
}

header {
    position: fixed;
    max-width: 1290px;
    width: 100%;
    top: 0px;
    z-index: 999;
    display: flex;
    flex-wrap: nowrap;
    border-bottom: #e1000f 2px solid;
    background-color: #fff;
}

header logo {
    content: url("../images/logo.svg");
    max-height: 3em;
    margin: auto 1em;
}

header img {
    max-height: 3em;
}

@media (max-width: 850px) {
    header nav {
        display: none;
    }
}
@media (max-width: 1000px) {
        header logo {
        content: url("../images/logo_mini.svg");
        max-height: 2em;
    }
}

@media (min-width: 851px) {
    header mininav {
        display: none;
    }
}

header nav {
    margin-left: auto;
    margin-right: auto;
}

header mininav {
    margin-right: auto;
}

header nav > ul {
    margin: 0px auto;
    padding: 0px;
    display: flex;
    flex-wrap: nowrap;
}

header nav > ul > li {
    display: block;
    border-left: #ccc 1px solid;
    border-right: #ccc 1px solid;
}

header nav > ul > li:first-child {
    border-left: #ccc 2px solid;
}

header nav > ul > li:last-child {
    border-right: #ccc 2px solid;
}

header nav > ul > li > a {
    display: block;
    padding: 1em;
    font-size: 1em;
    font-weight: bold;
    color: #000091ff;
    text-decoration-line: none;
    text-transform: uppercase;
}

header nav > ul > li > a:hover {
    text-decoration-line: underline;
}

header mininav {
    align-content: center;
}

header mininav summary {
    display: block;
}

header mininav detail {
    position: fixed;
    top: 3em;
    background-color: #fff;
    border: #c1000f 2px solid;
    border-radius: 6px;
    padding: 5px 15px;
}

header mininav detail > ul {
    padding: 0;
    margin: 0;
}

header mininav detail > ul > li {
    display: block;
    padding: .5em 0;
    text-align: center;
}

header mininav detail a {
    text-decoration-line: none;
    color: unset;
}

header mininav detail > ul > li:nth-child(n+2) {
    border-top: #000091 1px solid;
}

/** Shopping basket */

header > basket {
    margin: auto 1em;
}

header > basket detail {
    margin-right: 0.8em;
}

header basket > details > summary {
    display: block;
}

header basket > details > detail {
    position: absolute;
    right: 0;
    background-color: #fff;
    border: #c1000f 2px solid;
    border-radius: 6px;
    padding: 15px;
}

header basket alert {
    display: block;
    margin-top: .8em;
    padding: .5em;
    border: #a00 1px solid;
    border-radius: .4em;
    background-color: #fcc;
    max-width: 30em;
}

details > summary {
    cursor: pointer;
}

content {
    display: block;
    margin-top: 3em;
    flex-grow: 1;
    padding: 20px;
    background-color: #00009111;
}

warning {
    display: flow-root;
    border: #b00 1px solid;
    border-radius: .8em;
    padding: 0 1em;
    background-color: #400;
    margin: 1em 0;
    font-style: italic;
}

/** Technical specifications tables in texts **/

table.techspec {
    border-top: #e1000f 1px solid;
    border-bottom: #e1000f 1px solid;
    border-collapse: collapse;
}
table.techspec tr {
    padding: 0;
}

table.techspec tr td {
    padding: 1px .8em;
}

table.techspec tr td + td {
    padding-left: 1.5em;
}

table.techspec tr:nth-child(2n+3) {
    background-color: #e1000f66;
}

table.techspec tr:nth-child(1) {
    background-color: #00009166;
}

table.techspec tr:hover:nth-child(n+2) {
    background-color: #e1000f;
}

/** Illustration images/Floating information section  **/

.side-right {
    float: right;
    max-width: 30%;
}

/** Shop view with all items **/

shop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3em;
    padding: 2em;
}

shop .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e1000f11;
    border-radius: 3px;
    padding: .8em;
    width: 300px;
    transition: box-shadow .1s;
}

shop .item {
    align-self: normal;
    color: unset;
    text-decoration-line: unset;
}

shop .item:hover {
    box-shadow: 0px 0px 3px #b2b2b2;
    text-shadow: 2px 2px 3px #b2b2d2;
    text-decoration-line: underline;
}

shop .item name {
    font-weight: bold;
    color: #000091;
}

shop .item img {
    width: 100%;
    margin-top: .8em;
    margin-bottom: .8em;
}

shop .item description {
    font-size: .9em;
    text-align: justify;
    opacity: .8;
}

shop shop-item > button {
    width: 100%;
    padding-top: .5em;
    padding-bottom: .5em;
    border: none;
    background-color: lightgray;
}

/** Items **/

sitepath {
    display: block;
    margin: 1em
}

sitepath .secondary {
    color: #000091aa;
}

sitepath .secondary:last-of-type {
    color: #c1000faa;
}

/** Showcase **/

showcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

showcase weapon {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5em 1em 1em 1em;
    max-width: 600px;
    box-sizing: border-box;
    border-color: #c1000faa;
    border-width: 1px;
    margin-bottom: 1.5em;
}

@media (min-width: 1001px) {
    showcase weapon {
        width: 33.3%;
    }
    showcase weapon:nth-child(3n+1), showcase weapon:nth-child(3n+2) {
        border-right-style: solid;
    }
}

@media (max-width: 1000px) and (min-width: 601px) {
    showcase weapon {
        width: 50%;
    }
    showcase weapon:nth-child(2n+1) {
        border-right-style: solid;
    }
}

flagpole {
    display: block;
    position: fixed;
    right: 0;
    top: 3em;
    /* rotate: -25deg; */
}

flagpole pole {
    display: block;
    height: 90px;
    width: 6px;
    background-color: #ccc;
    border-radius: 2px;
    border: 1px solid #666;
}

@media (max-width: 800px) {
    flag {
        display: none;
    }
}

@media (max-width: 600px) {
    showcase weapon {
        width: 100%;
    }
}

showcase weapon:last-child {
    border-right-style: none;
}

showcase weapon name {
    font-weight: bold;
}

showcase weapon subcategory {
    font-size: .8em;
    font-style: italic;
    text-align: center;
}

showcase weapon img {
    max-width: 100%;
    margin: 1em 0px;
}

showcase weapon context {
    text-align: justify;
}

showcase weapon note {
    font-style: italic;
    margin: 1em .5em 0px .5em;
    font-size: .9em;
    text-align: center;
}

/* showcase weapon note::before {
    content: "«";
}

showcase weapon note::after {
    content: "»";
} */

/** Footer styles **/

footer {
    border-top: #c1000f 2px solid;
    background-color: #c1000f22;
}

@media print {
    header, footer {
        display: none;
    }
    body {
        margin: 0px;
        max-width: none;
    }
}

@media (prefers-color-scheme: dark) {
    shop shop-item > button {
        background-color: gray;
    }

    body {
      background: #181a1b;
      color: #e8e6e3;
      box-shadow: 0px 0px 3px #131516;
    }
    header {
        background-color: #282828;
    }
    header nav > ul > li > a {
        color: #75a7ff;
    }
    shop .item name {
        color: #75a7ff;
    }
    shop .item:hover {
        box-shadow: 0px 0px 3px #43494c;
        text-shadow: 2px 2px 3px #2e2e4e;
    }
    header nav > ul > li:nth-child(n) {
        border-color: #3e4446;
    }
    header basket > details > detail {
        background: #181a1b;
    }
    header mininav details detail {
        background: #181a1b;
    }
    header basket alert {
        background-color: #600;
    }
}