@import url('https://api.fonts.coollabs.io/css2?family=Bytesized&family=Coral+Pixels&family=Jacquard+12&family=Jacquarda+Bastarda+9&family=Jersey+10&family=Jersey+20&family=Sixtyfour&family=Tiny5&display=swap');

.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13pt;
}

.tiny5-regular {
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13pt;
}

.jacquard-12-regular {
  font-family: "Jacquard 12", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 12pt;
}

.jersey-20-regular {
  font-family: "Jersey 20", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13pt;
}

.coral-pixels-regular {
  font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15pt;
  position: relative;
  top: 0.08rem;
}

.bytesized-regular {
  font-family: "Bytesized", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14pt;
  position: relative;
  bottom: 2px;
}
.jacquarda-bastarda-9-regular {
  font-family: "Jacquarda Bastarda 9", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13pt;
  position: relative;
  top: 0.08rem;
}

.sixtyfour {
  font-family: "Sixtyfour", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BLED" 0,
    "SCAN" 0;
  letter-spacing: -0.05rem;
}

@font-face {
    font-family: 'Verdana';
    src: url('../gfx/verdana.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Speculum';
    src: url('../gfx/speculum.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SquareRoot';
    src: url('../gfx/sqrt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OrangeKid';
    src: url('../gfx/ORANGEKI.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Unsteady';
    src: url('../gfx/UNSTEADY.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.spoiler1 {
    border: 1px dotted rgba(255, 255, 255, 0.5);
}
.spoiler2 {
    opacity: 0;
}
.spoiler2:hover {
    opacity: 1;
}

.ToolBarB {
    background: #000000 url(../img/toolbar/bold.gif) center no-repeat;
}
.ToolBarI {
    background: #000000 url(../img/toolbar/italic.gif) center no-repeat;
}
.ToolBarU {
    background: #000000 url(../img/toolbar/underline.gif) center no-repeat;
}
.ToolBarS {
    background: #000000 url(../img/toolbar/strike.gif) center no-repeat;
}
.ToolBarImg {
    background: #000000 url(../img/toolbar/image.gif) center no-repeat;
}
.ToolBarUrl {
    background: #000000 url(../img/toolbar/link.gif) center no-repeat;
}
.ToolBarSpoil {
    background: #000000 url(../img/toolbar/spoiler.gif) center no-repeat;
}
.ToolBarCode {
    background: #000000 url(../img/toolbar/code.gif) center no-repeat;
}
.ToolBarYt {
    background: #000000 url(../img/toolbar/youtube.png) center no-repeat;
}
.ToolBarIrc {
    background: #000000 url(../img/toolbar/irc.gif) center no-repeat;
}
.ToolBarQuote {
    background: #000000 url(../img/toolbar/quote.gif) center no-repeat;
}
.ToolBarSvg {
    background: #000000 url(../img/toolbar/svg.gif) center no-repeat;
}
.ToolBarSmile {
    background: #000000 url(../img/smilies/smile.gif) center no-repeat;
}

/* Ensure the board logo fits its container at any screen size */
table.c1 tr.nt.n2 td.b.n1 table img {
    max-width: 100%;
    height: auto;
}

/* New feature announcement styling */
#featureAnnouncement {
    padding: 5px;
    margin: 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    border-color: #805B5C;
    background-color: rgba(128,91,92,0.25);
}

/* Styling the YouTube embed to be a little more reasonable to look at */

iframe {
  margin: 0.5rem 1rem 0.5rem 1rem;
  background-color: rgba(234, 51, 61, 0.25);
  padding: 1rem;
  border: 2px #EA333D groove;
  border-radius: 3rem;
}

/* Mobile Responsive Tweaks */
@media only screen and (max-width: 768px) {
    /* Header: Stack Logo and Attention Box */
    table.c1 tr.nt.n2 td.b.n1 table,
    table.c1 tr.nt.n2 td.b.n1 table tbody,
    table.c1 tr.nt.n2 td.b.n1 table tr,
    table.c1 tr.nt.n2 td.b.n1 table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    table.c1 tr.nt.n2 td.b.n1 table td {
        text-align: center;
        padding: 5px 0;
    }

    /* Top Navigation Bar */
    table.c1 tr.c td {
        display: block;
        width: 100% !important;
        text-align: center;
        padding: 5px 0;
        font-size: 120% !important;
    }

    /* Post Layout */
    table.c1[id] > tbody > tr > td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Reset sfont size */
    .sfont {
        font-size: 1rem !important;
    }

    /* Center sidebar info */
    table.c1[id] tr[valign="top"] td.sfont {
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    /* Post Text */
    #post_1 {
        font-size: 150% !important;
    }
}