/*@import url('https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Asap:wght@400;700&display=swap');

body {
    margin: 80px 0;
    width: 100%;
    height: 100vh;
    /*background: black;*/
    background: linear-gradient(217deg, rgba(151, 130, 255,.8), rgba(151, 130, 255,0) 70.71%),
                linear-gradient(127deg, rgba(130, 165, 255,.8), rgba(130, 165, 255,0) 70.71%),
                linear-gradient(336deg, rgba(255, 253, 130,.8), rgba(255, 253, 130,0) 70.71%);
}

* {
    /*color: #222;*/
    color: white;
    /*font-family: 'Playfair Display', serif;*/
    font-family: 'Asap', sans-serif;
    font-size: 26px;
    /*font-style: italic;*/
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -0.01em;
    /*text-transform: uppercase;*/
}

p {
    margin: 0;
}

.identity {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
}

.start-overlay {
    background: #191436;
    text-align: center;
    cursor: pointer;
    transform: translate(0, -100vh);
    transition: all 0.15s;
}


.lost-overlay {
    /*display: none;*/
    /*position: fixed;*/
    
    background: #ce1a1a;

    text-align: center;
    padding: 80px 0;
    cursor: pointer;
}


.lost-overlay * {
    color: white;
}

.message-overlay {
    /*display: none;*/
    position: fixed;
    background: #191436;
    text-align: center;
    padding: 80px 0;
}

.start-overlay,
.lost-overlay,
.message-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 80px 10px;
    transform: translate(0, -100vh);
    transition: all 0.3s;
}

.start-overlay.active,
.lost-overlay.active,
.message-overlay.active {
    transform: translate(0);
}

.start-overlay *,
.lost-overlay *,
.message-overlay * {
    font-size: 100px;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

@media screen and (max-width: 800px) {
    .start-overlay *,
    .lost-overlay *,
    .message-overlay * {
        font-size: 50px;
    }
}

.start-overlay b,
.lost-overlay b,
.message-overlay b {
    font-weight: 600;
}

.cols {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}


main {
    width: fit-content;
    margin: 0 auto;
    padding: 20px;
    border-radius: 4px;
    transition: all 0.15s;
}

main.level-correct {
    background: rgba(26, 206, 101, 0.8);
}

main.level-incorrect {
    background: rgba(206, 26, 26, 0.8);
}

.game {
    display: flex;
}

.game div {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
    max-width: 33%;
}
.game canvas {
    background: white;
    border-radius: 4px;
    max-width: 100%;
}
.game p {
    text-align: center;
}

.game div:last-child {
    margin-right: 0;
}

.remaining-tries canvas {
    /*background: #ce1a1a;*/
    /*background: #222;*/
    background: white;
    border-radius: 4px;
    /*border: solid 1px #222;*/
}

.remaining-tries-2 canvas:nth-child(1) {
    display: none;
}

.remaining-tries-1 canvas:nth-child(1),
.remaining-tries-1 canvas:nth-child(2) {
    display: none;
}

.remaining-tries-0 canvas:nth-child(1),
.remaining-tries-0 canvas:nth-child(2),
.remaining-tries-0 canvas:nth-child(3) {
    display: none;
}