:root {
    --mg: #182a43;
}

/* PREVIEW */

.previewbox {
    position: relative;
}

#preview {
    background: var(--mg);
    width: 400px;
    height: 400px;
    display: block;
    margin: 4px auto;
}

.previewbox input[type='button'],
.randombox input[type='checkbox'] + label {
    position: relative;
    width: unset;
    display: block;
    margin-bottom: 0;
    cursor: pointer;
}

.randombox {
    text-align: right;
    position: absolute;
    right: 50%;
    bottom: 0;
    transform: translate(-204px);
}
.randombox input[type='checkbox'] {
    display: none;
}
.randombox input[type='checkbox'] + label:before {
    content: '';
    background-image: url('menu/LossMark.png');
    background-size: contain;
    vertical-align: sub;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.randombox input[type='checkbox']:checked + label:before {
    background-image: url('menu/Checkmark.png');
}
#random-xg + label:after {
    content: 'Layers';
}
#random-hex + label:after {
    content: 'Colors';
}
#random.disabled {
    color: var(--mg);
    text-decoration: line-through;
    border-color: var(--mg);
}

#download {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(204px);
}

/* MENU */

.flexbox.vertical {
    flex-direction: column;
}

#logo-bg-buttons,
#logo-mg-buttons,
#logo-fg-buttons {
    display: grid;
    grid-auto-rows: min-content;
}
#logo-bg-buttons {grid-template-columns: repeat(2, 1fr);}
#logo-mg-buttons {grid-template-columns: repeat(3, 1fr);}
#logo-fg-buttons {grid-template-columns: repeat(6, 1fr);}

@media (orientation: landscape) and (min-width: 900px) {
    #logo-bg-buttons {grid-template-columns: repeat(3, 1fr);}
    #logo-mg-buttons {grid-template-columns: repeat(4, 1fr);}
    #logo-fg-buttons {grid-template-columns: repeat(7, 1fr);}
}

input[type='radio'] + label img {
    max-width: 40px;
    max-height: 40px;
    margin: -4px;
    filter: contrast(0) sepia(1) contrast(3);
}
input[type='radio']:checked + label img {
    filter: contrast(0) sepia(1) contrast(3) invert(1);
}

.flexbox.vertical input[type='text'] {
    width: 94px;
    min-width: calc(100% - 30px);
}

/* SWATCH */

#swatch {
    border-top-right-radius: 86px;
    overflow: hidden;
}

#presets {
    height: 24px;
    margin: 4px;
    gap: 2px;
}

#presets div {
    border-radius: 4px;
    cursor: pointer;
}
#presets div.set {
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px white, 0 0 0 2px black;
}