body {
    overflow: hidden;
    font-family: Calibri, serif;
}

.options {
    opacity: 0.7;
    transition: opacity 0.2s;
}

.options:hover {
    opacity: 1;
}

.options > div {
    display: flex;
    align-items: center;
}

.game > .player {
    position: absolute;
    width: 16px;
    background-position: -50% -50%;
    z-index: -100;
}

.game > .player, .icon {
    aspect-ratio: 1 / 1;
    background-size: 100% 100%;
}

.icon {
    height: 35px;
}

.h16 {
    height: 16px;
}

.rock {
    background-image: url("./assets/rock.png");
}

.scissors {
    background-image: url("./assets/scissors.png");
}

.paper {
    background-image: url("./assets/paper.png");
}

.revert {
    margin-left: 7px;
    background-image: url("assets/revert.png");
    cursor: pointer;
}

.bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    opacity: 0.1;
    pointer-events: none;
    z-index: -1000;
}

.bg-element {
    width: calc(100% / 3);
    height: 100%;
}

.bg-rock {
    background: #aeaeae;
}

.bg-paper {
    background: #ffdea7;
}

.bg-scissors {
    background: #f8312f;
}

.amounts {
    opacity: 0.5;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 0.2s;
}

.amounts:hover {
    opacity: 1;
}

.amounts > div {
    display: flex;
    font-size: 30px;
    height: 100%;
}

input {
    outline: none;
}