*
{
  text-align: center;
  background-color: white;
  color: black;
  padding: 0;
  margin: 0;
}

/* ********************************************** */
/* ***** Header ********************************* */
/* ********************************************** */
header *
{
  background-color: black;
}

header a
{
  text-decoration: none;
  background-color: black;
  color: white;
  font-family: Arial;
  margin: 0 5px;
}

header h1
{
  font-family: 'HelloBaby';
  background-color: rgb(85, 85, 85);
  color: white;
  padding: 20px;
  margin: 0;
  font-size: 45px;
  -webkit-text-stroke: 8px black;
  paint-order: stroke fill; 
}

/* ********************************************** */
/* ***** Banner ********************************* */
/* ********************************************** */
.banner
{
  width: 100%;
  overflow: hidden;
}

.banner img
{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Ensures banner spans full width even if nested inside a padded container like <main> */
main > .banner
{
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}
/* ********************************************** */
/* ***** Gallery Body *************************** */
/* ********************************************** */

main
{
  padding: 20px;
}



#images {
  display: flex;
  justify-content: center;
  gap: 30px; 
}

.image-container
{
  width: 480px;
  height: 640px;
  overflow: hidden;
  border: 5px solid black;
  border-radius: 4px;
  position: relative;
}

.image-container img
{
  width: 480px;
  height: 640px;
  object-fit: cover;
  transition: transform 1s;
}
.image-container img:hover
{
  transform: scale(110%);
  object-fit: cover;
}
.p-container
{
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0,0,0,0.45);
  width: 480px;
  height: 75px;

  
}

.p-container p
{
  color: rgb(109, 117, 231);
  background-color: rgba(0,0,0,0);

  transform:translate(0, -10%);
  font-family: Komikax;
  font-size: 46px;
  font-style: italic;
  font-weight: bold;

  -webkit-text-stroke: 8px black;
  paint-order: stroke fill;


}

/* ********************************************** */
/* ***** Footer ********************************* */
/* ********************************************** */

footer p
{
  border: 4px solid black;
  background-color: black;
  padding:20px 0;
  margin: 0;

  color: white;
 box-shadow: 0 100vh 0 100vh black;
  
  position: relative;
  z-index: 1;
}


/* ********************************************** */
/* ***** Fonts ********************************** */
/* ********************************************** */

@font-face {
  font-family: 'HelloBaby';
  src: url('./fonts/HelloBaby.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Komikax';
  src: url('./fonts/KOMIKAX.ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.card-image {
    background-image: inherit !important;
    background-size: cover !important;
    background-position: center !important;
    height: 200px;
    width: 100%;
}