@font-face {
    font-family: "open-dyslexic";
    src: url(fonts/OpenDyslexic3-Regular.ttf);
}

a {
    color: #7d3c32;
}

::selection {
    background: #a52f2f;
}

a ::selection {
    background: #a52f2f;
    color: azure;
}

#mainbox {
    margin: auto;
    width: 71vw;
    position: relative;
    border-top: 0px solid #fff;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
    border-bottom: 0px solid #fff;
}

#mainbox2 {
    margin: auto;
    width: 70vw;
    position: relative;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}


img {
    overflow: hidden;
}

iframe {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}

.rotate_imageL {
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    transform: rotate(25deg);
}

.rotate_imageR {
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    transform: rotate(25deg);
}

#paint {
    background-color: #797979;
    float: right;
    width: 90%;
}

#painttools {
    float: left;
    width: 50px;
}

#paintfoot {
    clear: both;
}

.tool* {
    width: 5px;
    height: 5px;
}

.pallete {
    padding-top: 4px;
    width: 255px;
    height: 32px;
    background-image: image("icons/pallette.png");
    background-repeat: no-repeat;
    background-position: top 2px left 3px;
}

@keyframes tilt {
    from {
        transform: rotate(-15deg);
    }

    to {
        transform: rotate(15deg);
    }
}

#friendico {
    animation-name: tilt;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
    width: 20px;
    display: inline-block;
    margin: 5px;
}

#drag {
    position: absolute;
    z-index: 9;
    text-align: center;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.start-bar {
    padding: 2px;
    box-shadow: inset 1px 0 #fff;
    display: block;
    background-color: #b5b5b5;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #4e4e4e;
    position: fixed;
    z-index: 99999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.start-button-wrapper, button {
    border: 0;
    border-top-color: currentcolor;
    border-top-style: none;
    border-top-width: 0px;
    border-right-color: currentcolor;
    border-right-style: none;
    border-right-width: 0px;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: currentcolor;
    border-left-style: none;
    border-left-width: 0px;
}

.start-button-wrapper {
    float: left;
    margin-left: 2px;
    margin-bottom: 2px;
    vertical-align: middle;
    display: inline-block;
    padding: 2px 6px 3px;
    background-color: silver;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    box-shadow: inset 1px 1px #dfdfdf,1px 0 #000,0 1px #000,1px 1px #000;
    min-width: 59px;
    margin-right: 6px;
    color: #000;
}

.start-button {
    background-image: url(icons/start-button.png);
    background-repeat: no-repeat;
    width: 45px;
    height: 14px;
}

.start-bar-window {
    float: left;
    padding: 0 10px 0 6px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    box-shadow: inset 1px 1px grey;
    background-color: #a19c9c;
}

.timedate, .start-bar-window {
    vertical-align: middle;
    height: 22px;
    line-height: 22px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    font-weight: 400;
    color: #000;
}

.timedate {
    float: right;
    text-align: left;
    padding: 0 10px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
}

.crt::after {
    content: " ";
    display: block;
    position: absolute;
    height: 1415px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 9999999999;
    pointer-events: none;
    animation: flicker 0.15s infinite;
    box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}

.crt::before {
    content: " ";
    display: block;
    position: absolute;
    height: 1415px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 99999999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}

.crt {
    animation: textShadow 1.6s infinite;
}

.container {
    overflow: hidden;
    white-space: nowrap;
}

.scrolling {
    animation: marquee 2s linear infinite;
    display: inline-block;
    padding-right: 10px;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}


/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: antiquewhite;
        text-align: center;
        padding: 2px;
        border: 1px solid black;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        top: 100%;
        left: 100%;
        margin-left: -60px;
    }
    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

    .tooltip .tooltiptext::after {
        content: " ";
        position: absolute;
    }

a {
    cursor: crosshair;
}