@font-face {
    font-family: "BombFactory";
    src: url("bombfact.ttf") format("truetype");
}

/*THIS IS FOR THE HOMEPAGE!*/
.HTMLhome {
    background-image: url(/site-wide/backgrounds/backstar.gif);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: aliceblue;
    background-attachment:fixed;

    a {
        background-image: url(/site-wide/rainbowBorder.gif);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
}

/*This is for the SHRINES page!*/
.HTMLshrine {
    background-image: url(/site-wide/backgrounds/backstar.gif);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: aliceblue;
    background-attachment:fixed;
    a {
        background-image: url(/site-wide/rainbowBorder.gif);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
}


/*THIS WAS GENNED FROM https://grid.layoutit.com/!!*/
/* NOTE: THIS IS FOR THE WHOLE 3-COLUMN LAYOUT!!!*/
.container {
  display: grid; 
  grid-template-columns: 300px 1200px; 
  grid-template-rows: 1fr; 
  gap: 0px 10px; 
  grid-template-areas: 
    "left center"; 
  justify-content: center; 
  align-content: stretch; 
  justify-items: stretch; 
  align-items: stretch; 
}
.left {
        grid-area: left;
        border-style: solid;
        border-color: #c6e3ff;
        background-color: black;
        border-radius: 13px;
        padding: 10px;
        filter:
            drop-shadow(0px 0px 20px #008cff);
        
        h3 { margin-bottom: 0px;}
        hr {
            color:rgb(250, 194, 8);
            height: 2px;
            border: none;
            background-color: rgb(250, 194, 8);
        }
        img {
            max-width: 275px;
        }

        iframe {
            max-width: 275px;
            border-style: none;
    }
    }
    .center {
        z-index: 1;
        grid-area: center;
        border-style: solid;
        border-color: rgb(255, 241, 229);
        background-color: black;
        border-radius: 13px;
        padding: 10px;
        filter:
            drop-shadow(0px 0px 20px #ffd000);
        hr {
            color: #0285ff;
            height: 2px;
            border: none;
            background-color: #0285ff;
        }
        
        img {
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: crisp-edges;
        }

    }
    .centerTop {
        grid-area: left;
        padding: 10px;
    }
.right {
        grid-area: right;
        border-style: solid;
        border-color: #c6e3ff;
        background-color: black;
        border-radius: 13px;
        padding: 10px;
        filter:
            drop-shadow(0px 0px 20px #008cff);
        h3 { margin-bottom: 0px;}
        hr {
            color:rgb(250, 194, 8);
            height: 2px;
            border: none;
            background-color: rgb(250, 194, 8);
        }
        img {
            max-width: 275px;
        }

        iframe {
            max-width: 275px;
            border-style: none;
    }
}

.shrineImg {
    background-image: url(/site-wide/rainbowBorder.gif);
    padding:5px;
    width: 200px;
    border-radius: 0px 20px 0px 20px;
}
.shrineImgFren {
    padding:5px;
    height: 175px;
    border-style: outset;
    border-radius: 4px;
    border-color: #ffae00;
}
.blocks {
    display:inline-block;
}

.pageCharacterLeft {
position: fixed;
left: 10px;
bottom: -200px;
float: left;
z-index: 0;
}
.pageCharacterRight {
position: fixed;
right: -10px;
bottom: -13px;
float: left; 
z-index: 0;
}


/* FROM OLD VERSION! */
.rainbowText {
  background-image: url(/site-wide/rainbowBorder.gif);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter:
    drop-shadow(2px 2px #0285ff);
}