/*davids font*/
@font-face {
  font-family: 'Davids3x3';
  src: url('/davidpages/font/Vols3x3.ttf') format('truetype');
}

@layer special {
    .ship-img {
        
        /* align-self: stretch; */
        all: revert;

        width: calc(var(--pixel-size) * 65);
        height: calc(var(--pixel-size) * 67);

        image-rendering: pixelated;

        /* prevent link from adding space */
        display: block;
    }

    .ship-img:hover {
        filter: brightness(1.4);

        /* fun */
        /* filter: brightness(1.4) hue-rotate(70deg) invert(9%); */
    }
}

:root {
  --pixel-size: 1px;

  --ship-bg: #525252;
  --ship-border-dark: #424242;
  --ship-border-medium: #747474;
  --ship-border-light: #848484;
}

body {
  background-color: black;
}

/* Red Debug Borders (RDB) */
/* div{border:1px solid red;} */



#all-box {
    display: flex;
    align-items: start;
    flex-flow: row wrap;
}


#options-box {
    margin: 5px;

    display: inline flex;
    flex-flow: row nowrap;

    /* top & left borders: dark */
    border-left: calc(var(--pixel-size) * 2) solid var(--ship-border-dark);
    border-top: calc(var(--pixel-size) * 2) solid var(--ship-border-dark);
    /* bottom border: medium */
    border-bottom: calc(var(--pixel-size) * 2) solid var(--ship-border-medium);
    /* right border: light */
    border-right: calc(var(--pixel-size) * 2) solid var(--ship-border-light);

    background-color: var(--ship-bg);

    font-size: smaller;
    font-weight: bold;
    text-shadow: var(--ship-border-light) 0 0.06em;

    /* prevent radio buttons from getting seperated from their label */
    white-space: nowrap;
}

#options-section {
    display: flex;
    flex-flow: column nowrap;

    padding: 5px;

    /* border: 1px solid black; */
    box-sizing: border-box;
}

.option {
    /* even it out a bit */
    padding-right: 0.2em;
    /* border-radius: 5px; */
}

#fit-option {
    /* switched to inline by keypress */
    display: none;
}

.option:hover {
    background-color: var(--ship-border-light);
    text-shadow: none;
}

.option:active {
    background-color: yellowgreen;
    text-shadow: none;
}

#ships-box {
    margin: 5px;

    display: flex;
    flex-flow: row wrap;

    /* 5 columns wide (plus 4 "pixels" of gutter), or */
    /* fill screen (100% - margin) */
    width: calc(min(
        var(--pixel-size) * (65 * 5 + 4), 
        calc(100% - 10px)
        ));

    gap: var(--pixel-size);
}


/* "fit" sizing */


/* ships box */
#ships-box.fit {
    /* fill screen (100% - margin) */
    width: 100%;
    /* gap: calc(100% / ((65*54) + 4)); */
    gap: 0;
}

/* the actual <a>'s in the flexbox (that hold the imgs) */
.fit > .ship-flex-item {
    /* 20% of (100% - 4"px") */
    flex: 1 0 calc(0.2 * (100% - (400% / ((65*54) + 4))));
    /* border:1px solid red; */
}

/* ship images, in the a's */
.fit > .ship-flex-item > .ship-img {
    width: 100%;
    height: auto;
}