.row {
  display: grid;
  grid-auto-flow: column;


  grid-template-rows: auto auto; /* shrink rows to content */
  column-gap: 20px;
  row-gap: 20px; /* controls vertical spacing between rows */
  
}


/* book covers */
.row a img {
  height: 200px;
  width: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.row a img:hover {
  transform: scale(1.05);

  }
  
  
body {
    /* 1. Reset defaults */
    margin: 0;
    padding: 0;
    
    /* 2. Make the body a flex container */
    display: flex;
    flex-direction: column;   /* Stack content vertically */
    justify-content: center;  /* Center vertically */
    align-items: center;      /* Center horizontally */
    
    /* 3. Ensure the body takes up the full iframe height */
    min-height: 100vh; 
    
    /* 4. Your background code */
    background-image: url("../assets/gifs/starry.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    /* 5. Text Styling */
    color: white;
    text-align: center;
}

/* 2. Kill the margin on the h4 and the main container */
h4 {
    margin-top: 0; /* This is the main culprit! */
    margin-bottom: 10px; /* Optional: adds a little space below the title */
}

.navbar {
    margin: 0;
    padding: 0;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    color: white !important;
}

h1 {
    color: white !important;
}

a {
    color: #db5c86 !important;
}

li{
    color: white !important;
}
li a:hover{
    color: red !important;
}  
.navbar a{
    color: white !important;
}

.navbar{
    border: solid white !important;
}

.navbar a:hover{
    background-color: rgba(255, 255, 255, 0.358) !important;
}

footer a{
    color: white !important;
}



main {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px; 
    perspective: 2000px; 

}

/* 1. Make the box a stack so text stays ABOVE image */
.box {
  width: 250px;
  height: auto;           /* Let it grow to fit text + image */
  display: flex;
  flex-direction: column; 
  align-items: center;
  gap: 10px;
  position: relative;
}

/* 2. Standardize both containers */
.front, .back {
  width: 100%;
  height: 225px;         /* Explicit height for the image area */
  position: relative;    /* Keeps them in the stack, NOT overlapping text */
  display: flex;         /* Both must be flex to size images the same way */
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 3. Ensure images behave identically */
.front img, .back img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* Keeps aspect ratio without cropping */
}

/* 4. Correct Hover Logic */
.back {
  display: none; 
}

.box:hover .front {
  display: none;
}

.box:hover .back {
  display: flex;         /* Matches .front's flex behavior */
}
main h2.title {
    color: white !important;
}

h3{
    color: white !important;
}

.name {
  color: white !important;
  background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent box */
  padding: 10px 15px;                  /* Space inside the box */
  border-radius: 5px;                  /* Optional: rounded corners */
  margin: 0;                           /* Reset margins */
  width: 100%;                         /* Makes it span the width of the container */
  box-sizing: border-box;              /* Keeps padding from breaking width */
  text-align: center;
  font-size: 1rem;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border for definition */
}


@media (min-width: 1800px) {
  main{
      margin-left: 600px;
      margin-right: 600px;
  }
}
@media (max-width: 1600px) {
  main{
      margin-left: 300px;
      margin-right: 300px;
  }
}
@media (max-width: 1400px) {
  main{
      margin-left: 100px;
      margin-right: 100px;
  }
}


  @media (max-width: 600px) {
    
    .container{
        perspective: none;
    }
    main{
        overflow: auto;
        height: 100vh;
    }
    .box{
      width: 100px;
      height: 100px;
    }

}