@import url("/fonts/BPdots/BPdots.css");

/* Pixel Sea */

body {
    background-image: linear-gradient(40deg, #9fe2ff 6.25%, #ffffff 6.25%, #ffffff 50%, #9fe2ff 50%, #9fe2ff 56.25%, #ffffff 56.25%, #ffffff 100%);
    background-size: 24.89px 20.89px;
    margin: 0px;
    /* Fix for iPhones messing with text size */
    -webkit-text-size-adjust: 100%;
}

img {
    image-rendering: optimizeSpeed;
    image-rendering: pixelated;
}

a {
    text-decoration: underline;
    cursor: pointer;
}
a:hover {
    text-decoration: none;
}

input,
button,
select,
textarea {
    font: verdana, Helvetica, sans-serif;
    color: #00a5dd;
    background: white;
    border: 1px solid #00bfff;
    border-radius: 0px;
}

header {
    width: 780px;
    text-align: center;
    margin: auto;
    padding-top: 40px;
}
header a {
    text-decoration: none;
}
header:hover {
    transform: rotate(2deg);
}
header img {
    min-height: 64px;
    filter: drop-shadow(4px 4px 3px rgba(243, 255, 103, 0.668));
}

footer {
    text-align: center;
    font-size: 0.8em;
    color: #c2d8dc;
    padding-bottom: 30px;
}

/* IDs */

#wrapper {
    display: flex;
    width: 780px;
    margin: auto;
    margin-top: 10px;
    text-align: center;
}

#panel-1,
#panel-2,
#panel-3 {
    width: 120px;
}

#panel-1 {
    padding-top: 65px;
    margin-right: 20px;
}

#panel-2 {
    width: 500px;
}

#panel-3 {
    padding-top: 65px;
    margin-left: 20px;
}

#panel-3 ul,
#panel-1 ul {
    list-style: none;
    margin: 0;
    padding: 10px 5px 25px 5px;
}

#panel-3 li,
#panel-1 li {
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: bold;
    transform: rotate(5deg);
}

#panel-3 li:hover,
#panel-1 li:hover {
    transform: rotate(15deg);
}

#panel-1 li {
    margin-bottom: 6px;
}

#panel-3 li a {
    color: #1c3379;
    background-color: white;
}

#panel-3 li a:hover {
    color: #ecf1ff;
    background-color: #1c3379;
}

#panel-3 ul img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#panel-3 ul img {
    width: 45px;
}

#led-1,
#led-2 {
    width: 64px;
    margin-bottom: 40px;
    filter: drop-shadow(8px 8px 4px rgba(180, 0, 0, 0.668));
}

#feedback {
    height: 60px;
    background-color: #ebfaff;
    background-image: linear-gradient(0deg, #ebfaff 40%, #e0f7ff 40%, #e0f7ff 50%, #ebfaff 50%, #ebfaff 90%, #e0f7ff 90%, #e0f7ff 100%);
    background-size: 20px 20px;
    box-shadow: inset 0px 0px 20px #c7f1ff;
    border: 3px double #001a23;
    padding: 5px;
    margin: 10px;
    border-radius: 5px;
    text-align: left;
    color: #134774;
    overflow-y: scroll;
    font-family: "BPdots";
    letter-spacing: -0.4px;
    text-shadow: 1px 0px #e0edff;
    font-size: 18px;
}

#feedback a {
    color: #0a0a0a;
}

#printerBody {
    position: relative;
    background-color: #3f78a0;
    background-image: url("../images/pdj50168.gif");
    border: 3px double white;
    border-bottom: 1px dashed black;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

#printerBody:after {
    background-color: #9a9a9a;
    background-image: url("../images/pni50012.gif");
    content: " ";
    display: block;
    position: absolute;
    bottom: -75px;
    left: -3px;
    width: 100%;
    height: 74px;
    border: 3px double #4a70e0;
    z-index: -1;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

#printerInputs {
    padding-top: 15px;
}

#printerBody input {
    width: 78%;
}

#printerBody button {
    width: 15%;
}

#printerOutput {
    max-width: 480px;
    margin: auto;
}

#printerOutput > img,
#printerOutput > object {
    position: relative;
    bottom: -6.1px;
}

#icons {
    /* border-top: 1px dashed #979797; */
    min-height: 30px;
    position: relative;
    padding: 5px 16px 16px 16px;
    margin-bottom: 60px;
    text-align: left;
    box-shadow: 0px 40px 20px rgba(0, 0, 0, 0.376);
    font-family: monospace;
    font-size: 13px;
    letter-spacing: 0px;
}

#icons:after {
    position: absolute;
    bottom: -16px;
    left: 0px;
    height: 16px;
    width: 100%;
    content: " ";
    --mask: conic-gradient(from -47.5deg at bottom, #0000, #000 1deg 94deg, #0000 95deg) 50%/13.1px 100%;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

#icon-image-area td {
    width: 48px;
}

#background,
#background iframe {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -10;
    border: 0px;
}

#background {
    background-size: 64px;
}

/* Classes */

.icons_theme_icon {
    background: #feff81;
    color: #5c5628;
}
.icons_theme_icon:after {
    background-color: #feff81;
}
.icons_theme_icon a {
    color: #5c5628;
}

.icons_theme_badge {
    background: #b9fffc;
    color: #476867;
}
.icons_theme_badge:after {
    background: #b9fffc;
}
.icons_theme_badge a {
    color: #476867;
}

.icon {
    padding: 2px;
    border: 2px solid rgba(253, 255, 76, 0);
}
.icon:hover {
    transform: scale(2.5);
    z-index: 100;
    background-color: white;
    border: 2px dotted black;
    border-radius: 50%;
}

.ok {
    cursor: pointer;
}