@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 814px 300px;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 10px;
  grid-auto-flow: row;
  justify-content: center;
  align-content: stretch;
  grid-template-areas:
    "left center right"
    "left center right"
    "left center right";
}
.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;
        }
        
        .myPages {
            img {
                padding: 12px;
            }
        }

    }
    .centerTop {
        grid-area: center;
        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;
    }
}

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

.albumArt {
    img {
    float: left; height: 250px; padding-right: 20px;
        }
}


/* 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);
}
.landing {
  padding: 4%;
  background-attachment: fixed;
  background-image: url(/site-wide/backgrounds/backstar.gif);
  color: white;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  p, h2 {
    text-align: center;
    display: grid;
    margin: auto;
    width: 600px;
    max-width: 600px;
    background-color: black;
    padding: 10px;
  }
}
.wendieWelcome {
  display: grid;
  margin: auto;
  width: 1280px;
  height: 720px;
  background-image: url(/wendieSplash1.png);
  background-size: cover;
  filter:
    drop-shadow(0px 0px 10px #0267ff);
}
.wendieWelcome:hover {
  background-image: url(/wendieSplash2.png);
}