
.resources-frame{
    display: flex;
    background-color: rgba(0, 0, 0, 0.198);
    border-radius: 15px; 
    width: 96%;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    left: 2%;
    contain: content;
}
.resources-items-container{
    display: flex;
    flex-direction: column;
    padding: 2% 0;
    border-left: 1px solid rgba(218, 165, 32, 0.413);
    border-right: 1px solid rgba(218, 165, 32, 0.413);
    border-bottom: 1px solid rgba(218, 165, 32, 0.413);
    box-sizing: border-box;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.resource-item{
    margin: 0 10px;
    color: rgb(223, 185, 88);
    display: flex;
    box-sizing: border-box;
    min-height: 1.5em;
    align-items: center;
    padding: 2px 0;
    box-sizing: border-box;
}
.resource-item:hover{
    margin: 0 10px;
    color: rgb(88, 201, 223);
    display: flex;
    box-sizing: border-box;
    background-color: rgba(240, 248, 255, 0.161);
}
.resource-link{
    padding-left: 10px;
    color: inherit;
    box-sizing: border-box;
}
.resources-placard{
    color: var(--blue-muted);
    justify-content: center;
    max-height: 1.6em;
    min-height: 1.6em;
    display: flex;
    background-color: rgba(255, 0, 0, 0.221);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    align-items: center;
    cursor: default;
  }
  .resources-placard{
    color: var(--blue-muted);
    justify-content: center;
    max-height: 1.6em;
    min-height: 1.6em;
    display: flex;
    background-color: rgb(61, 9, 9);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    align-items: center;
    cursor: default;
  }