globby.css

body {
    /*Adds a black outline when using the divs for backgrounding coloring in the way I did */
    background-color: black;
}
.basic {
    /*Used for the standard style of the site give the font and color */
    font-family: 'Rock Salt';
    background-color: #005A6D;
}
.title {
    /*Giving the title some fair by animating it */
    text-align: center;
    text-shadow: 2px 2px black;
    color: purple;
    animation: texty 4s infinite;
}
/*Animation specifics */
@keyframes texty {
    0% {color: purple;}
    25% {color: red;}
    50% {color: rgb(236, 147, 13);}
    75% {color: rgb(7, 87, 7);}
    90% {color: rgb(3, 3, 119);}
    100% {color: purple;}
}
/*The code I used to animate the Globulus at the top left of page */
.noMoreGlobbies {
    /*This code animation is credited to Nelle de Jones CodePen Home for their CSS Bounce-in Animation 
    can be found here https://codepen.io/nelledejones/pen/gOOPWrK */
    animation: JumpingOnTheBed 2s ease infinite;
  }
  @keyframes JumpingOnTheBed {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
      40% {transform: translateY(-30px);}
      60% {transform: translateY(-15px);}
  }
/*Used for the blockquote at the start of the landing page 
which will be the only blockquote I use so no need to use a div
this positioning sid blockquote where I wanted it to placed and colored */
blockquote {
  color: rgba(0, 0, 0, 0.466);
  position: absolute;
  top: 100px;
  right: 1000px;
}
/*Centers text to the middle of the page */
.theAligner {
    text-align: center;
}
/*Styles for each of the diferent product types */
.IDk {
    font-family: 'Bangers';
    background-color: #4F009C;
    font-size: 30px;
}
.MnM {
    font-family: 'Chalkduster', sans-serif;
    background-color: #63542b;
    font-size: 30px;
}
.Goon {
    font-family: 'Creepster';
    background-color: #97fd77;
    font-size: 30px;
}
.TTRPG {
    font-family: 'Luminari', sans-serif;
    background-color: #ffffff;
    font-size: 30px;
}
.ven {
    font-family: 'Lemonism DEMO', sans-serif;
    color: #ffffff;
    background-color: #2b0a0a;
    font-size: 30px;
}
.SO {
    font-family: 'Wild Crow', sans-serif;
    color: #ffffff;
    background-color:#37053d;
}
.projects {
    background-color: aquamarine;
    font-family: 'News Junkie DEMO', sans-serif;
    font-size: 30px;
}
.dnd {
    background-color: #b11414;
    font-family: 'Luminari', sans-serif;
    font-size: 30px;
}
.art {
    background-color: #1e3b1d;
    font-family: 'Wildside', sans-serif;
    font-size: 30px;
}
/*Coloring for the IDkWCT show title */
.yel {
    color: yellow;
}
.organ {
    color: #fe9d00;
}
.red {
    color: red;
}
.purp {
    color: rgb(123, 26, 184);
}
.bulb {
    color: blue;
}
.tea {
    color: teal;
}
.cyan {
    color: #005A6D;
}
.whi {
    color: #ffffff;
}
.bren {
    color: #492c00;
}
.bluy {
    color: #287ba8;
}
.golb {
    color: #ffe415;
}
/*Used for center the text in the character section */
.chara-text {
    position: relative;
    left: 30px;
}
table, th, td {
    border:2px solid rgb(0, 0, 0);
}
/*This code is used to scroll throught a series of images in a row
This code was borrowed from W3Schools */
.scroll-container {
    background-color: #63542b;
    overflow: auto;
    white-space: nowrap;
    padding: 10px;
}
.scroll-container img {
    padding: 10px;
}
/* Centers the navagation */
.van {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
  }
  /* Colors the navagation on the home page */
.heading {
    font-family: 'Rock Salt';
    background-color: white;
}