@font-face {
  font-family: bombFont;
  src: url(Images/BombGameFont.ttf);
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: bigFont;
  src: url(Images/BigFont.ttf);
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: tinyFont;
  src: url(Images/tinypixel.otf);
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*{
  scrollbar-width: none;
}
h1, h2, h3, h4, h5, h6{
  font-weight: normal;
  font-style: normal;
}
.blue{
  margin: 0px;
  padding:0px;
  background-color: #adc0db;
  color: #262b44;
}
.purple{
  margin: 0px;
  padding:0px;
  background-color: #c5b6ee;
  color: #262b44;
}
.yellow{
  margin: 0px;
  padding:0px;
  background-color: #eff0d2;
  color: #262b44;
}
.green{
  margin: 0px;
  padding:0px;
  background-color: #d3f3d2;
  color: #262b44;
}
.centered{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0px;
}
.navImage {
  width: 80px;
  float: left;
}
.portrait{
  object-fit: contain;
  width: 128px;
}
.aboutInfo{
  text-align: left;
}
.pixelated{
  image-rendering: pixelated;
  font-smooth: none;
  font-size: 32px;
}
.bombFont{
  font-family: bombFont;
  font-size: 16px;
}
.bigFont{
  font-family: bigFont;
  font-size: 32px;
}
.smallFont{
  font-family: tinyFont;
  font-size: 16px;
}
.header{
  padding: 32px;
  text-align: center;
}
.leftcolumn{
  float: left;
  width: 30%;
  margin-left: 10%;

}
.rightcolumn{
  float: left;
  width: 50%;
  margin-right: 10%;
}
.centercolumn{
  float: left;
  width: 60%;
  padding: 0;
  margin-left: 20%;
}
.container{
  display: grid;
}
.card{
  image-rendering: pixelated;
  border:32px solid transparent;
  border-image: url(Images/BasicTextBox.png) round;
  border-image-slice: 30%;
}
.fitCard{
  image-rendering: pixelated;
  border:32px solid transparent;
  border-image: url(Images/BasicTextBox.png) round;
  border-image-slice: 30%;
  width: fit-content;
}
.blogImage{
  object-fit: scale-down;
  height: 100%;
  padding: -20px;
}
.blogImage img{
  object-fit: scale-down;
  height: 100%;

}
.albumCover{
  display: block;
  object-fit: scale-down;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
.tooltip{
  position: relative;
}
.tooltip .tooltiptext{
  visibility: hidden;
  width: 120px;
  background-color: #262b44;
  color: white;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;

  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext{
  visibility: visible;
  opacity: 1;
}
.row:after{
  content: "";
  display: table;
  clear: both;
}
#centerBorder{
  display: block;
  image-rendering: pixelated;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  position: sticky;
  text-align: center;

  width: 50%;
  height: fit-content;
  
  padding: auto;

  border:32px solid transparent;
  border-image: url(Images/BasicTextBox.png) round;

  border-image-slice: 30%;
  box-sizing: border-box;
}
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn, .centercolumn {
    width: 100%;
    padding: 0;
    margin: 0;
  }
}