@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@700&display=swap');

body {
    margin: 0;
    height: 100svh;
    font-family: 'Oxygen', sans-serif;
    background: white;

    --pink: #DA0C81;

    --classic: #FC2947;
    --medium: #F2BE22;
    --easy: #748E63;
}

.game {
    width: 100%;
    height: 100%;

    display: flex;
    gap: 10px;

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

    flex-direction: column;
}

.game .score {
    font-size: 2rem;
    text-align: center;
    color: var(--pink);
    margin: 0;
    user-select: none;
}

canvas {
    position: relative;

    width: 600px;
    max-width: min(calc(100svw - 50px), calc(100svh - 50px));

    height: 600px;
    max-height: min(calc(100svw - 50px), calc(100svh - 50px));

    border-radius: 8px;
    border: 3px solid #61677A;
}

.difficulty {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    width: 600px;
    max-width: min(calc(100svw - 20px), calc(100svh - 20px));
    height: 40px;
}

.difficulty div {
    position: relative;
    height: inherit;

    flex-basis: 150px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.1rem;
    color: white;
    user-select: none;
    cursor: pointer;

    border-radius: 8px;

    transition: box-shadow 200ms, opacity 200ms;
    --outlineColor: rgb(0, 0, 0, .3);
    box-shadow: 0 0 0 0 var(--outlineColor) inset;
}

.difficulty .classic {
    background-color: var(--classic);
}

.difficulty .medium {
    background-color: var(--medium);
}

.difficulty .easy {
    background-color: var(--easy);
}

.difficulty .selected {
    box-shadow: 0 0 0 4px var(--outlineColor) inset;
}

.difficulty.done div:not(.selected) {
    opacity: .3;
}

.difficulty div span {
    opacity: .7;
    position: absolute;
    right: 10px;
}