html {
    padding: 0px;
    margin: 0px;
}

::selection {
    color: auto;
    background-color: transparent;
}

body {
    cursor: crosshair;
    padding: 0px;
    margin: 0px;
    text-align: center;
    background-color: transparent;
    /* background-color: black; */
    color: #1481ba;
    font-family: "Press Start 2P";
}

button {
    cursor: crosshair !important;
}

h1 {
    font-family: 'Monoton';
    color: #f9b9f2;
    text-transform: uppercase;
    font-size: 105pt;
    margin: 15px 0 0 0;
    font-weight: normal;
    padding: 0px;
}

h2 {
    font-size: 30pt;
    margin: 20px;
}

input[type="button"] {
    background-color: transparent;
    font-weight: bold;
    color: #ffa400;
    border-width: 0;
    font-family: "Press Start 2P";
    text-transform: uppercase;
    font-size: 25px;
}

#tsp {
    color: #ffa400 !important;
}

p {
    color: #fff;
    line-height: 27px;
    font-size: 20px;
}

.green {
    color: #27be0f !important;
}

.yellow {
    color: #ffa400 !important;
}

.blue {
    color: #1481ba !important;
}

.pink {
    color: #f9b9f2 !important;
}

.red {
    color: #ff3c33 !important;
}

.hidden {
    display: none;
}

.blink {
    animation-duration: 200ms;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.disabled {
    color: grey !important;
}

.clear {
    clear: both;
}

@keyframes blink {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.board-content {
    width: 1016px;
    border: 4px double #ffa400;
}

#board {
    background-color: black;
}

#screen {
    width: 1024px;
    margin: auto;
}

#message {
    text-align: left;
    width: 570px;
    display: block;
    margin: 0;
    padding: 5px;
    float: left;
}

#message p {
    font-size: 22px;
    line-height: 35px;
}

#message p.win-text {
    font-size: 30px;
    margin-top: 20px;
}

#message p.winText {
    padding-top: 30px;
    font-size: 60px;
    line-height: 70px;
}

#score {
    float: left;
    text-align: left;
    margin-left: 40px;
    font-size: 25px;
    line-height: 40px;
}

#starfield {
    margin: none;
    padding: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;
}

#mode {
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
}

.buttons {
    margin: 40px 0 20px;
}

.center, img {
    margin: auto;
    text-align: center;
}

img {
    height: 400px;
}

#message img {
    display: block;
}

.logo {
    width: 700px;
    position: absolute;
    bottom: 50px;
    height: auto;
    left: 0;
    right: 0;
    margin: auto
}

@media (max-height: 1649px) {
    .logo {
        display: none;
    }
}

/* latin */
@font-face {
    font-family: 'Monoton';
    font-style: normal;
    font-weight: 400;
    src: local('Monoton'), local('Monoton-Regular'), url('../fonts/5h1aiZUrOngCibe4TkHLQg.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url('../fonts/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}