/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face { 
	font-family: "basic"; 
	src: url("./fonts/basiic.ttf")format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
  }
    
  .huninn-regular {
  font-family: "Jf Open Huninn";
  src: url(".fonts/Huninn-Regular.ttf")format("truetype") ;
    font-weight: 400;
  font-style: normal;
  }  
  
  body {
  background-color: #19191b;
  background-image: url("images/project-03/wallpaper.jpg");
  background-repeat: no-repeat; 
  background-position: center center; 
  background-size: cover; 
  background-attachment: fixed;
  color: white;
  font-family: "basic","Jf Open Huninn", sans-serif;
  font-size: 16px;
  
  }


h1 {
  font-size: 2.5em;
  margin-bottom: 40px;
}

h2 {
  font-size: 1.5em;
  margin-top: 50px;
  margin-bottom: 25px;
}

p {
  font-size: 1.25em;
  line-height: 1.8em;
  margin-bottom: 30px;
}

.text-center {
  text-align: center;
  }

  
  #sidebar img {
  background-color:#e9e3d5;
  margin-left: auto;
  margin-right: auto;
  width: 100px;        
  height: 100px;       
  border-radius: 12px; 
  object-fit: cover;  
  display: block;     
  margin: 5px auto;    
  }
  
 #main-container {
  background-color:#19191b  ;
  max-width: 1000px;      
  margin: 0 auto;         
  padding: 0 60px;      
}


#main-header {
  text-align: center;
  margin-bottom: 20px;
}

#main-header img {
  max-width: 100%;
  height: auto;
}


.flex {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 25px;
  width: 100%;
}


#sidebar {
  margin-top: 105px; 
  width: 250px;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  }

@media (max-width: 768px) {
  #sidebar {
    margin-top: 0;
  }
}

.banner-art {
  width: 100%;
  height: 225px;       /* banner size*/
  object-fit: cover;   
  display: block;
  border-radius: 8px 8px 0 0; 
}

.project-nav {
  background-color: transparent; 
  display: flex;
  justify-content: center;       
  gap: 12px;                      
  padding: 15px 0;
  flex-wrap: wrap;               
}

.project-nav a {
  background-color: #3b5998;     
  color: #e9e3d5;                 
  text-decoration: none;
  font-weight: bold;
  font-size: 1.25em;             
  padding: 14px 28px;           
  border-radius: 6px;        
  border: 1px solid #ffffff;     
  transition: all 0.2s ease-in-out;
}

.project-nav a:hover {
  background-color: #e9e3d5;     
  color: #0b0b0b;                
  text-decoration: none;         
  cursor: pointer;
}



.sub-nav {
  text-align: left;
  margin-top: 45px;
  margin-bottom: 45px;
  padding: 10px 0;
}

.sub-nav a {
  display: inline-block;
  color: #3b5998;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.15em;  
  padding: 12px 24px; 
  border-radius: 4px;    
  background-color: transparent; 
  border: 1px solid #3b5998;
  transition: all 0.2s ease-in-out;
  }

.sub-nav a:hover {
  background-color: #3b5998;
  color: #e9e3d5;
}

/* Container holding both character cards side-by-side */
.character-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: 700px;
  margin: 40px auto;
}

/* Individual clickable card block */
.character-card {
  text-decoration: none; 
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px; 
}

/* The actual rectangular image frame */
.character-img-box {
  width: 220px ;         
  height: 220px ;
  border: 3px solid #3b5998;
  border-radius: 8px;   
  overflow: hidden;     
  background-color: #e9e3d5;
  display: block ;
}

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