body {
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    margin: 0px 0px 32px 0px;
    background-image: url("/images/stinky.png");
    background-repeat: repeat;
    background-size: 4cm;
    background-attachment: fixed;
    animation: bgScroll 3s linear infinite;
}

@keyframes bgScroll {
    0% {
        background-position: 0px 0px
    }

    100% {
        background-position: 4cm -4cm
    }
}

a {
  color: #00B7FF;
}

.centeredX {
    text-align:center;
}

#siteBlock {
    margin: 3vw 3vw 0px 3vw;
    height: fit-content;
    padding: 16px;
    border-image: url("/images/Web9Slice.png");
    border-image-slice: 128 fill;
    border-image-repeat: repeat;
    border-width: 5vw;
    border-style: solid;
    position:relative;
}

#PuppyLogo {
    height: 20em;
    width: 100%;
    object-fit: contain;
    position: absolute;
    top: calc(-5vw - 10em);
    pointer-events:none;
}


#navBlock {
    display: flex;
    flex-direction: row;
    background-color:rgb(18, 11, 65);
}
#navBlock div {
    width:max-content;
    height:64px;
    background-color:rgb(50, 44, 81);
    margin: 8px;
}

.NAV_BUTTON {
    background-position: top center;
    background-repeat: repeat-x;
    background-size: inherit 100%;
    flex-grow: 1;
    transition: flex-grow 0.3s;
}

#NAV_COMM {
    background-image: url("/images/CommissionButton.png");
}

#NAV_MORE {
    background-image: url("/images/GalleryButton.png");
}

#NAV_HOME {
    background-image: url("/images/InfoButton.png");
}

.NAV_BUTTON:hover {
    flex-grow: 2;
}
    .NAV_BUTTON a div {
        width:100%;
        height:100%;
    }

#SRCINTRO {
    position:relative;
}

#SRCINTRO img {
    width:100%;
}

#SRCINTRO div {
    position:absolute;
    width:60%;
    left:12px;
    top:12px;
}

#SRCINTRO div img {
    display:inline;
}