/*Import Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');


/****************************************************/
/***********************  BODY  *********************/
/****************************************************/

body{
  background-color: lightgoldenrodyellow;
  margin: 0;
  display: grid;
  /*makes a grid consisting of 1 column where 
    every child of "body" gets its own row*/
  grid-template-columns: auto; 

  --character-img-width: 250px;
  --main-content-width: 1600px;
}


/****************************************************/
/********************  1 - Title  *******************/
/****************************************************/

h1{
  margin: 50px 50px 0px 50px;
  font-family: Poppins;
}



/****************************************************/
/***************  2 - Character Menus  **************/
/****************************************************/

.characterMenus{
  /*applies to text, pictures, & pretty much any child*/
  text-align: right;

  /*This margin property allows children to have equal margins 
    on the left & right sides*/
  margin: auto;

  /*establishes the width of this div*/
  width: 96%;

  /*puts upper limit on the width*/
  max-width: var(--main-content-width); 
}

#characterDropdownMenu{
  /*top right bottom left*/
  margin:15px 10px 10px 0;
  width: 150px;
}

/* Dropdown container */
.dropdown {
  /*default is 'static'. Need to set because 'dropdown' is 
    the nearest positioned ancestor of 'dropdown-content'. 
    'dropdown-content' is 'abosolute' & absolute content is 
    positioned relative to its nearest positioned (relative | absolute | fixed)
    ancestor */
  position: relative;
  /* default is 'block' for a 'div'; however, block doesn't respond to 
    'text-align' of the parent element ('characterMenus' in this case). Make
    'inline-block' so that it does respond & thus align properly.*/
  display: inline-block;
}

/* Button styling */
.dropdown-button {
  background-color: #4CAF50;
  color: white; /*button text*/
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  /*use absolute positioning as not to shove the content
    below it down.*/
  position: absolute;
  background-color: #f9f9f9;
  min-width: 180px;
  /*h-offset v-offset blur-radius color*/
  /*gives box shadow effect around the content menu*/
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 5px;
  left: -30px;
}

/* Links inside the dropdown */
.dropdown-content .option {
  padding: 12px 16px;
  text-decoration: none;
  /*width pattern color*/
  border-bottom: 1px solid #ddd;
  text-align: left;
}

/* Hover effects for dropdown menu items aka 'options' */
.dropdown-content .option:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}

/************dropdown menu hovers**********/

/* When you hover over 'dropdown' (which includes the dropdown menu button), 
   show the dropdown menu by converting its display to 'block' (from
   'none). This is a little confusing because the trigger is hovering over
   the 'dropdown' class even though the eventual target is the 'dropdown-content' 
   class.*/
.dropdown:hover .dropdown-content {
  display: block;
  cursor: pointer;
}

/* Button hover effect */
.dropdown:hover .dropdown-button {
  background-color: #45a049;
}


/****************************************************/
/*****************  3 - CHARACTERS  *****************/
/****************************************************/

main {
  display: flex;
  flex-wrap: wrap;
  gap: 1vw; /*space b/w each flex box item/cell*/
  width: 96%;
  margin: auto auto 20px auto;
  max-width: var(--main-content-width);

  @media screen and (max-width: 480px){
  	margin: 2vw;
  	gap: calc(2vw * .96);
  }
}

.character {
  display: hidden; /*default the display to hidden, it will be updated by javascript*/

  /*h-offset, v-offset, blur, spread, color*/
  /*'blur' ctrls the blur of the shadow line*/
  /*'spread' increases the size of the shadow*/
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5); 
  background-color: white;
  border: solid 1.5px black;
  border-radius: 3px;

  /*flex-grow flex-shrink flex-basis*/
  /*flex-basis is an item's starting width but
    it can grow to fill in any empty space in a
    row b/c flew-grow is set*/
  flex:1 0 var(--character-img-width);
  text-align: center;
  max-width: 49%;
  /*padding & border get included in an object's sizing*/
  box-sizing: border-box;
}

.character:hover{
  /*makes transparent effect when hovering over it*/
  background-color: rgba(246, 203, 6, .5);
}

.character img {
  /*take up 100% of the containing character card or use a set width, 
    whatever is less*/
  width: min(100%, var(--character-img-width));
  height: calc( var(--character-img-width) * 1.15 );
  margin-bottom: 0px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;

  /*shrink height on small screens*/
  @media screen and (max-width: 480px){
		height: calc(.93 * var(--character-img-width));
  }

}

.character hr{
  margin: 0px 25px 0px 25px;
}

h2 {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 600;
  /*spacing b/w letters*/
  letter-spacing: 0.3px;
  text-align: center;
  color: #f6cb06;
  margin: 0;
}


/***************TEAM CHARACTER CLASSES**************/
.team-div{
  width: var(--character-img-width);
  overflow-x: scroll;
}

.team-div .team-img{
   width: calc( var(--character-img-width) * 1.3 );
}

/*flew-grow forces items to strecth to the full width of a row
  even if the row only contains 1 item. To combat this, the 
  'dropdown-menu-selection'js script dynamically adds blank dummy
  items of class 'hidden-flex-item' so that the last row is full & thus
  flew-grow won't super stretch any items*/
.hidden-flex-item {
    content: "";
    flex: 1 0 var(--character-img-width);
     /*'hidden' means nothing shows but the corresponding item's spacing 
       still applies unlike 'none'*/
    visibility: hidden;
}