Spider-Man

Layout CSS

@import url('https://fonts.cdnfonts.com/css/komika-text');

main {
    background: #000;
}

button {
    background: #d40606;
    background-size: 20px;
    border: 1.5px solid #fff; 
    border-radius: 8px;
    font-family: "Komika Text Kaps", sans-serif;
    font-size: 20px;
    font-weight: 700;
    padding: 5px 10px;
 }

/* Page Background */

body {
    background: url("https://wallpapers-clan.com/wp-content/uploads/2025/07/spider-man-marvel-classic-black-desktop-wallpaper-cover-1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
    margin: 0;
}
/* Entire blog entry container */

/* Header */

.myspace-header .top-nav {
    background: #d40606 !important;
}


/* Footer */

footer {
    background: #d40606;
    border: 2px solid #000; 
    font-family: "Komika text Kaps", sans-serif;
}

nav {
    background: #000;
}

nav .links {
    background: #000;
}


.blog-entry {
    background: url("https://storage.yandexcloud.net/storage.yasno.media/nat-geo/images/2025/5/22/e2d20e34e83b46619840b8129648fad7.max-2000x1000.jpg");
;
}


/* Blog post title */

.blog-entry .title {
    color: #000;
    font-family: "Komika Text Kaps", sans-serif;
    font-size: 30px; 
    background: #d40606;
    padding-left: 5px;
}


/* Blog post body content */

.blog-entry .content {
    background: #000;
    margin-top: -5px;
}


/* Paragraphs in post */

.blog-entry .content p {
    padding-left: 15px;
    font-family: "Komika Text", sans-serif;
    font-size: 15px;
    color: #fff;
}


/* Blockquotes */

.blog-entry .content blockquote {
    background: #fff;
    padding-left: 7px;
    font-family: "Komika Text", sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
}


/* Links in the post */

.blog-entry .content a {
    color: #0077ff;
}


/*Author's profile picture*/
.blog-entry .profile-pic {
    position: relative;
    display: inline-block;
    

    
    /*  This pulls the picture inside the frame borders */
    background-size: 78%; 
    background-position: center;
}

.blog-entry .profile-pic {
    position: relative;
    display: inline-block;
    

    background-repeat: no-repeat;
    
    /*This pulls the picture inside the frame borders */
    background-size: 50%; 
    background-position: center;
}

.blog-entry .profile-pic::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    

    background-image: url("https://shared.fastly.steamstatic.com/community_assets/images/items/1390350/8cc1e96a3e623c3dc213d49d22027677cd8ab56e.png");
    background-size: 101% 97%;
    background-repeat: no-repeat;

    transform: scale(1.17);
}

/* Author info container */

.blog-entry .edit-info {
    background: url("https://img.spoonflower.com/c/15272514/p/f/m/u7oWpIaPR6iyY1pt-Drw7ptshMOfWL5XrQWTBRLUHIybkKp-KkG-V1o/Spiderwebs%20-%20Ditsy%20-%20Red%20Black%20Halloween%20Goth%20Spider%20Web%20Gothic%20Cobweb.jpg");
    font-family: "Komika Text", sans-serif;
}


/* Author info sidebar */
.blog-entry .author-details {
    background: #000;
    padding-left: 5px;
    color: #fff
}
.blog-entry .author-details a{
    color: #0077ff;
}


/* Kudos section */

.blog-entry .kudos-container .user-kudos-info {
    color: #fff;
}

.blog-entry .kudos-container {
    background: #d40606;
    font-family: "Komika Text Kaps", sans-serif;
    font-style: italic;
    font-size: 20px;
    padding-left: 5px;
}

.blog-entry .kudos-container a {
    color: #00b7ff;
}


/* main paragraph styles */

b {
    font-family: "Komika Text", sans-serif;
    color: #fff;
    font-size: 15px;
    
}


a {
    color: #00b7ff;
}

/* Comments table */

.heading {
    background: #d40606;
    font-family: "Komika Text Kaps", sans-serif;
    font-size: 20px;
}

.comments-table td, .music-table td {
    background: #000;
    vertical-align: top;
    padding-left: 5px;
    color: #fff;
    font-family: "Komika Text", sans-serif;
}

.comments-table td:first-child, .music-table td:first-child {
    background: #a10b00;
    text-align: center;
    font-weight: bold;
    width: 29%;
}