/* google api font */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');

:root {
    /* not to extatic about some of the colors, may find a better pallette, fits then vibe though*/
  --header-colos: #b20c0c;
  --alt-header-color: #d87b11;
  --text-color: #ffff00;
  --accent-color: #a19a9a;
  --link-color: #800080;
  --background-colof: #0f0f0f;
}

body {
    /* modern browsers no longer support animated cursors so I have to use javascript for anything more than this*/
    cursor: url(../cursors/gun.cur), auto;
    /* 
        second misaligned layer of background images for further jank
        should only be visible on 4k moniters with low scaling or when zooming far out 
    */
    background-image: url('/images/cave-background.png');
    background-repeat: repeat;

    font-size: 1.5rem;
    color: var(--text-color);
    font-family: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', 'Chalkboard', cursive;
    text-align: center;
    
    margin: 0;
    padding: 0;

    /* debugging 
    border: 1px solid red;
    */

}
a:hover {
    color: var(--link-color);
}


/* global formatting*/
p {
    margin: 0;
    padding: 0;
}

hr {
    width: 80%;
}

li {
    text-align: left;
}
h1, h2{
    white-space: nowrap;
    margin-bottom: -.22em;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--header-colos);
}
h3 {
    white-space: nowrap;
    margin-bottom: 0em;
    margin-top: 0em;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--alt-header-color);
}

aside {

    color: white;
    position: fixed;
    width: 20%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: var(--background-colof);
    overflow-y: auto;
    font-size: small;
}

/* makes the left of the background image align with the sidebar*/
#main-content-wrapper {
    margin-left: 20%;
    background-image: url('/images/cave-background.png');
    background-repeat: round;        /* Distorts background based on zoom */
}

/*
    my attempt to recreate the marquee element due to it being defunct
    Speed is based off of browser width and i'm to lazy to fix that
*/
#banner {
    display: flex;
}
/* what actually moves */
#banner-box { 
    display: flex;
    align-items: center;
    animation: bounce 5s linear infinite alternate;
}
#banner-box img {
    height: 1em;
}
#banner-box p {
    white-space: nowrap;
}
@keyframes bounce {
    0% {
        transform: translateX(0);
    }
        100% {
        transform: translateX(calc(80vw - 100%)); 
        /* Moves left so the content bounces within the 80vw container */
    }
}

/* generic flexbox for multiple images */
.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.image-container img {
    height: auto;
    flex-shrink: 1;         /* allow shrinking */
    width: auto;            /* keep natural width unless shrinking */
    min-width: 0;           /* fixes shrinkin in some browsers (aka firefox) */
    object-fit: contain;
}

/* Text with skulls and dripping blood */

#blood-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#blood-box img {
    width: 100%;
    max-width:75%;
}

/* about me table */
#table-wrapper {
    padding-left: 5px;
    padding-right: 5px;
}
#about-me-table {
    margin: auto;
    border: 5px solid var(--accent-color);
}
#about-me-table td {
    border: 2px solid var(--accent-color);
}

/* spinning skull bullet points on about me list*/
.skull-list {
    list-style: none; /* remove default bullets */
}
.skull-list li {
    margin-bottom: .4em;
    position: relative;
    padding-left: 32px; /* space for the skull image */
}
.skull-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px; /* adjust as needed to center vertically */
    width: 24px; /* control the skull size */
    height: 24px;
    background-image: url('/images/spinning-skull.gif');
    background-size: contain;
    background-repeat: no-repeat;
}
.alien {
    vertical-align: middle;
    height: 3em;
}