/* Custom Classes */

.centered
{
  text-align: center;
}

.rounded
{
    border-radius: 80px;
}


.center-block
{
  display: inline-block;
}


.ra-boxart
{
  filter: blur(4px);
  height: 100%;
  width: 100%; 
  border-radius: 10px;
  z-index: -1;
  position: absolute; 
  object-fit: cover;
  
}

.navigation-bar
{
  font-size: 20px; 
  font-variant: small-caps; 
  word-spacing: 10%;
  background-image: url(../images/banner.png);
  background-repeat: round;
  text-align: center;
}

.ra-badgetitle
{
  color: orange; 
  font-weight: bold;
}

.section-header 
{
  background-image: url(../images/orangebg.png);
  box-shadow: 2px 2px 10px red;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}
      
.container-box 
{
  background-color: #652ce0;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
  min-height: 50px;
}

.selection-box
{
  background-color: #ffffff; 
  border-radius: 5px; 
  border-color: gold; 
  font-family: CatFiles;
}

.background
{
  background-image: url(../images/greenbg.png); 
  box-shadow: 2px 2px 10px red; 
  border-radius: 7px;
  padding: 10px;
}

.showing-banner
{
  background-image: url(../images/banner.png);
  background-repeat:round;
}

.ra-title
{
  color: gold; 
  font-weight: bold
}

.game-details
{
  background-image: url("../images/detailsbox.png");
  padding: 10px; 
  border-radius: 10px; 
  margin-top: 5px;
}

.game-details-box
{
  background-color: darkblue; 
  margin: 5px 0;
  
}

.retro-border {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* Adds space between the avatar, rank, and points */
  padding: 20px;
}

#ra-avatar,#ra-gameicon{
  width: 150px;
  height: 150px;
  border: 4px solid white; /* Gold border to match your title */
  border-radius: 10px;
}


.container {
    padding: 15px;
    border-radius: 10px;
    display: flex;       /* Keep this */
    flex-wrap: wrap;     /* Keep this */
    justify-content: center;
    margin-bottom: 30px;
    min-height: 50px;
 }

.box1 {
 float:left;
 background-color: #000;
 width: 300px;
 height: 200px;

 }
 .box2 {
 float:left;
 background-color: #999;
 width: 300px;
 height: 200px;
 }
 .box3 {
 float:left;
 background-color: #333;
 width: 300px;
 height: 200px;
 }

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* From Uiverse.io by SteveBloX */ 
.card {
  box-sizing: border-box;
  width: auto;
  height: auto;

  flex: 1 1 200px;
  flex: 1 1 20%;


  margin: 1vmax;
  padding: 10px;

  align-self: flex-end;

  box-shadow: 12px 17px 51px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);

  text-align:center;
  cursor: pointer;
  transition: ease 0.5s;
  display: inline-flex;  
  align-items: center;
  justify-content: center;
  user-select: none;
  font-weight: bolder;
  color: white;
  flex-direction: column;


  z-index: auto;

  border-style:solid;
  border-radius: 10px;
}

.card:hover {

  transform: scale(1.05);

}

.card:active {
  transform: scale(0.95) rotateZ(1.7deg);


}

.wrapper
{
  text-align: center;
}