#user_profile_content_container{
  height:100%;
  width:70%;
  margin:auto;
}

#user_profile_panel {   
    border-radius:20px;
    background-color:var(--background-color);
    border:2px solid var(--border-color);
    box-shadow: 0px 0px 25px 10px var(--profile-color);
    padding-left:5px;
    padding-right:5px;
    margin-bottom:100px;

}

#user_profile_container_top {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding:25px;
}

#user_profile_frame {
  margin:auto;
  position:relative;
  top:85px;
  height:200px;
  width:200px;
  background-color: var(--background-color);
  border-radius:50%;
  border:2px solid var(--border-color);
  box-shadow: 0px 0px 25px 10px var(--profile-color);
  z-index:1
}

h1.monster_name{
    font-family: "Economica", sans-serif;
    font-weight:400;
    font-style: normal;
    font-size:45px;
    letter-spacing: .01rem;
    color:var(--primary_font-color);
    align-self:end;
    text-align:center;
    margin:0;
  }

object.monster_type_icon {
    width:60px;

}

object.project_control_icon {
  width:25px;
  justify-self:center;
  align-self:center;
}

object.remove_asset {
  width:10%;
  justify-self:center;
  align-self:center;
}

h3.monster_field {
  font-family: "Economica", sans-serif;
  font-weight:400;
  font-size:20px;
  letter-spacing: .01rem;
  color:var(--secondary_font-color);
  margin:0;
}

h3.monster_value {
  font-family: "Economica", sans-serif;
  font-weight:400;
  font-size:26px;
  letter-spacing: .01rem;
  color:var(--primary_font-color);
  margin:0;
}


#user_profile_container_middle {
  padding-top:10px;

}

#user_profile_container_bottom {
  padding-top:10px;
  padding:25px;
}

.user_account_tab{
  box-sizing: border-box;
  display:flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius:10px;
  background-color: var(--dark_tab-color);
  border:2px solid var(--border-color);
  justify-content: center;
  align-items:center;
}



.tab_icon_container {
  text-align:right; 
  align-self:center;
}

.tab_icon{
  max-height: 80px;
  pointer-events: none;
}

.tab_title{
  font-family: "Mouse Memoirs", sans-serif;
  font-weight:400;
  font-size:60px;
  letter-spacing: .1rem;
  color:var(--primary_font-color);
  margin:0;
  padding-left:20px;

}

.tab_container {
  box-sizing: border-box;
  display:grid; 
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 10px;
  width: 100%;
}

div.tab_content_container{
  margin:5px;
  margin-top:20px;
  border-radius:10px;
  
}

.project_container {
  border-radius:7px;
  border:1px solid var(--background-color);
  margin-bottom:15px;
  padding:5px;

}

.project_container:hover {
  border:1px solid var(--border-color); 
  box-shadow: 0px 0px 12px 5px var(--profile-color);
}


.project_container.dark{
  background-color:var(--dark_tab-color)
}

.project_container.light{
  background-color:var(--light_tab-color)
}

.project_image_container.light{
  background-color:var(--light_tab-color);
  }

.project_image_container.dark{
  background-color:var(--dark_tab-color);
}

.project_controls.light{
  background-color:var(--light_tab-color);
  }

.project_controls.dark{
  background-color:var(--dark_tab-color);
}

div.project_header{
  display:block;
}

div.project_image_panel{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  order:5; 
  justify-content:center;
}

div.project_controls{
  position:relative;
  top:-18px;
  display:flex;
  flex-direction: row;
  justify-content:center;
  justify-self:center;
  gap:16px;
  background-color:var(--background-color);
  border: 1px solid var(--secondary_font-color);
  width:100px;
  height:36px;
  border-radius:50px;
}

div.remove_asset_container{
  margin:auto;
  display:grid;
  background-color:var(--background-color);
  border: 1px solid var(--secondary_font-color);
  width:20px;
  height:20px;
  border-radius:50px;

}

h1.project_name{
  font-family: "Economica", sans-serif;
  font-weight:600;
  font-size:28px;
  letter-spacing: .01rem;
  color:var(--primary_font-color);
  margin:0;

}

h4.project_image_label{
  font-family: "Economica", sans-serif;
  font-weight:400;
  font-size:17px;
  letter-spacing: .01rem;
  color:var(--secondary_font-color);
  margin:0px;
}

h4.project_image_field{
  font-family: "Mouse Memoirs", sans-serif;
  font-weight:400;
  font-size:40px;
  letter-spacing: .1rem;
  color:var(--primary_font-color);
  margin:0px;
}


img.project_icon.user_account {
  align-self:center;
  justify-self:center;
  max-width:60px;
  max-height: 60px;
  width:auto;

}

div.project_icon_container {
  display:grid;
  border-radius:5px;
  border: 1px solid var(--primary_font-color);
  background-color: var(--dark_tab-color);
  width:60px;
  height:60px;
  padding:3px;
 
}

div.project_title{
  display:grid; 
  grid-template-columns:60px 1fr;
  gap:10px;

}

img.bite_image {
  overflow:hidden;
  max-width:98%;
  max-height:98%;  
}

div#bite_container {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:25px;
  order:5; 
  justify-content:center;
}

div.bite_image_container {
  width:150px;
  height:150px;
  border-radius:7px;
  border: 1px solid var(--border-color);
  padding:5px;
  margin:auto;
  margin-bottom:15px;
  display:grid;
  align-items:center;
  justify-items:center;


}

div.bite_image_container:hover {
  box-shadow: 0px 0px 12px 5px var(--profile-color);
}

div.project_image_container {
  border-radius:7px;
  border:1px solid var(--secondary_font-color);
  margin-top:10px;
  display:none;
  grid-template-rows: 25px 1fr'

 }

object.project_thumbnail.user_account {
  align-self:center;
  justify-self:center;
  width:50px;
}

img.project_asset_image{
  border-radius:7px;
  max-width:98%;
  max-height:98%;  

}

div.project_asset_image_container {
  justify-content: center;
  align-items: center;
  width:175px;
  background-color:var(--background-color);
  border-radius:7px;
  border: 1px solid var(--border-color);
  padding:10px;
  padding-bottom:5px;
  margin:5px;


}

div.project_header {
  padding:10px;
  padding-left:20px;
  padding-right:20px;
  cursor:pointer;
}

div.project_header_mobile{
  display:none;
}

div.project_controls_panel {
  display:none;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius:10px;
  padding:15px;
  width:250px;
  margin:auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

input.project_controls_text{
  font-family: "Economica", sans-serif;
  font-weight:600;
  font-style: normal;
  font-size:24px;
  letter-spacing: .01rem;
  border:none;
  border-radius:3px;
  background-color: var(--dark_tab-color);
  color:var(--primary_font-color);
  width:250px;
  margin-top:3px;
}

input.project_controls_button {
  text-align:center;
  font-family: "Economica", sans-serif;
  font-weight:400;
  font-style: normal;
  font-size:18px;
  letter-spacing: .01rem;
  border:none;
  border-radius:3px;
  background-color: var(--dark_tab-color);
  color:var(--primary_font-color);
  margin-top:10px;
  padding:7px;
  float:right;
  cursor:pointer;
}

input.project_controls_button.remove{
  margin-left:62px;

}

div#create_project_panel {
  width:250px;
  justify-self:center;
  background-color:var(--background-color);
  margin:0px;
  border:2px solid var(--border-color);
  border-radius:10px;
  padding:15px;


}

div#create_project {
  text-align:center;
  align-self:center;
  justify-self:center;
  margin-bottom:10px;
  padding:10px;

}

input.project_controls_button.create_project{
  justify-self:center;
  padding:5px;
  width:100px;
  margin:0px;
  margin-top:5px;
 }

div#user_account_create_project_container{
  margin:auto; 
  width:300px; 
  display:grid; 
  grid-template-rows: 60px 1fr;
}

.lair_layout {
  display: flex;
  flex-wrap:wrap;
  gap: 16px;
  box-sizing: border-box;
  width: 80%;
  padding: 10px;
}

.lair_controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.lair_controls button {
  background: var(--dark_tab-color);
  color: var(--primary_font-color);
  border: 1px solid var(--border-color);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.lair_content {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.lair_main_viewer {
  width: 300px;
  height: 400px;
  display: grid;
  box-sizing: border-box;
  grid-template-rows: 300px 75px;
  border: 1px solid var(--border-color);
  padding: 10px;
  border-radius: 8px;
  background-color: var(--background-color);
}

#main_preview_image {
  max-width: 100%;
  max-height: 100%;
  justify-self: center;
  border-radius: 7px;
  align-self: center;
}

#main_preview_info {
  margin-top: 10px;
  height: 75px;
  font-size: 14px;
  color: var(--secondary_font-color);
  text-align: center;
}

.lair_thumbnails {
  display: flex;
  justify-content: center;
  align-content: flex-start;
  gap: 10px;
}

.thumbnail_container {
  display:grid;
  grid-template-rows: 200px 25px;
  width:175px;
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
  border-radius: 6px;
  gap:5px;
  align-items: center;
  justify-content: center;
  padding:15px;

}

.thumbnail_container:hover {
  box-shadow: 0 0 10px var(--profile-color);
}

img.thumbnail_img {
  max-height:200px;
  width:100%;
  border-radius: 4px;
  object-fit: contain;
}


.layout_list {
  flex-direction: column;
  align-items: flex-start;
}

.layout_grid {
  flex-direction: row;
}


/* USER SETTINGS CSS */




 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  div.user_profile_content_container{
    width:300px;
  }

  h1.monster_name {
    font-size: 26px;
  }

  div#user_profile_content_container{
    width:300px;
  }

  div#user_profile_container_top {
    display:none
  }

  div#user_profile_panel {
    grid-template-rows: 100px 45px 1fr !important;
  }

  div.user_account_tab {
    height:75px;
    padding:10px;
  }

  div#user_profile_tab_panel{
    grid-template-rows: 100px 1fr !important;
  }

  div#bite_container {
    gap:5px;
  }

  div.bite_image_container {
    width: 95px;
    height: 95px;
  }

  div.project_header{
    display:none;
  }

  div.project_container {
    margin-bottom:5px;
  }

  div.project_header_mobile{
    display:grid; 
    grid-template-columns: 40px 1fr 25px;
    align-items:center;
    justify-items: start;
    gap:10px;
  }
    
  div.project_icon_container{
    width:40px;
    height:40px;
  }

  h4.project_image_field{
    font-size:30px;
  }

  h1.tab_title {
    font-size:28px;
  }

  h1.project_name {
    font-size:16px;
    align-self:center;
  }

  h3.monster_value{
    font-size:16px;
  }

  object.tab_icon{
    width:75%
  }

  div.tab_icon_container {
    text-align:center; 
  }

  div.project_controls_panel {
    width:165px;
  }

  input.project_controls_text{
    width:160px;
  }

  div#user_account_create_project_container{
    width: 200px; 
  }

  div#create_project_panel{
    width:auto;
  }

  #user_profile_container_bottom {
    padding-top:10px;
    padding:10px;
  }

  object.project_thumbnail.user_account {
    align-self:center;
    justify-self:center;
    width:35px;
  }

  img.project_icon.user_account {
    max-width:40px;
    max-height: 40px;
   
  }

}