@import "variables_css.css";

body {
    margin: 0;
    padding: 0;
    background: var(--body__background);
    color: var(--black__font);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header {
    margin-top: 50px;
    width: 510px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.name {
    font-family: var(--main_font);
    font-size: 83px;
    font-weight: bold;
    line-height: 0.8;
}

.score {
    font-family: var(--main_font);
    background: var(--game__field);
    padding: 15px 25px;
    font-size: 20px;
    line-height: 20px;
    font-weight: bold;
    border-radius: 3px;
    color: var(--white_color);
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.new_game {
    background: var(--new-game__background);
    font-family: var(--main_font);
    font-weight: bold;
    font-size: 20px;
    border-radius: 3px;
    padding: 0 20px;
    color: var(--white_color);
    height: 50px;
    text-align: center;
    margin-top: 10px;
}

.field {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;

    background: var(--game__field);
    border-radius: 6px;
    width: 500px;
    height: 500px;
    margin-top: 50px;
    padding: 5px;
}

.title_wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 350px;
}

.rules {
    font-size: 16px;
    margin-top: 29px;
    width: 330px;
    font-family: var(--main_font);
}

.win_wrapper {
    background: var(--game__field);
    border-radius: 6px;
    width: 500px;
    height: 500px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.win {
    font-family: var(--main_font);
    font-size: 65px;
    font-weight: bold;
    color: var(--white_color);
    text-align: center;
}

@keyframes fade-in {
    0% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.cell_2, .cell_4, .cell_8, .cell_16 {
    animation: fade-in 0.2s linear;
}

.cell {
    width: 107px;
    height: 107px;
    border-radius: 3px;
    background: var(--background_empty);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    font-weight: 900;
    font-family: var(--main_font);
}

.cell_2 {
    background: var(--background_2);
}

.cell_4 {
    background: var(--background_4);
}

.cell_8 {
    background: var(--background_8);
    color: var(--white_color);
}

.cell_16 {
    background: var(--background_16);
    color: var(--white_color);
}

.cell_32 {
    background: var(--background_32);
    color: var(--white_color);
}

.cell_64 {
    background: var(--background_64);
    color: var(--white_color);
}

.cell_128 {
    background: var(--background_128);
    color: var(--white_color);
}

.cell_256 {
    background: var(--background_256);
    color: var(--white_color);
}

.cell_512 {
    background: var(--background_512);
    color: var(--white_color);
}

.cell_1024 {
    background: var(--background_1024);
    color: var(--white_color);
}

.cell_2048 {
    background: var(--background_2048);
    color: var(--white_color);
}