/* Font */

@font-face {
    font-family: 'PixelOperator';
    src: url('/css/PixelOperator.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PixelOperatorHB';
    src: url('/css/PixelOperatorHB.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*
 
 ** Font File doesn't exist (yet!)
 
@font-face {
    font-family: 'Noto Emoji';
    src: url('/css/Fonts/NotoEmoji-Medium.woff2') format('woff2'),
        url('/css/Fonts/NotoEmoji-Medium.woff') format('woff'),
        url('/css/Fonts/NotoEmoji-Medium.ttf') format('truetype'),
        url('/css/Fonts/NotoEmoji-Medium.svg#NotoEmoji-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
*/

/* Page Styles */
body {
    cursor: url('/css/wincursor.png'), auto;
    font: 16px "PixelOperator";
    background: black;
    color: white;
    image-rendering: pixelated;
    -webkit-font-smoothing: none;
}

.moon {
    background: url('/css/bkg.gif') black;
}

.landing {
    text-align: center; /* phpd */
    margin: auto; /* no needdd */
    width: fit-content; /* no needdd */
    padding: 10px; /* phpd */
    background: #00001f; /* phpd */
}

/* Styles */

large {
    font-size: large;
}

#smol {
    display: none;
}

#link {
    border: 3px outset purple;
    background: rgba(128, 0, 128, 0.5);
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
}

/* Site Elements */

a {
    color: white;
}

a:hover {
    color: black;
    background: white;
}

#links {
    display: flex;
    flex-wrap: wrap;
}

#urls {
    display: contents;
    flex-wrap: wrap;
}

#buttons {
    text-align: center;
}

#urls > a, #smol > a {
    color: white;
    text-decoration: none;
}

#urls > a:hover, #smol > a:hover {
    color: white;
    background: transparent;
}

#link {
    border: 3px outset purple;
    background: rgba(128, 0, 128, 0.5);
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
}

#heading {
    border: 3px outset purple;
    background: rgba(128, 0, 128, 0.5);
    font-size: 20px;
    padding: 5px;
    display: flex;
}

#heading > img {
    padding-right: 8px;
}

#heading > text {
    display: grid;
}

#heading > text > small {
    font: 16px "PixelOperator";
}

h1 {
    font-size: 20px;
}

hr {
    border: 2px inset purple;
}

hr#sep {
    border-style: dashed;
}

#leftright {
    display: flex;
    align-items: center;
}

#leftright > #left {
    padding-right: 4px;
    min-width: 150px;
}

#leftright > #right {
    padding-left: 6px;
    border-left: 1px solid darkgray;
}

#leftright.sources > #left {
    text-align: center;
}

div#pg {
    max-width: 600px
}