@font-face {
    font-family:"Danger Zone";
    src:url(../fonts/Danger\ Zone\ Warning.ttf);
    font-weight:normal;
    font-size:normal;
    font-display:swap;
}
@font-face {
    font-family:"Another Danger";
    src:url(../fonts/Another\ Danger\ Slanted\ -\ Demo.otf);
    font-weight:normal;
    font-size:normal;
    font-display:swap;
}
@font-face {
    font-family:"poti";
    src:url(../fonts/poti.ttf);
    font-weight:normal;
    font-size:normal;
    font-display:swap;
}
@font-face {
    font-family:"Punk Granny";
    src:url(../fonts/The\ Punk\ Grandmother.otf);
    font-weight:normal;
    font-size:normal;
    font-display:swap;
}
@font-face{
    font-family:"Punk Typewriter";
    src:url(../fonts/Punk\ Typewriter.otf);
    font-weight:normal;
    font-size:normal;
    font-display:swap;
}
@font-face {
    font-family:"Dino";
    src:url(../fonts/Cute\ Dino.ttf);
    font-weight:normal;
    font-size:normal;
    font-display:swap;
}
@font-face {
    font-family:"Witchy";
    src:url(../fonts/Swamp\ Witch.ttf);
    font-weight:normal;
    font-size:normal;
    font-display:swap;
}
@font-face {
    font-family:"Pixel";
    src:url(../fonts/Pix32.ttf);
    font-weight:normal;
    font-size:normal;
    font-display:swap;
}
body {
    background-image:url(../images/purple-cassettes.jpg);
    background-size:cover;
}
#background-div {
    width:1250px;
    height:auto;
    margin-inline:auto;
    border-width:10px;
    border-color:rgb(106, 1, 192);
    border-style:outset;
    background-image:url(../images/checkerboard-drip.jpg);
    background-size:1250px 1250px;

}
.site-header{
    display:flex;
    align-content:center;
    justify-content:center;
    width:1200px;
    margin-inline:auto;
    border-top-width:0px;
    border-width:6px;
    border-color:rgb(106, 1, 192);
    border-style:outset;
    background-image:url(../images/purple-starry-glitter.gif);
    
}
#header-container {
    display:flex;
    align-content:center;
    justify-content:center;
    
}
#nav-bar ul {
    list-style-type:none;
    margin:0;
    padding:0;
    justify-content:space-between;
    align-content:center;
    background-image:url(../images/purple-cassettes.jpg);
    background-size:cover;
    display:flex;
    width:1200px;
    margin-inline:auto;
    border-width:6px;
    border-color:rgb(106, 1, 192);
    border-style:outset;
    
}
#nav-bar a{
    font-family:Punk Typewriter;
    font-size:34px;
    display:block;
    color:white;
    text-decoration:none;
    padding:14px 20px;
    text-align:center;
    transition:background-color 0.3 ease;
}
h1 {
    font-family:Witchy;
    color:white;
    font-size:46px;
    font-weight:100;
    display:grid;
    justify-content:center;
    align-content:center;
    overflow-wrap:break-word;
}
p {
    font-family:Pixel;
    font-size:18px;
    color:white;
    justify-content:center;
    align-content:center;
    margin-inline:auto;
    margin-left:50px;
    margin-right:50px;
}
#site-intro {
    position:sticky;
    top:1000;
    left:300;
    display:grid;
    width:300px;
    height:auto;
    border-width:6px;
    border-left-width:0px;
    border-color:rgb(106, 1, 192);
    border-style:outset;
    background-image:linear-gradient(rgb(74, 2, 138), black);
    justify-content:center;
    align-content:center;
    #icon-container {
        display:flex;
        justify-content:right;
        margin-inline:auto;
        width:100px;
        height:80px;
        background-image:url(../images/konata-boop.gif);
    }
}
#site-intro a {
    text-decoration:none;
    color:white;
}
#site-intro a:hover {
    color:rgb(106, 1, 192);
}
#main-section {
    background-image:url(../images/purple-and-black-eyes.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    margin-top:-650px;
    margin-left:340px;
    display:grid;
    position:absolute;
    width:840px;
    height:auto;
    border-width:6px;
    border-style:outset;
    border-color:rgb(111, 0, 215);
    justify-content:center;
    align-content:center;
    padding:20px;
}
#site-updates {
    background-image:url(../images/purplestarblackbackground.jpg);
    width:fit-content;
    height:150px;
    overflow-y:auto;
}
#site-updates h2 {
    position:sticky;
    font-family:Pixel;
    color:white;
}
#site-updates-h2 {
    position:sticky;
    font-family:Pixel;
    color:white;
}
#site-updates a {
    text-decoration:none;
    color:white;
}
#site-updates a:hover {
    color:rgb(106, 1, 192);
}
#hyperfixations {
    background-image:url(../images/purplestarblackbackground.jpg);
    width:fit-content;
    height:150px;
    overflow-y:auto;
}
#hyperfixations h2 {
    font-family:Pixel;
    color:white;
}
#hyperfixations-h2 {
    position:sticky;
    font-family:Pixel;
    color:white;
}
#smart-gb-wrapper {
    position: relative;
    display: inline-block;
    border-width:4px;
    border-style:outset;
    border-color:rgb(106, 1, 192);
}
#footer-container {
     display:grid;
    width:1200px;
    border-width:6px;
    border-color:rgb(106, 1, 192);
    border-style:outset;
    background-image:url(../images/checkerboard-rough.jpg);
     justify-content:center;
    align-content:center;
    margin-inline:auto;
}
#blinkee-container {
    overflow:hidden;
    width:100%;
    padding:10px 0;
    white-space:nowrap;
    display:flex;
}
#blinkee-track {
    display:flex;
    width:max-content;
    animation:scrollMarquee 20s linear infinite;
}
#blinkee-track:hover {
    animation-play-state:paused;
}
#blinkee-group, #blinkee-group1 {
    display:flex;
    align-items:center;
    justify-content: rgba(255, 255, 255, 0);
    gap:15px;
    padding-right:15px;
}
#blinkee-group img, #blinkee-group1 img {
    height: 31px;
    display:block;
}

@keyframes scrollMarquee {
    0% {
        transform:translateX(0);
    }
    100% {
        transform:translateX(-50%);
    }
}