@font-face {
    font-family: 'Graphik';
    src: url('./fonts/gkr.woff2') format('woff2'),
        url('./fonts/gkr.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

*,
*::after,
*::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    overflow-y: hidden;
    height: 100vh;
    position: relative;
    font-family: 'Graphik', sans-serif;
    background-color: #DDE6E8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold !important;
}

h1 {
    font-size: 2em !important;
}

.wrapper {
    overflow-y: hidden;
    height: 100vh;
}

.illustration {
    height: 100vh;
}

.game-win-overlay {
    position: fixed;
    z-index: 50;
    width: 100vw;
    height: 70vh;
    top: 0;
    left: 0;
    right: 0;
    display: none;
}

body.win .game-win-overlay {
    display: block;
}

.game-win-overlay>div {
    background-color: white;
    width: 40vw;
    border: 2px solid #041C2C;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    padding: 25px;
    height: 100%;
    margin: 50px auto;
}

@media screen and (max-width: 800px) {
    .game-win-overlay {
        width: 100vw;
        left: 0;
        transform: translate(0, 0);
    }

    .game-win-overlay>div {
        margin: 25px auto;
        width: 85vw;
    }
}

.game-win-overlay button {
    align-items: center;
    background: #041C2C;
    border-radius: 10px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    color: white;
    display: flex;
    flex-shrink: 0;
    height: 56px;
    margin-top: 20px;
    outline: none;
    justify-content: center;
    padding: 10px 25px;
    font-family: 'Graphik', sans-serif;
}

.game-win-overlay video {
    max-height: 40vh;
}

@media screen and (max-width: 800px) {
    .game-win-overlay video {
        max-height: 80vh;
    }
    
}

#object1[data-state='active'] path.filler {
    fill: rgba(255, 193, 21, 0.7);
}

/* #object1[data-state='active'] path.liner {
    fill: rgb(255, 187, 0);
}

#object1[data-state='active'] path.rays {
    fill: rgb(255, 187, 0);
} */

/* #object2[data-state='active'] path.liner {
    fill: rgb(105, 161, 177);
} */

#object2[data-state='active'] path.filler {
    fill: rgb(174, 227, 241, 0.5);
}

#object3[data-state='active'] path.neck {
    fill: #838e0ece;
}

#object3[data-state='active'] path.wing1 {
    fill: #63790acf;
}

#object3[data-state='active'] path.wing2 {
    fill: #436900d0;
}

#object3[data-state='active'] path.beak {
    fill: #EB8E53;
}

#object4[data-state='active'] path.filler1 {
    fill: rgba(255, 88, 32, 0.8);
}

#object4[data-state='active'] path.filler2 {
    fill: rgba(247, 74, 16, 0.8);
}

.st0 {
    fill: #ffffff;
}

.st1 {
    fill: #ffffff;
}

.st2 {
    fill: #F5F2E4;
}

.st3 {
    fill: #DEDAC2;
}

.st4 {
    fill: #F8C7DE;
}

.st5 {
    fill: #303030;
}

.st6 {
    fill: #010202;
}

.st7 {
    fill: #DEDEDE;
}

.st8 {
    fill: #9D3C25;
}

.st9 {
    fill: #FBD6CD;
}

.st10 {
    fill: #FFFDFE;
}

.st11 {
    fill: #FDF9E5;
}

.st12 {
    fill: #BABABA;
}

.st13 {
    fill: #EBEBEB;
}

.st14 {
    fill: #F6BBD6;
}

.st15 {
    fill: #DBDBDB;
}

.st16 {
    fill: #E3E3E3;
}

.st17 {
    fill: #A6A6A6;
}

.st18 {
    fill: #474747;
}

.st19 {
    fill: #141414;
}

.st20 {
    fill: #642F2C;
}

.st21 {
    fill: #CCCCCC;
}

.st22 {
    fill: #4F4E48;
}

.st23 {
    fill: #3F3E39;
}

.st24 {
    fill: #0000ff;
}

.st25 {
    display: inline;
}

.st26 {
    fill: #2E2A73;
}

.st27 {
    fill: #009739;
}

.st28 {
    fill: #7ABC5F;
}

.st29 {
    fill: #DDDDDD;
}

.st30 {
    fill: #9D4794;
}

.st31 {
    display: inline;
    fill: #F7AF88;
}

.st32 {
    display: inline;
    fill: #A7795F;
}

.st33 {
    display: inline;
    fill: #FFF5A2;
}

.st34 {
    display: inline;
    fill: #A0A0A0;
}

.st35 {
    display: inline;
    fill: #969696;
}

.st40 {
    fill: #ADD8E6;
}