/* retro.css
   this one has all the weird stuff i copy pasted from other sites
   dont judge me
*/

.rainbowText {
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    font-size: 16px;
}

.underConstructionGif {
    display: inline-block;
    background: repeating-linear-gradient(45deg,#000 0,#000 8px,#ffcc00 8px,#ffcc00 16px);
    color: #000;
    font-weight: bold;
    padding: 6px 10px;
    border: 3px solid #000;
    font-family: Arial, sans-serif;
}

.bouncingFish {
    display: inline-block;
    animation: bounceFish 1.4s ease-in-out infinite;
}
@keyframes bounceFish {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px) rotate(-5deg); }
}

.spinStar {
    display: inline-block;
    animation: spinStarKey 3s linear infinite;
}
@keyframes spinStarKey {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.glitterBorder {
    border: 3px dashed;
    border-image: repeating-linear-gradient(45deg, #ff00ff, #ffff00, #00ffff, #ff00ff) 10;
    padding: 6px;
}

.pollBar {
    background-color: #001a33;
    border: 1px solid #66ffff;
    height: 16px;
    margin-bottom: 6px;
}
.pollBarFill {
    background: linear-gradient(#ff66cc, #cc0099);
    height: 100%;
    text-align: right;
    color: #fff;
    font-size: 9px;
    padding-right: 3px;
}

.quizOption {
    display: block;
    margin-bottom: 4px;
    background-color: #001a33;
    padding: 3px 6px;
    border: 1px solid #003366;
}

.awardBadge {
    display: inline-block;
    width: 140px;
    background: linear-gradient(#ffff66, #cc9900);
    color: #330000;
    border: 2px solid #663300;
    text-align: center;
    padding: 6px;
    margin: 5px;
    font-size: 10px;
    font-weight: bold;
    vertical-align: top;
}
.awardBadge .ribbon {
    font-size: 20px;
}

.statusIndicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
}
.dotOnline { background-color: #33ff33; }
.dotAway { background-color: #ffcc00; }
.dotOffline { background-color: #999999; }

.inboxTable {
    width: 100%;
    border-collapse: collapse;
}
.inboxTable td, .inboxTable th {
    border-bottom: 1px solid #003366;
    padding: 4px 6px;
}
.inboxTable tr.unread {
    font-weight: bold;
    background-color: #002b4d;
}

.errorCode {
    font-family: "Courier New", monospace;
    background-color: #000;
    color: #ff3333;
    padding: 8px;
    border: 2px inset #666;
}