body {
    background-image: url("images/bgs/514873kwpj8sc5kp.gif");
    overflow: hidden;
    margin: 30px;
}

.title-bar {
    background-image: url("images/misc/tumblr_fdf458b4acc61e264102ea4d37e0919b_79903d15_400.webp");
    cursor: grab;
}

.field-border {
    font-size: 15px;
}

.nav {
    margin-top: -20px;
}

.nav a {
    font-size: 17px;
    margin: 10px;
}

.nav a:hover {
    font-style: italic;
}

.welcomemsg {
    width: 600px;
    margin: auto;
    text-align: left;
    font-size: 17px;
    margin-top: 0px;
}

.navbar {
    float: left;
    width: 60px;
    margin-left: -15px;
    margin-top: -20px;
}

.navbar img {
    width: 50px;
    margin-top: 20px;
}

.navbar a {
    font-size: 13px;
    color: white;
    font-family: sans-serif;
    text-shadow: 0px 0px 10px black;
    font-weight: bold;
}


.welcome {
    position: absolute;
    left: 150px;
    top: 30px;
}

.aboutme {
    left: 280px;
    top: 90px;
    position: absolute; /* Essential for dragging */
    z-index: 10; /* Keeps it above other elements */
    cursor: default;
}

.window {
    display: none; /* This hides every window by default */
    position: absolute;
    z-index: 10;
    cursor: default;
}

.welcomemsg a {
    color: black;
    text-decoration: none;
}

.chatbox {
    position: absolute;
    top: 30px;
    left: 870px;
}

.music {
    position: absolute;
    top: 450px;
    left: 740px;
}

@keyframes rainbow {
    0% {
        color: red;
    }

    10% {
        color: orange;
    }

    20% {
        color: yellow;
    }

    30% {
        color: lime;
    }

    40% {
        color: green;
    }

    50% {
        color: blue;
    }

    60% {
        color: purple;
    }

    70% {
        color: rebeccapurple;
    }

    90% {
        color: deeppink;
    }

    100% {
        color: red;
    }
}

.h3 {
    color: red;
    margin-top: -20px;
    font-family: cherrybomb;
    animation: rainbow 0.5s ease-in-out infinite;
}

.window-icons {
    color: #c1c1c1;
}

.window-icons img {
    width: 50px;
    height: 50px;
    margin-left: 10px;
}

.window-icons img:hover {
    background-color: lightgrey;
}

.window-icons2 a {
    color: black;
    margin-left: 30px;
}

.graphics {
    position: absolute;
    left: 100px;
    bottom: 150px;
}

/* Remove outline for mouse users */
a:focus:not(:focus-visible) {
    outline: none;
}

@keyframes windowPop {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.window {
    display: none;
    position: absolute;
    z-index: 10;
    cursor: default;
    /* This ensures the animation plays every time the display changes to block */
    animation: windowPop 0.2s ease-out;
}

.blinkies img {
    width: 150px;
}

/*
Source - https://stackoverflow.com/a/12144181
Posted by Chris, modified by community. See post 'Timeline' for change history
Retrieved 2026-03-16, License - CC BY-SA 4.0
*/

@font-face {
    font-family: cherrybomb; /*a name to be used later*/
    src: url("fonts/Cherrybomb.ttf"); /*URL to font*/
}

body {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

button {
    cursor: pointer;
}

.favourites {
    position: absolute;
    left:600px;
    top: 250px;
}

.ul {
    text-align: right;
    list-style: square;
}