/* THE MOST BEAUTIFUL STYLESHEET EVER CREATED */

/* Comic Sans is the ONLY valid font */
* {
    cursor: crosshair !important;
}

body {
    background-color: #000080;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 30px,
            rgba(255, 0, 255, 0.05) 30px,
            rgba(255, 0, 255, 0.05) 60px
        );
    margin: 0;
    padding: 0;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;
    overflow-x: hidden;
}

/* BLINK TAG EMULATION - because browsers killed it but WE REMEMBER */
.blink-text {
    animation: blink-animation 0.5s steps(2, start) infinite;
}

@keyframes blink-animation {
    to { visibility: hidden; }
}

/* RAINBOW TEXT - the pinnacle of web design */
.rainbow-text {
    animation: rainbow-shift 1.5s linear infinite;
    font-weight: bold;
    font-family: 'Comic Sans MS', cursive;
}

@keyframes rainbow-shift {
    0%   { color: red; }
    15%  { color: orange; }
    30%  { color: yellow; }
    45%  { color: lime; }
    60%  { color: cyan; }
    75%  { color: blue; }
    90%  { color: magenta; }
    100% { color: red; }
}

/* Construction banner */
.construction-banner {
    background: repeating-linear-gradient(
        45deg,
        black,
        black 10px,
        yellow 10px,
        yellow 20px
    );
    padding: 10px;
    text-align: center;
    border-bottom: 5px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.construction-banner img {
    width: 80px;
    image-rendering: pixelated;
}

/* Sidebar */
.sidebar {
    background: linear-gradient(180deg, #FF00FF, #800080, #FF00FF) !important;
    font-family: 'Comic Sans MS', cursive;
    border-right: 5px ridge gold !important;
    padding: 10px;
}

.nav-link {
    color: lime !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Comic Sans MS', cursive;
    background: rgba(0,0,0,0.5);
    padding: 5px 10px;
    display: inline-block;
    border: 2px outset silver;
    transition: none;
}

.nav-link:hover {
    color: yellow !important;
    background: red;
    text-decoration: underline overline line-through;
    font-size: 18px;
    border: 2px inset silver;
}

.visitor-counter {
    background: black;
    border: 3px inset gray;
    padding: 10px;
    margin: 10px 0;
    font-family: 'Comic Sans MS', cursive;
    color: red;
    font-size: 14px;
}

/* Main content area */
.main-content {
    background: linear-gradient(135deg, #000033, #330033, #003333, #333300);
    background-size: 400% 400%;
    animation: gradient-shift 10s ease infinite;
    padding: 20px;
}

@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Title text */
.title-text {
    font-family: 'Papyrus', 'Comic Sans MS', fantasy;
    font-size: 42px;
    color: gold;
    text-shadow:
        3px 3px 0 red,
        -3px -3px 0 blue,
        3px -3px 0 lime,
        -3px 3px 0 magenta,
        0 0 20px yellow;
    letter-spacing: 3px;
}

.subtitle-container {
    margin: 10px 0;
    padding: 5px;
    background: rgba(0,0,0,0.5);
    border: 2px dotted gold;
}

/* UGLY BUTTONS - a masterpiece */
.ugly-button {
    background: linear-gradient(180deg, #ff0, #f80, #f00);
    color: black;
    font-family: 'Comic Sans MS', cursive;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    border: 4px outset gold;
    cursor: pointer !important;
    text-shadow: 1px 1px white;
    animation: button-pulse 0.8s ease-in-out infinite;
    margin: 5px;
}

.ugly-button:hover {
    background: linear-gradient(180deg, #0ff, #08f, #00f);
    color: white;
    border: 4px inset silver;
    transform: scale(1.2) rotate(5deg);
}

.ugly-button:active {
    transform: scale(0.9);
    border-style: inset;
}

@keyframes button-pulse {
    0%, 100% { box-shadow: 0 0 5px red; }
    50%      { box-shadow: 0 0 20px yellow, 0 0 40px red; }
}

.mega-button {
    font-size: 22px;
    padding: 15px 30px;
    animation: mega-pulse 0.5s ease-in-out infinite, rainbow-border 2s linear infinite;
}

@keyframes mega-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

@keyframes rainbow-border {
    0%   { border-color: red; }
    25%  { border-color: lime; }
    50%  { border-color: cyan; }
    75%  { border-color: magenta; }
    100% { border-color: red; }
}

/* Ugly inputs */
.ugly-input {
    background: #1a1a1a;
    color: lime;
    border: 3px inset #666;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    padding: 5px;
}

.ugly-input:focus {
    background: #000033;
    color: yellow;
    border-color: red;
    outline: 3px dashed lime;
}

/* Gallery */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 15px;
}

.gallery-item {
    width: 220px;
    padding: 10px;
    text-align: center;
}

.ascii-deer pre {
    text-align: center;
    line-height: 1.2;
}

/* Tips list */
.tips-list li {
    margin-bottom: 15px;
    padding: 10px;
    border-left: 5px solid;
    border-left-color: inherit;
    background: rgba(0,0,0,0.3);
}

.tips-list li:nth-child(odd) {
    transform: rotate(0.5deg);
}

.tips-list li:nth-child(even) {
    transform: rotate(-0.5deg);
}

/* Call popup */
.call-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: black;
    border: 5px ridge gold;
    padding: 30px;
    z-index: 9999;
    text-align: center;
    font-family: 'Comic Sans MS', cursive;
    min-width: 350px;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.5);
}

.call-popup h3 {
    color: gold;
    font-size: 28px;
    margin: 0 0 15px 0;
    text-shadow: 2px 2px red;
}

.call-popup .sound-text {
    font-size: 36px;
    font-weight: bold;
    margin: 15px 0;
    animation: shake 0.1s linear infinite;
}

@keyframes shake {
    0%  { transform: translate(1px, 1px) rotate(0deg); }
    20% { transform: translate(-1px, -2px) rotate(-1deg); }
    40% { transform: translate(-3px, 0px) rotate(1deg); }
    60% { transform: translate(3px, 2px) rotate(0deg); }
    80% { transform: translate(1px, -1px) rotate(1deg); }
    100%{ transform: translate(-1px, 2px) rotate(-1deg); }
}

.call-popup .close-btn {
    background: red;
    color: white;
    border: 3px outset darkred;
    font-family: 'Comic Sans MS', cursive;
    font-size: 16px;
    padding: 8px 20px;
    cursor: pointer !important;
    margin-top: 15px;
}

.call-popup .close-btn:hover {
    background: darkred;
    border-style: inset;
}

/* Cursor trail dot */
.trail-dot {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    animation: trail-fade 1s forwards;
}

@keyframes trail-fade {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

/* Guestbook entry */
.gb-entry {
    border: 2px solid;
    margin: 10px auto;
    padding: 10px;
    max-width: 500px;
    font-family: 'Comic Sans MS', cursive;
}

/* Scrollbar styling - make it ugly too */
::-webkit-scrollbar {
    width: 20px;
    background: repeating-linear-gradient(0deg, red, red 10px, yellow 10px, yellow 20px);
}

::-webkit-scrollbar-thumb {
    background: lime;
    border: 3px outset green;
}

::-webkit-scrollbar-thumb:hover {
    background: magenta;
}

/* Selection color */
::selection {
    background: lime;
    color: magenta;
}

/* Link styles */
a {
    color: lime;
}

a:visited {
    color: magenta;
}

a:hover {
    color: yellow;
    text-decoration: underline overline;
}