@font-face {

    font-family: Ravie;
    src: url(../Fonts/RAVIE.TTF)

}

html {

    color-scheme: light;

}

@font-face {

    font-family: Peralta;
    src: url(../Fonts/Peralta-Regular.ttf);
    

}

body, html {
  height: 100%;
  margin: 0;
}

a {
    cursor: pointer;
}

.HelloHi {

    position: absolute;
    left: 3px;
    right: 0;
    top: 15px;

    width: 68px;
    height: 22px;

    margin: auto;

    color: white;

    font-weight: bold;
    font-size: 20px;

}

.SuperJamesGif {
    
    width: 157px;
    height: auto;

    position: absolute;
    left: -1260px;
    right: 0;
    top: 14px;

    margin: auto;

}

.WebsiteLogo {
    
    width: 1026px;
    position: absolute;

    left: 0;
    right: 0;
    top: 35px;

    margin: auto;
    image-rendering: pixelated;

}

.TikiMain {
    width: 251px;
    height: 48px;
    position: absolute;

    left: 0;
    right: -1300px;
    top: 30px;

    margin: auto;
}

.Divider {
    width: 100%;
    height: 25px;

    position: absolute;
    left: 0;
    right: 0;
    top: 195px;

    margin: auto;

    border-top-style: double;
    border-bottom-style: double;
    border-color: #00f2ff;
    background-color: black;
}

#CenterPage {
    float: left;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


.New {

    margin-left: -8px;
    margin-top: -9px;

}

.LinkImages {

    width: 90px;
    height: 100%;
    background-color: transparent;
    justify-content:space-around;
    margin-left: 3px;

}


.AboutLink {

    width: 64px;
    height: 63px;
    background-image: url(../Link_Icons/AboutMe.gif);
    order: 1;
    margin-bottom: 31px;
    margin-top: 16px;
    margin-left: 10px;
    image-rendering: pixelated;

}   
.ArtLink {

    width: 65px;
    height: 54px;
    background-image: url(../Link_Icons/ArtStuff.gif);
    background-repeat: no-repeat;
    background-size: cover;
    order: 2;
    margin-bottom: 30px;
    margin-left: 10px;
    image-rendering: pixelated;

}   
.RomLink {

    width: 63px;
    height: 59px;
    background-image: url(../Link_Icons/RomHacks.gif);
    background-repeat: no-repeat;
    background-size: cover;
    order: 3;
    margin-bottom: 30px;
    margin-left: 10px;
    image-rendering: pixelated;

}   
.RoomLink {

    width: 53px;
    height: 64px;
    background-image: url(../Link_Icons/RoomCollection.gif);
    background-repeat: no-repeat;
    background-size: cover;
    order: 4;
    margin-bottom: 43px;
    margin-left: 16px;
    image-rendering: pixelated;

    .New {

        margin-left: -14px;

    }

}   
.GamingLink {

    width: 65px;
    height: 52px;
    background-image: url(../Link_Icons/GamingAchievements.gif);
    background-repeat: no-repeat;
    background-size: cover;
    order: 5;
    margin-bottom: 60px;
    margin-left: 10px;
    image-rendering: pixelated;

}   
.ConventionLink {

    width: 65px;
    height: 62px;
    background-image: url(../Link_Icons/ConventionPhotos.gif);
    background-repeat: no-repeat;
    background-size: cover;
    order: 6;
    margin-bottom: 40px;
    margin-left: 8px;
    image-rendering: pixelated;

    .New {

        margin-left: -6px;

    }

}   
.HappyLink {

    width: 55px;
    height: 55px;
    background-image: url(../Link_Icons/HappyZone.gif);
    background-repeat: no-repeat;
    background-size: cover;
    order: 7;
    margin-bottom: 40px;
    margin-left: 14px;
    image-rendering: pixelated;

    .New {

        margin-left: -12px;

    }

}   


.LinkBorder {
    position: absolute;
    left: -1262px;
    right: 0;
    top: 229px;

    margin: auto;
    
    height: 700px;
    width: 330px;
    background-color: rgba(0, 0, 0, 0.64);

    border: 5px solid transparent;
    box-shadow: 0 0 0 1px #00a0ff,
                inset 0 0 0 1px #00f2ff;
    float: left;
    display: flex;
    justify-content: left;
    z-index: 100;
}

.LinkLayout {

    width: 235px;
    height: 100%;
    background-color: transparent;
    margin-top: 25px;
    line-height: 28px;
    margin-right: 12px;
    margin-left: 4px;

}

.LinkLayout a:hover {

    color: #ff9e9e;

}

.LinkDescription {

    color: #9ec4d3;
    display: list-item;
    font-size: 14px;
    margin-top: 5px;
    line-height: 15px;

}

.LinkLayout ul {

    list-style: none;

}

.LinkLayout ul li{

    display: list-item;
    margin-bottom: 30px;
    
}

.LinkLayout ul li a{

    color: #ffffff;
    font-family: "Ravie", "Kavoon", serif;
    font-weight: 400;
    font-style: normal;
    text-decoration-line: underline;
    font-size: 19px;
    line-height: 20px;

    padding: 5px;
    margin-left: -5px;
}

.GifCollection {
    position: absolute;
    left: 0;
    right: -1259px;
    top: 229px;

    margin: auto;

    height: 700px;
    width: 330px;
    background-color: rgba(0, 0, 0, 0.64);
    
    border: 5px solid transparent;
    box-shadow: 0 0 0 1px #00a0ff,
                inset 0 0 0 1px #00f2ff;

}

.BlinkieBorder {

    justify-content: space-evenly;

    position: absolute;
    margin-left: 8px;
    margin-top: 10px;

}

#SecondDivider {

    width: 100%;
    border-top-style: double;
    border-bottom-style: double;
    padding: 10px;
    border-color: #00f2ff;
    position: absolute;
    top: 376px;

}

.ButtonBorder {

    width: 100%;
    height: 31px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

.StampBorder {

    position: absolute;
    margin-left: 6px;
    margin-top: 442px;

}

.WelcomeDivider {

    position: absolute;
    left: 0;
    right: 1px;
    top: 233px;

    margin: auto;

}

.WelcomeMessage {
    position: absolute;
    left: 0;
    right: 1px;
    top: 243px;

    margin: auto;

    height: 122px;
    width: 875px;
    border: 1px solid #00f2ff;

    background-image: url(../Backgrounds/BorderBackgrounds2.gif);
    display: grid;
    place-items: center;
}

h1 {
    color: rgb(203, 237, 255);
    font-family: "Special Gothic Condensed One", sans-serif;
    font-weight: 400;
    font-style: bold;
    font-size: 35px;
    margin-top: -5px;

}

p {
    color: white;
    font-size: 18px;
    margin-top: -18px;
    text-align: center;

    width: 640px;
}

.WelcomeDividerBottom {

    position: absolute;
    left: 0;
    right: 1px;
    top: 367px;

    margin: auto;

}

.SiteUpdates {

    position: absolute;
    left: 0;
    right: 347px;
    top: 389px;

    margin: auto;

    height: 467px;
    width: 530px;

    border: 1px solid #00f2ff;

    background-image: url(../Backgrounds/BorderBackgrounds.gif);

    overflow: hidden;
    overflow-y: scroll;

}

.SiteUpdates::-webkit-scrollbar {

    width: 5px;

}

.SiteUpdates::-webkit-scrollbar-thumb {

    scrollbar-color: #1f5c80a7 transparent;
    border-radius: 12px;
    border: 1px solid black;
}

.SiteUpdatesDateText {

    color: #dcdfff;
    font-size: 12px;
    padding: 10px;
    padding-bottom: 15px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
    font-style: italic;
    text-decoration: underline;
}

.SiteUpdatesMainText {

    color: hsl(47, 100%, 62%);
    font-size: 16px;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
    text-decoration: none;
    text-align: left;
    line-height: 21px;

    width: 100%;
}

.BirthdayMainText {
  background: linear-gradient(to right, #ef5350, #f48fb1, #2196f3, #26c6da, #5edf64, #eeff41, #f9a825, #ff5722);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 16px;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
    text-decoration: none;
    text-align: left;
    line-height: 21px;

    width: 100%;
}

.SiteUpdatesDivider {

    width: 510px;
    height: 1px;
    display: block;
    background-color: #c3c3c375;
    margin-left: 11px;
    position: absolute;
}

.SiteUpdatesText {

    padding-bottom: 14px;

}

@supports (scrollbar-color: red blue) {

    .SiteUpdates {

        scrollbar-color: #1f5c80a7 transparent;
        scrollbar-width: thin;
    }

}


.LinkMe {

    position: absolute;
    left: 437px;
    right: 0px;
    top: 389px;

    margin: auto;

    height: 113px;
    width: 221px;
    border: 1px solid #00f2ff;

    background-image: url(../Backgrounds/BorderBackgrounds.gif);
}

.SJN-Button {

    position: absolute;
    float: left;
    margin-top: 5px;
    margin-left: 5px;

}

h4 {

    color: #dcdfff;
    position: absolute;
    width: 123px;
    height: 31px;
    font-family: 'Courier New', Courier, monospace;
    margin-left: 96px;
    margin-top: 5px;
    background-color: transparent;
    font-size: 13px;
    font-weight: bolder;
}

.LinkMeBorder {

    background-color: transparent;
    width: 210px;
    height: 80px;
    color: #dcdfff65;
    font-size: 12px;
    margin-top: 40px;
    box-sizing: border-box;
    overflow: hidden;
    margin-left: 4px;
    
}

#WorldWideWeb {

    position: absolute;
    left: 767px;
    right: 0px;
    top: 396px;

    margin: auto;

    height: 100px;
    width: 91px;

}

.ImageOfTheMonth {

    position: absolute;
    left: 545px;
    right: 0px;
    top: 517px;

    margin: auto;

    height: 339px;
    width: 329px;

    border: 1px solid #00f2ff;

    background-image: url(../Backgrounds/BorderBackgrounds.gif);

}

h2 {

    font-family: 'Peralta', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #ffd500;
    font-size: 17px;
    margin-top: 9px;
    text-align: center;

}

.IOTMDivider {

    width: 309px;
    height: 1px;
    display: block;
    background-color: #ffd500;
    position: absolute;
    top: 40px;
    left: 10px;

}

.IOTMBorder {

    width: 313px;
    height: 273px;
    margin-top: 20px;
    margin-left: 8px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;

}

.IOTMBorder img {

    max-height: 100%;
    max-width: 100%;

}

.BottomFiles {

    position: absolute;
    left: 0;
    right: 56px;
    top: 874px;

    margin: auto;

    height: 62px;
    width: 656px;

    float: bottom;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

.FreeGif {

    margin-top: 5px;
    margin-right: 5px;

    width: 94px;
    height: 50px;

}

.BubbleBobbleExtendedAd {

    width: 488px;
    height: 62px;

}

.BubGif {

    margin-top: 24px;
    margin-left: -10px;

    width: 35px;
    height: 35px;

}

.TheBlendle {

    position: absolute;
    left: -1730px;
    right: 0;
    top: 828px;

    margin: auto;

    height: 101px;
    width: 76px;

}

/* --------------------------BIRTHDAY-------------------------- */

.Balloon1 {

    position: absolute;
    left: -960px;
    right: 0;
    top: 690px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
}

.Balloon2 {

    position: absolute;
    left: 830px;
    right: 0;
    top: 260px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
}

.Balloon3 {

    position: absolute;
    left: 0;
    right: 0;
    top: 198px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
}

.Present1 {

    position: absolute;
    left: -1050px;
    right: 0;
    top: 110px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
}

.Present2 {

    position: absolute;
    left: 1100px;
    right: 0;
    top: 120px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
}

/* --------------------------BIRTHDAY-------------------------- */

@media only screen and (max-width: 1600px) {
    .SuperJamesGif {
        width: 110px;
        height: auto;

        position: absolute;
        left: 0;
        right: 810px;
        top: 18px;

        margin: auto;
    }

    .TikiMain {
        width: 170px;
        height: auto;

        position: absolute;
        left: 827px;
        right: 0;
        top: 27px;

        margin: auto;    
    }

    .HelloHi {

        left: 20px;

        width: 68px;
        height: 22px;

        font-size: 15px;

    }

    .WebsiteLogo {
    
        width: 650px;
        height: auto;
        position: absolute;

        left: 0;
        right: 0;
        top: 30px;
        margin: auto;

    }

    .Divider {

        top: 145px;
        width: 100%;
        height: 22px;
    }

    .WelcomeDivider {

        position: absolute;
        left: 0;
        right: 1px;
        top: 181px;

        width: 332px;
        height: 6px;

        margin: auto;

    }

    .WelcomeMessage {

        position: absolute;
        left: 0;
        right: 1px;
        top: 188px;

        margin: auto;

        height: 76px;
        width: 332px;

    }

    h1 {
        font-size: 19px;
        margin-top: 0px;
        
    }

    p {
        font-size: 10px;
        margin-top: -8px;
        padding: 8px;
        width: 332px;
    }

    .WelcomeDividerBottom {

        top: 264px;

        width: 332px;
        height: 6px;

    }
    
    .SiteUpdates {
        position: absolute;
        left: 0;
        right: 0;
        top: 275px;

        margin: auto;

        width: 332px;
        height: 257px;

    }

    .SiteUpdatesDateText {

        padding-bottom: 8px;
        font-size: 7px;
    }

    .SiteUpdatesMainText {

        font-size: 11px;
        line-height: 16px;

    }

    .BirthdayMainText {

        font-size: 11px;
        line-height: 16px;

    }

    .LinkBorder {
        position: absolute;
        left: 0;
        right: 680px;
        top: 180px;

        margin: auto;
    
    }

    .LinkMe {

        position: absolute;
        left: 790px;
        right: 0;
        top: 892px;

        margin: auto;

    }

    .ImageOfTheMonth {

        position: absolute;
        left: 0;
        right: 0;
        top: 542px;

        margin: auto;

    }

    .GifCollection {
        position: absolute;
        left: 680px;
        right: 0;
        top: 180px;

        margin: auto;

    }

    .BottomFiles {

        position: absolute;
        left: 70px;
        right: 0;
        top: 900px;

        margin: auto;
        height: 62px;
        width: 556px;

    }

    #WorldWideWeb {

        position: absolute;
        left: 0;
        right: 699px;
        top: 900px;

        height: auto;
        margin: auto;

    }

    .TheBlendle {

        position: absolute;
        left: 0;
        right: 920px;
        top: 898px;

        margin: auto;

        height: 101px;
        width: 76px;
    }

    .BubGif {

        display: none;
    }

    .FreeGif {

        display: none;

    }

    /* --------------------------BIRTHDAY-------------------------- */

    .Balloon1 {

    position: absolute;
    left: -380px;
    right: 0;
    top: 640px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
    }

    .Balloon2 {

    position: absolute;
    left: 380px;
    right: 0;
    top: 260px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
    }

    .Balloon3 {

    width: 300px;
    height: auto;

    position: absolute;
    left: 0;
    right: 0;
    top: 158px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
    }

    .Present1 {

    height: auto;
    width: 50px;

    position: absolute;
    left: -650px;
    right: 0;
    top: 80px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
    }

    .Present2 {

    position: absolute;
    left: 720px;
    right: 0;
    top: 78px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
    }

    /* --------------------------BIRTHDAY-------------------------- */

}

@media only screen and (max-width: 1040px) {
    .SuperJamesGif {
        width: 85px;
        height: auto;

        position: absolute;
        left: 0;
        right: 570px;
        top: 10px;

        margin: auto;
    }

    .TikiMain {
        width: 130px;
        height: auto;

        position: absolute;
        left: 590px;
        right: 0;
        top: 23px;

        margin: auto;    
    }

    .HelloHi {

        left: 25px;

        width: 68px;
        height: 22px;

        font-size: 13px;

    }

    .WebsiteLogo {
    
        width: 450px;
        height: auto;
        position: absolute;

        left: 0;
        right: 0;
        top: 30px;
        margin: auto;

    }

    .Divider {

        top: 110px;
        width: 100%;
        height: 18px;
    }

    .WelcomeDivider {

        position: absolute;
        left: 0;
        right: 1px;
        top: 138px;

        width: 692px;
        height: auto;

        margin: auto;

    }

    .WelcomeMessage {

        position: absolute;
        left: 0;
        right: 1px;
        top: 145px;

        margin: auto;

        height: 95px;
        width: 692px;


    }

    h1 {
        font-size: 23px;
        margin-top: -2px;
        
    }

    p {
        font-size: 11px;
        margin-top: -18px;
        padding: 8px;
        width: 500px;
    }

    .WelcomeDividerBottom {

        top: 240px;

        width: 692px;
        height: auto;

    }
    
    .SiteUpdates {

        position: absolute;
        left: 0;
        right: 340px;
        top: 259px;

        margin: auto;

        width: 352px;
        height: 464px;

    }

    .SiteUpdatesDateText {
        padding-bottom: 20px;
        font-size: 8px;
    }

    .SiteUpdatesMainText {

        font-size: 12px;
        line-height: 15px;

    }

    .BirthdayMainText {

        font-size: 12px;
        line-height: 15px;

    }

    .LinkBorder {
        position: absolute;
        left: 0;
        right: 350px;
        top: 734px;

        margin: auto;
    
    }

    .LinkMe {

        position: absolute;
        left: 256px;
        right: 0;
        top: 259px;

        margin: auto;

    }

    .ImageOfTheMonth {

        position: absolute;
        left: 365px;
        right: 0;
        top: 384px;

        margin: auto;

    }

    .GifCollection {
        position: absolute;
        left: 350px;
        right: 0;
        top: 734px;

        margin: auto;
    }

    .BottomFiles {

        position: absolute;
        left: 0;
        right: 0;
        top: 1464px;

        margin: auto;

        height: 62px;
        width: 456px;

    }
    
    #WorldWideWeb {

        position: absolute;
        left: 590px;
        right: 0;
        top: 262px;

        height: auto;
        margin: auto;

    }

    .TheBlendle {

        position: absolute;
        left: 0;
        right: 600px;
        top: 1450px;

        margin: auto;

        height: 101px;
        width: 76px;
    }

    .LinkLayout ul li{

        display: list-item;
        margin-bottom: 24px;
    
    }

    /* --------------------------BIRTHDAY-------------------------- */

    .Balloon1 {

    position: absolute;
    left: -40px;
    right: 0;
    top: 1170px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
    }

    .Balloon2 {

    position: absolute;
    left: 623px;
    right: 0;
    top: 420px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;

    }

    .Balloon3 {

    width: 300px;
    height: auto;

    position: absolute;
    left: 0;
    right: 0;
    top: 116px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;

    }

    .Present1 {

    height: auto;
    width: 35px;

    position: absolute;
    left: -450px;
    right: 0;
    top: 65px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
    }

    .Present2 {

    height: auto;
    width: 50px;

    position: absolute;
    left: 520px;
    right: 0;
    top: 63px;

    margin: auto;

    z-index: 9999;

    pointer-events: none;
    }

    /* --------------------------BIRTHDAY-------------------------- */

}

@media only screen and (max-width: 728px) {
    .SuperJamesGif {
        display: none;
    }
    .TikiMain {
        display: none;
    }

    .HelloHi {

        left: 30px;

        width: 68px;
        height: 22px;

        font-size: 11px;

    }

    .WebsiteLogo {
    
        width: 350px;
        height: auto;
        position: absolute;

        left: 0;
        right: 0;
        top: 30px;
        margin: auto;

    }

    .Divider {

        top: 90px;
        width: 100%;
        height: 16px;
    }

    .WelcomeDivider {

        position: absolute;
        left: 0;
        right: 1px;
        top: 123px;

        width: 90%;
        height: auto;

        margin: auto;

    }

    .WelcomeMessage {

        top: 128px;

        width: 90%;
        height: 123px;

    }

    h1 {
        font-size: 25px;
        margin-top: 2px;
    }

    p {
        font-size: 11px;
        margin-top: -5px;
        padding: 8px;
        width: 90%;

    }

    .WelcomeDividerBottom {

        top: 252px;

        width: 90%;
        height: auto;

    }
    
    .SiteUpdates {

        position: absolute;
        left: 0;
        right: 0;
        top: 279px;

        margin: auto;

        width: 90%;
        height: 340px;

    }

    .SiteUpdatesDateText {
        padding-bottom: 5px;
        font-size: 10px;
    }

    .SiteUpdatesMainText {

        font-size: 13px;
        line-height: 16px;

    }

    .BirthdayMainText {

        font-size: 13px;
        line-height: 16px;

    }

    .LinkBorder {
        position: absolute;
        left: 0;
        right: 0;
        top: 650px;

        margin: auto;
    
        height: auto;

    }

    .LinkMe {

        display: none;

    }

    .ImageOfTheMonth {

        position: absolute;
        left: 0;
        right: 0;
        top: 1390px;

        margin: auto;

    }

    .GifCollection {
        position: absolute;
        left: 0;
        right: 0;
        top: 1760px;

        margin: auto;

    }

    .BottomFiles {

        position: absolute;
        left: 0;
        right: 0;
        top: 2484px;

        margin: auto;

        height: 62px;
        width: 330px;

    }

    #WorldWideWeb {

        position: absolute;
        left: 0;
        right: 0;
        top: 2556px;

        height: auto;
        padding-bottom: 20px;
        margin: auto;

    }

    .FreeGif {

        display: none;

    }

    .BubbleBobbleExtendedAd {

        width: 488px;
        height: 62px;

    }

    .BubGif {

        display: none;

    }

    .TheBlendle {

        display: none;

    }

    .LinkLayout ul li{

        display: list-item;
        margin-bottom: 24px;
    
    }

    /* --------------------------BIRTHDAY-------------------------- */

    .Balloon1 {

        display: none;

    }

    .Balloon2 {

        display: none;

    }

    .Balloon3 {

    top: 99px;

    }

    .Present1 {

        display: none;

    }

    .Present2 {

        display: none;

    }

    /* --------------------------BIRTHDAY-------------------------- */

}