* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.title{
    width: 100%;
    height:7.2vh;
    background-image: url("https://images.seeklogo.com/logo-png/45/2/overwatch-2-logo-png_seeklogo-452596.png");
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
}

.section_name_container{
    width:100%;
    height:3.6vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.section_name{
    font-size: 1.5vw;
}


.gallery{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    width:80%;
    height:80%;
    border: 2px solid black;
    align-content: flex-start;
    padding:1%;
}

.body{
    width:100vw;
    height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.portrait{
    width : 4vw;
    height:8vh;
    border: 2px solid black;
      max-width: 100%;
  max-height: 100%;
  cursor: pointer;

}

.portrait:hover{
    transform: scale(1.1);
}

.portrait.selected {
  border: 4px solid #bfa600;
  transform: scale(1.1);
}

.support{
    width: 80%;
    height:10%;
      display:flex;
      justify-content:center;
      align-items:center;
}

.link{
    text-decoration:none;
    font-size: 1vw;
}

.scrollable{
    overflow-y:auto;
    height:90%;
    width:100%;
      display:flex;
    flex-wrap:wrap;
    justify-content:center;
     align-content: flex-start;
       gap:0.5%;
}

.hero_popup{
    width:100%;
    height: auto;
      display:flex;
    flex-wrap:wrap;
    justify-content:center;
     align-content: flex-start;
       gap:0.5%;
}

.copy_box{
    overflow-y:hidden;
    width:100%;
    height:10%;
    display:flex;
    justify-content: center;
    align-items: center;
    gap:0.5%;
}

.copy_btn{
    width: 2.5%;
    height: 50%;
    background-image: url("https://images.icon-icons.com/2518/PNG/512/copy_icon_151431.png");
    background-size: contain;
    background-position: center;
    cursor:pointer;
    background-repeat: no-repeat;
}

.delete_btn{
    width: 2.5%;
    height: 50%;
    background-image: url("https://cdn-icons-png.flaticon.com/512/3515/3515498.png");
    background-size: contain;
    background-position: center;
    cursor:pointer;
    background-repeat: no-repeat;
}

.copy_btn:hover, .delete_btn:hover{
    transform: scale(1.1);
}

.text_box{
    width:50%;
    height: 50%;
    border: 2px solid black;
    font-size: 0.75vw;
    color:black;
}

.text_box:hover{
    transform: scale(1.025);
}

.text_box::placeholder{
    color:black;
}