

main{
    grid-template-columns: auto;
    /*grid-template-rows: auto auto auto auto auto;*/
    grid-auto-flow: row;
}
main > h1{
    grid-row: 1;

    position: sticky;
    top: 0px;
    z-index: 35;
    color: white;
    font-size: clamp(2.4rem, 6.5vw, 5.5rem);
    margin: 0px;
    pointer-events: none;
    text-align: center;
    text-shadow: 0px 0px 0.5rem rebeccapurple, 0px 0px 1rem rebeccapurple, 0px 0px 1.5rem rebeccapurple;
}
main > h2{
    grid-row: 2;
    text-align: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5;
    margin: 2rem 0rem 1rem 0rem;
    text-shadow: 0px 0px 0.5rem #000, 0px 0px 1rem #000;
}
main > h3{
    grid-row: 3;
    text-align: center;
    color: white;
    font-weight: normal;
    font-size: clamp(2.4rem, 6.5vw, 5rem);
    margin: 1rem 0rem 2rem 0rem;
    text-shadow: 0px 0px 0.5rem #fff675, 0px 0px 1rem #fff675, 0px 0px 1.5rem #fff675;
}
main > .table{
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, max-content));
    grid-gap: 1.1rem;
    justify-content: center;
    margin-bottom: 3.5rem;
}
main > .table > button{
    position: relative;
    height: 19rem;
    display: inline-grid;
    text-decoration: none;
    background-color: #000000a6;
    border-radius: 2rem;
    border: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s ease;
}
main > .table > button p{
    margin: 0.5rem;
}
main > .table > button > h1{
    font-family: "Times New Roman", serif;
    width: max-content;
    justify-self: end;
    align-self: end;
    color: white;
    margin: 0.5rem 1.0rem;
    z-index: 30;
    text-shadow: 0px 0px 0.25rem black, 0px 0px 0.5rem black, 0px 0px 0.25rem black, 0px 0px 0.5rem black, 0px 0px 0.25rem black, 0px 0px 0.5rem black, 0px 0px 0.25rem black, 0px 0px 0.5rem black,0px 0px 0.25rem black, 0px 0px 0.5rem black, 0px 0px 0.25rem black, 0px 0px 0.5rem black;
    transition: text-shadow 0.5s ease;
}
main > .table > button > img{
    object-fit: contain;
    position: absolute;
    transition: filter 0.25s ease;
    height: 100%;
    top: 0;
    justify-self: center;
}
main > .table > button:hover{
    transform: scale(1.1);
}
main > .table > button:hover > h1{

}
main > .table > button:hover > img{
    filter: drop-shadow(0px 0px 0.5rem #00ff1c);
}
main > .table > button.toRemoveItm{
    display: none;
}

main > .table > .tableAddItem{
    display: none;
}
main > .table > .tableAddItem.visible{
    display: inline-grid;
}
main > .table > .tableAddItem > h1{
    justify-self: center;
    align-self: center;
}

main > .table > button > .removeTbItm{
    position: absolute;
    right: 0rem;
    top: 0;
    color: red;
    font-size: 2.2rem;
    padding: 0rem 0.5rem;
    display: none;
    border-radius: 0rem 0rem 0rem 1rem;
}
main > .table > button > .removeTbItm:hover {
    background-color: #712e2ea3;
}
main > .table > button > .removeTbItm.visible{
    display: initial;
}
main > .table > button > .lockTbItm{
    position: absolute;
    left: 0rem;
    top: 0;
    /*color: red;*/
    font-size: 2.2rem;
    padding: 0rem 0.5rem;
    display: none;
    border-radius: 0rem 0rem 1rem 0rem;
}
main > .table > button > .lockTbItm:hover {
    background-color: #712e2ea3;
}
main > .table > button > .lockTbItm.visible{
    display: initial;
}
main > .table > button > .blockedItem{
    position: absolute;
    right: 0rem;
    top: 0;
    display: none;
}
main > .table > button > .blockedItem img{
    width: 50px;
    padding: 0.5rem;
    filter: drop-shadow(0px 0px 0.1rem #52408c) drop-shadow(0px 0px 0.15rem #52408c);
    transition: transform 0.2s cubic-bezier(.55,.09,.68,.53), filter 0.2s cubic-bezier(.55,.09,.68,.53);
}
main > .table > button > .blockedItem img.pulse{
    transform: scale(1.2);
    filter: drop-shadow(0px 0px 0.1rem #52408c) drop-shadow(0px 0px 0.15rem #52408c) drop-shadow(0px 0px 0.5rem #52408c) drop-shadow(0px 0px 1rem #52408c);
}
main > .table > button.toLockItm > .blockedItem{
    display: initial;
}
#text_upload{
    margin-bottom: 2rem;
}

.listPopupTemplates{
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: max-content;
    padding: 1rem;
    align-content: center;
    grid-gap: 0.25rem;
}
.listPopupTemplates > button{
    background: transparent;
    border: 0.1rem solid #646464;
    color: white;
    font-size: 1.3rem;
    padding-bottom: 0.3rem;
}
.listPopupTemplates > button:hover{
    cursor: pointer;
    border-color: white;
}

main > .expanse{
    height: 0.1rem;
    width: 100%;
}

account-modal{
    z-index: 49!important;
}