@font-face {
    font-family: 'Baskervville';
    src: url(Baskervville-Regular.ttf) format('truetype');
}

:root {
    --main-color: #2b2a2ae3;
    --text-color: #fff;
    --age-color: rgb(215, 199, 172);
}

html {
    background-color: #232323;
    color: var(--text-color);
    font-family: 'Baskervville', serif;
}

#background {
    background-image: url('../image/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

input,
textarea {
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    background-color: #232323;
    border: none;
    width: fit-content;
    display: none;
    text-align: center;
}

.pantheon-input {
    font-size: xx-large;
}

.titan-input {
    font-size: x-large;
}

#main {
    background-color: #5b5b5bb0;
    font-family: 'Baskervville', serif;
}

#pantheon {
    font-size: xxx-large;
    text-align: center;
    display: flex;
    background: var(--main-color);
    justify-content: space-between;
}

.pantheon-name {
    align-self: center;
    margin-left: 5px;
}

#pantheon-detail {
    margin-top: 5px;
    display: grid;
    text-align: center;
    grid-template-columns: 1fr repeat(4, 2fr);
    grid-template-rows: repeat(4, 0fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-auto-flow: column;

    &>div {
        background: var(--main-color);
        padding: 10px;
    }
}

.age {
    font-size: large;
    align-content: center;
    color: var(--age-color);

    & .age-icon {
        width: 150px;
        height: 150px;
        object-fit: contain;
    }

    .naval-myth-name-label {
        color: var(--text-color);
    }
}

.power,
.wonder,
.myth {
    margin-top: 5px;
}

.god-icon {
    height: 100px;
    max-width: 250px;
    object-fit: contain;
    cursor: pointer;
}

.wonder-icon,
.power-icon,
.myth-icon,
.naval-myth-icon {
    height: 36px;
    max-width: 250px;
    object-fit: contain;
    margin-left: 10px;
    cursor: pointer;
}

.titan {
    margin-top: 10px;
    display: flex;
    margin-right: 50px;

    .titan-icon {
        height: 80px;
        object-fit: contain;
        cursor: pointer;
        max-width: 250px;
    }

    .titan-name {
        margin-left: 20px;
        font-size: xx-large;
    }
}

.pantheon-name-label,
.god-name-label,
.titan-name-label,
.power-name-label,
.wonder-name-label,
.myth-name-label,
.naval-myth-name-label {
    cursor: pointer;
}

#open-setting {
    font-size: 1.5em;
    color: white;
    cursor: pointer;
    font-weight: bold;
    padding: 5px 10px;
    background-color: #2929298a;

    &:hover {
        background-color: #57575788;
    }
}