@font-face {
    font-family: 'Genshin';
    src: url('../font/zhcn.ttf');
}

html, body, button {
    font-family: 'Genshin', sans-serif;
    cursor: url("../img/UI/cursor.cur"), default;
    cursor: url("../img/UI/cursor.cur"), pointer;
}

body { 
    background-image: url("../img/Background.jpg");
    background-size: cover;
    background-position: center;
}

#main {
    min-width: 1400px;
    padding: 10px;
}

#credits-link {
    font-size: 24px;
    font-weight: normal;
    color: #e4e4e4;
    margin-top: 0px;
}

.footer-button {
    font-size: 18px;
    
    border-radius: 10px;

    height: 100px;
    width: 100px;

    background-color: #50586b;
    color: white;
}

.footer-button:hover {
    background-color: #485365;
}



#main-grid{
    display: grid;
    grid-template-columns: 170px repeat(6, 170px);
    gap: 4px;
}

#out-grid {
    display:flex;
    align-items: flex-start;
    gap: 30px;
}

#favorite-team {
    display: grid;
    grid-template-columns: repeat(4, 170px);
    gap: 4px;
}

#special-choices{
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, 170px);
    gap: 4px;
}

#special-choices .cell {
    margin-bottom: 10px;
}

.special-cell-title {
    height: 40px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-weight: normal;
    font-size: 20px;

    margin-bottom: 10px;

}

.header-img {
    max-width: 128px;
}

.row-header-img {
    max-width: 128px;
    min-height: 128px;
}






.cell {
    min-height: 160px;
    min-width: 160px;
    border: 3px solid #aca3e6;

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

    border-radius: 10px;

    background-color: #d9d5f3;
}

#out-grid .cell {
    border: 3px solid #4c65aa;
}

.cell-img {
    max-width: 150px;
    max-height: 150px;
}

.selection-cell:hover {
    background-color: #eee;
}

.first-cell {
    background-color: #50586b;
    color: white;
    
    font-size: 24px;
    text-align: center;

}

.modal {
    position: fixed;
    inset: 0;

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

    background-color: rgba(0, 0, 0, 0.6);
}

.modal.hidden {
    display: none;
}

#modal-title {
    text-align: center;
}

.modal-content {
    position: relative;

    width: 810px;
    min-height: 300px;

    padding: 30px;

    background-color: white;
    border-radius: 20px;
}





.close-button {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 40px;
    height:40px;

    padding: 6px;

    border: none;
    border-radius: 50%;
    background: #cacaca;
}
.close-button:hover {
    background-color: #a5a5a5;
}
.close-button img{
    width: 100%;
    height: 100%;
}

#character-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;

    max-height: 500px;
    overflow-y: auto;
}

.character-option {
    padding: 15px;

    border: 3px solid #ccc;
    border-radius: 5px;

    text-align: center;
}

.option-img {
    max-width: 150px;
    max-height: 150px;
    
}

.character-option:hover {
    background-color: #eee;
}



.pyro-cell{
    background-color: #f59f7d;
}
.pyro-cell:hover{
    background-color: #fa895c;
}
.selected-cell.pyro-cell{
    border: 5px outset #ed4f45 !important; 
}

.hydro-cell{
    background-color: #73a9ff;
}
.hydro-cell:hover{
    background-color: #4e8ef5;
}
.selected-cell.hydro-cell{
    border: 5px outset #4088ff !important;
}

.dendro-cell{
    background-color: #abeb8f;
}
.dendro-cell:hover{
    background-color: #8dd46e;
}
.selected-cell.dendro-cell{
    border: 5px outset #7bb42d !important;
}

.electro-cell{
    background-color: #bd9adb;
}
.electro-cell:hover{
    background-color: #ad7ed6;
}
.selected-cell.electro-cell{
    border: 5px outset #d376f0 !important;
}

.anemo-cell{
    background-color: #94ebc2;
}
.anemo-cell:hover{
    background-color: #67dba5;
}
.selected-cell.anemo-cell{
    border: 5px outset #33ccb3 !important;
}

.cryo-cell{
    background-color: #abeff5;
}
.cryo-cell:hover{
    background-color: #94eaf2;
}
.selected-cell.cryo-cell{
    border: 5px outset #98c8e8 !important;
}

.geo-cell{
    background-color: #f5d48e;
}
.geo-cell:hover{
    background-color: #e6c57f;
}
.selected-cell.geo-cell{
    border: 5px outset #cfa726 !important;
}

.favorite-cell{
    background: linear-gradient(#fac5c9, #b7e8ff);
}
.favorite-cell:hover{
    background: linear-gradient(#e2a7d2, #a5e8fd);
}
.selected-cell.favorite-cell{
    background: linear-gradient(#fac5c9, #b7e8ff) padding-box,
                linear-gradient(to bottom right, #f986d1, #54a3f8) border-box;
    border-radius: 10px;
    border: 5px solid transparent;
}
.selected-cell.favorite-cell:hover{
    background: linear-gradient(#e2a7d2, #a5e8fd) padding-box,
                linear-gradient(to bottom right, #f986d1, #54a3f8) border-box;
    
}

.nod-krai-cell {
    background-color: #a299b8;
}
.nod-krai-cell:hover {
    background-color: #8e86ad;
}
.selected-cell.nod-krai-cell {
    border: 5px outset #d8b2fa !important; 
}

.fatui-cell {
    background-color: #cf4d3c;
}
.fatui-cell:hover {
    background-color: #c2493a;
}
.selected-cell.fatui-cell {
    border: 5px outset #5c1912 !important;
}

.region-cell {
    background-color: #9b7b60;
}
.region-cell:hover {
    background-color: #8f7158;
}
.selected-cell.region-cell {
    border: 5px outset #7c5b40 !important;
}

.archon-cell {
    background-color: #ffe367;
}
.archon-cell:hover {
    background-color: rgb(250, 211, 85);
}
.selected-cell.archon-cell {
    border: 5px outset #948338 !important;
}

.skin-cell {
    background-color: #1f4980;
}
.skin-cell:hover {
    background-color: #0c3872;
}
.selected-cell.skin-cell {
    border: 5px outset #1f416e !important;
}

.cell-1{
    background-color: #5cb3fa;
}
.cell-1:hover{
    background-color: #3e9df5;
}
.selected-cell.cell-1{
    border: 5px outset #98befc !important;
    background-color: #bad8f0;
}
.cell-2{
    background-color: #fc564a;
}
.cell-2:hover{
    background-color: #f54434;
}
.selected-cell.cell-2{
    border: 5px outset #f18b83 !important;
    background-color: #fab2ad;
}
.cell-3{
    background-color: #3ac579;
}
.cell-3:hover{
    background-color: #35b46e;
}
.selected-cell.cell-3{
    border: 5px outset #508d5f !important;
    background-color: #9decae;
}
.cell-4{
    background-color: #ffcb20;
}
.cell-4:hover{
    background-color: #f3b90a;
}
.selected-cell.cell-4{
    border: 5px outset #ebca6a !important;
    background-color: #fff89c;
}

.pyro-text {
    color: #fa802e;
}

.hydro-text{
    color: #67a1fd;
}

.dendro-text{
    color: #7bb42d;
}

.electro-text {
    color: #9e2dc0;
}

.anemo-text {
    color: #33ccb3;
}

.cryo-text {
    color: #98c8e8;
}

.geo-text {
    color: #cfa726;
}

.team-text {
    color: #eb9089;
    font-size: 24px;
}

.nod-krai-text {
    color: #e8cefe;
}

.region-text {
    color: #b47e4c;
}

.archon-text {
    color: #ffc60c;
}

.fatui-text {
    color: #680202;
}

.skin-text {
    color: #024296;
}