body {
    /* font-family: "Questrial", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1rem; */
    font-family: "Albert Sans", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1rem;
  }
/* ============================================

GENERAL

============================================ */ 
a, a:hover {
  text-decoration: none;
}
h1, h2, h3, h4 {
  font-weight: 900;
}
h1 {
  font-size: 4rem;
}

a {
    color: #7012FE; /* Custom color for links */
    text-decoration: none; /* Remove underline */
  }
  
  a:hover {
    color: #F22A72; /* Custom color on hover */
    text-decoration: none; /* Add underline on hover */
  }


/* ============================================

GENERAL

============================================ */

.text-right {
  text-align: right;
}
  
/* ============================================

NAV

============================================ */

.navbar-brand img {
    height: 32px;
    width: auto;
}
.bnavbar-dark {
    background-color: #111111 !important;
}

.main {

}
/* ============================================

GENERAL

============================================ */
.mar-top {
  margin-top: 2em;
}
.headerbox {
  color: #fff;
  background: #111;
  padding: .5em;
  margin: 0 0 1em;
}
/* ============================================

HOME

============================================ */
.heroHome {
  background-image: url(/static/images/gamehero.webp);
  min-height: 270px;
  background-size: cover;
  color: #fff;
  margin-bottom: 2em;
  display: flex;
  justify-content: center; 
  align-items: center; 
}
.homeHero {
  padding-top: 4em;
}
.textbox {
  padding-top: 6%;
}
.homeHero h1 {
  font-size: 5rem;
}
/* ============================================

GAME LIST

============================================ */
.heroGames {
  background-image: url(/static/images/gamehero.webp);
  min-height: 270px;
  background-size: cover;
  color: #fff;
  margin-bottom: 2em;
  display: flex;
  justify-content: center; 
  align-items: center; 
}
.heroHome h1,
.heroGames h1 {
  padding: 1em 0;
}
.gameUnits p,
.fecha {
  text-transform: uppercase;
  font-size: .75rem;
  color: #999;
  margin: .5rem 0 0;
}
.gameUnits h2 {
  margin: 0;
}

/* ============================================

GAME DET

============================================ */
.heroGameDet {
  background-image: url(/static/images/gamedethero.webp);
  min-height: 150px;
  background-size: cover;
  color: #fff;
  margin-bottom: 2em;
  background-position: right;
  display: flex;
  justify-content: center; 
  align-items: center; 
}

.articleUnit {
  margin-bottom: 1em;
  border-bottom: 1px solid #ececec;
  padding: 0 0 1.5em;
}
.articleUnit .fecha {
  text-align: left;
  padding-bottom: 1em;
}
.articleUnit h3 {
  margin: 0;
}

.articleUnit {
  display: flex;
  align-items: flex-start; /* Align items at the start of the cross axis */
}

.artUImg {
  flex: 0 0 30%; /* Do not grow, do not shrink, occupy 30% of the container */
  margin-right: 40px; /* Add some space between the image and the text */
}

.artUImg img {
  width: 100%; /* Make the image take up the full width of the .artUImg */
  height: auto; /* Maintain aspect ratio */
}

.artUText {
  flex: 1; /* Allow this div to take up the remaining space */
}
/* ============================================

ARTICLE DET

============================================ */
.articleBox {
  padding: 1em 0;
}
.articlePage .fecha {
  padding-bottom: 1em;
}

.articleHead {
  display: flex;
  align-items: flex-start; 
}
.artGame {
  flex: 0 0 50%; 
  margin-right: 40px; 
}
.artDat {
  flex: 1; /
}
/* ============================================

FOOTER

============================================ */

footer {
  background-image: url(/static/images/watermark.svg);
  background-repeat: no-repeat;
  background-size: 27%;
  background-position: center right;
  background-color: #222222;
  padding: 3em 0;
  margin: 2em 0 0;
  color: #888;
}
footer li {
  padding: 0.5em 0;
}
.footer-logo {
  height: 36px;
  width: auto;
  margin-bottom: 2em;
}
.chales {

}