#monster_settings{
    background-color: var(--dark_tab-color);
}

div.monster_profile.card{
    display:grid;
    grid-template-columns: 180px 400px;
    grid-template-rows: none;
    gap:25px;
    width:580px;
    height:210px;
    background-color:var(--background-color);
    border-radius:10px;
    padding:40px;
    margin:auto;
}

div.profile_image.card.frame{
    width:180px;
    height:180px;
    background-color: var(--border-color);
    border-radius: 50%;
    border: 2px solid var(--border-color);
    box-shadow: 0px 0px 25px 10px var(--profile-color);
   
}

div.monster_info.column{
    display:grid;
    gap:7px;
    grid-template-rows: 55px 3px repeat(2, 30px) 45px;
}

img.profile_image.card{
    width:100%
}

img.select_profile{
  width:100%;
  height:100%
}

div.line_separator.user_settings{
    background-color: var(--profile-color);
    height:3px;
    width:90%
}

.settings_container {
  display: grid;
  grid-template-rows: 50px 1fr;
  gap: 20px;
}

h1.monster_info.name{
    font-family: "Mouse Memoirs";
    color: var(--profile-color);
    font-size: 48px;
    font-weight: 400;
    letter-spacing: .01px;
    line-height:0px;
}

h3.monster_info.field{
    font-family: "Economica", sans-serif;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: .01rem;
    color: var(--border-color);
    line-height:0px;
}

div.monster_info.row.info_field{
    display:flex;
    gap:6px;
    align-items:center;

}

div.monster_info.row.power.container{
    background-color: var(--profile-color);
    display: flex;
    align-items: center;
    border-radius: 7px;
    padding: 5px;
    height:25px;

}

h3.monster_info.field.light{
    color: var(--border-color);
}

h3.monster_info.field.dark{
    color: var(--profile-color);
}

h3.monster_info.field.power{
    color: var(--background-color);
}

div.select_monster_profile.container{
    display:flex;
    flex-direction: column;
    justify-content: center;
    width:600px;
    margin:auto;
    margin-top:50px;
    background-color: var(--dark_tab-color);
    border: 2px solid var(--primary_font-color);
    border-radius:10px;

}

div.select_profile_frame.user_settings.selected{
    border-color:white;
}

div.select_monster_profile.container.closed{
    display:none;
}

div.preferences.container{
  display:flex;
  flex-direction:row;
}

div.preference.row{
  display:flex;
  flex-direction: column;
  gap:10px;
  width:100%;
}

.selection_container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;

}

.settings_selection {
  display:grid;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background-color: var(--dark_tab-color);
  width: 100%;
  padding: 6px;
  box-sizing: border-box;
  cursor:pointer;
}

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

.settings_change_container {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background-color: var(--dark_tab-color);
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;
}

.entry_row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

.button_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
}

.bar_header {
  font-family: "Economica", sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: .01rem;
  color: var(--primary_font-color);
  margin: 0;
  justify-self: flex-end;

}

.bar_input {
  height: 100%;
  width: 100%;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-sizing: border-box;
  padding:8px;
  color: var(--primary_font-color);

}

.bar_input::placeholder {
  font-family: "Economica", sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: .01rem;
  color: var(--primary_font-color);
  padding:5px;
}

.bar_input:focus {
    outline: none;
    background-color: var(--background-color);
}

/* Webkit browsers (Chrome, Safari, Edge) */
.bar_input:-webkit-autofill,
.bar_input:-webkit-autofill:hover,
.bar_input:-webkit-autofill:focus,
.bar_input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--background-color) inset !important;
    -webkit-text-fill-color: var(--primary_font-color) !important;
    background-color: var(--background-color) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Firefox */
.bar_input:-moz-autofill {
    background-color: var(--background-color) !important;
    color: var(--primary_font-color) !important;
    box-shadow: none !important;
}

/* Additional fallback */
.bar_input[autocomplete]:focus {
    background-color: var(--background-color) !important;
}

.select-input {
  background-color: var(--profile-color);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  
  box-sizing: border-box;
  font-family: "Economica", sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .01rem;
  color: var(--background-color);

}

select,
::picker(select) {
  appearance: base-select;
}

select {
  transition: 0.4s;
}

select::picker-icon {
  color: var(--background-color);
  transition: 0.4s rotate;
}

select:open::picker-icon {
  rotate: 180deg;
}

::picker(select) {
  border: none;
  background-color: rgba(0,0,0,0);
}

option {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  
  box-sizing: border-box;
  font-family: "Economica", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .01rem;
  color: var(--primary_font-color);
  margin: 0;
  align-self: center;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  padding: 10px;
  transition: 0.2s;
}

option:first-of-type {
  border-radius: 10px 10px 0 0;
}

option:last-of-type {
  border-radius: 0 0 10px 10px;
}

option:not(option:last-of-type) {
  border-bottom: none;
}

option::checkmark {
  content: none;
}

.bar_button {
  height: 100%;
  padding: 10px;
  width: 100%;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-family: "Economica", sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .01rem;
  color: var(--primary_font-color);
  margin: 20px;
  align-self: center;
  cursor:pointer;
}

.preferred_platforms {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
}

.platform_title {
  font-family: "Economica", sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: .01rem;
  color: var(--primary_font-color);
  margin: 0;
  align-self: center;
  cursor:pointer;
  white-space: nowrap;
}

.list-container {
  width: 100%;
}

.info_copy.user_settings{
  font-size:20px;
  width:95%;
  margin-left:10px;
  color: var(--primary_font-color);
}

#selected-platforms{
  background-color: var(--background-color);
  width:35%;
  min-height: 100px;
  border: 2px solid var(--primary_font-color);
  border-radius:7px;
  padding:10px;
}

.selected-box {
  display: flex;
  flex-wrap: wrap;
  row-gap: 5px;
  column-gap: 5px;
}

.platform-chip {
  font-family: "Economica", sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .01rem;
  color: var(--background-color);
  border: 1px solid var(--dark_tab-color);
  background-color: var(--profile-color);
  border-radius: 6px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  height:17px;
}

.remove-btn {
  background: none;
  border: none;
  color: var(--dark_tab-color);
  font-size: 20px;
  margin-left: 5px;
  padding: 0;
  cursor: pointer;
}

.preview_profile_frame {
  background-color: var(--background_color, var(--background-color));
  border: 1px solid var(--border-color, var(--border-color));
  width: 100%;
  height: 100%;
  border-radius: 8px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.bigger_profile {
  box-sizing: border-box;
  width: 75%;
  aspect-ratio: 1/1;
  align-self: center;
}

.preview_profile {
  width: 100%;
  height: 100%;
}

.preview_monster_info {
  
  margin-top: 40px;
}

h3.preview_profile_text {
  color: var(--primary_font_color, var(--primary_font-color));
  font-family: "Economica", sans-serif;
  font-weight:600;
  font-size:36px;
  letter-spacing: .01rem;
  margin:8px;
}

h4.preview_profile_text {
  font-family: "Economica", sans-serif;
  font-weight:400;
  font-size:26px;
  letter-spacing: .01rem;
  margin:13px 8px 8px 8px;
  color: var(--secondary_font_color, var(--secondary_font-color));
}

.preview_monster_info span {
  display: flex;
  align-items: center;
}

.span_text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}


h2.section_header{
  font-family: "Mouse Memoirs";
    font-weight: 400;
    font-size: 36px;
    letter-spacing: .01rem;
    color: var(--profile-color);
    line-height:0px;
    margin:0px;
    padding:10px;

}

div.account_settings.card{
  gap: 25px;
  width: 50%;
  height: 200px;
  background-color: var(--background-color);
  border-radius: 10px;
  padding: 10px;
  margin: auto;
}

div.change_name.account.container{
  display: flex;
  flex-direction: column;
  gap:10px;
  justify-content: center;
  margin: auto;
  margin-top: 50px;
  background-color: var(--dark_tab-color);
  border: 2px solid var(--primary_font-color);
  border-radius: 10px;
  padding:20px;
  padding-top:5px;
  width:50%;
}

div.change_name.account.container.closed{
  display:none;
}

div.menu.close.container{
    font-family: "Economica", sans-serif;
    font-weight: 600;
    font-size: 26px;
    letter-spacing: .01rem;
    color: var(--primary_font-color);
    border: 1px solid var(--dark_tab-color);
    border-radius: 7px;
    width:100%;
    cursor:pointer;

    display: flex;           
    justify-content: center; 
    align-items: center;     
}

div.menu.close.container:hover{
  border: 1px solid var(--primary_font-color);
}

@media only screen and (max-width: 600px) {

  div.change_name.account.container{
    margin-top:10px;
    grid-template-rows: 1fr 1fr;
    width:80%;
  }

  div.entry_row{
    display:grid;
    grid-template-rows: 16px 1fr;
    grid-template-columns: none;
    gap:5px;    

  }

  .bar_header{
    justify-self: flex-start;
    font-size:14px;
  }

  h2.settings_selection_header{
    font-size:13px;
  }

  div.monster_info.column{
    grid-template-rows: 25px 2px repeat(2,15px) 45px;
  }

  div.monster_profile.card{
    grid-template-rows: 100px 1fr;
    grid-template-columns: none;
    width:200px;
    height:100%;
    padding:10px;
  }

  div.profile_image.card.frame{
    width:100px;
    height:100px;
    margin:auto;

  }

  div.settings_change_container{
    padding:20px;
  }

  h3.monster_info.field{
    font-size:16px;
  }

  h3.monster_info.field.power{
    line-height:16px;
  }

  h1.monster_info.name{
    font-size:20px;
  } 

  div.monster_profile.columns{
    margin:auto;
  }

  div.select_profile_frame.user_settings{
    width:60px;
    height:60px;
    border:2px solid var(--primary_font-color);;
  }

  div.select_monster_profile.container{
    width:250px;
    margin-top:20px;
  }

  div#select_profile_panel{
    gap:10px;
  }

  img#user_profile_frame{
    width:150px;
    height:150px;
  }

  .bar_button {
    font-size:14px;
  }

  .settings_selection{
    border-radius:5px;
  }

  div.selection_container{
    gap:5px;
  }

  object.project_control_icon.edit{
    width:20px;

  }


  .project_control_icon.edit.monster_profile svg{
    pointer-events:none; 

  }

  div.account_settings.card{
    width:90%;
  }

  h2.section_header{
    font-size:26px;
    line-height:25px;
  }

  p.info_copy.user_settings{
    font-size:14px;
  }

  .select-input{
    font-size:14px;
  }

  #selected-platforms{
    width:90%
  }

  .platform-chip{
    font-size:12px;
    padding: 3px 6px;
  }

  option{
    font-size:12px;
  }

}