html,
body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #aaaaab;
}

.canvas {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#Fps {
    position: absolute;
    left: 10px;
    top: 40px;
    background-color: transparent;
    color: #720000;
    display: none;
}

#Pause {
    position: absolute;
    left: 5px;
    bottom: 5px;
    background-color: transparent;
    color: white;
    display: none;
    opacity: 0.5;
    font-family: din-round, sans-serif;
    font-size: 7em;
}

#Debug {
    position: absolute;
    left: 10px;
    top: 60px;
    background-color: transparent;
    color: #bbbbbb;
}

#Map,
#MapPosition {
    position: absolute;
    right: 2%;
    bottom: 2%;
    width: 15%;
    background-color: transparent;
}

#Map {
    z-index: 10;
}

#MapPosition {
    z-index: 11;
}

#GrosOverlay {
    position: absolute;
    background: rgb(2, 0, 36);
    background: linear-gradient(346deg, rgba(2, 0, 36, 1) 20%, rgba(9, 71, 121, 1) 43%, rgba(87, 177, 195, 1) 91%);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    overflow: hidden;
}

#FreightAndFurious {
    position: absolute;
    top: 10%;
    left: 0%;
    width: 50%;
    height: 90%;
    text-align: center;

    transform: translate(50%, -50%);
    text-transform: uppercase;
    font-family: verdana;
    font-size: 12em;
    font-weight: 700;
    color: #f5f5f5;
    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
        1px 18px 6px rgba(16, 16, 16, 0.4),
        1px 22px 10px rgba(16, 16, 16, 0.2),
        1px 25px 35px rgba(16, 16, 16, 0.2),
        1px 30px 60px rgba(16, 16, 16, 0.4);

    transform: rotate(11deg);
}

#PlayButton {
    position: absolute;
    top: 20%;
    right: -5%;
    width: 40%;
    height: 50%;

    appearance: button;
    background-color: #1899D6;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: din-round, sans-serif;
    font-size: 10em;
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 20px;
    margin: 0;
    outline: none;
    overflow: visible;
    padding: 13px 16px;
    text-align: center;
    text-transform: uppercase;
    touch-action: manipulation;
    transform: rotate(11deg);
    transition: filter .2s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}

#PlayButton:after {
    background-clip: padding-box;
    background-color: #1CB0F6;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    bottom: -4px;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

#PlayButton:main,
#PlayButton:focus {
    user-select: auto;
}

#PlayButton:hover:not(:disabled):not(:active) {
    filter: brightness(1.1);
    -webkit-filter: brightness(1.1);
}

#PlayButton:active {
    filter: brightness(0.6);
    -webkit-filter: brightness(0.6);
}

#PlayButton:disabled {
    cursor: auto;
}




#EncorePlusGrosOverlay {
    position: absolute;
    background: rgb(2, 0, 36);
    background: linear-gradient(346deg, rgba(2, 0, 36, 1) 20%, rgba(9, 71, 121, 0.425) 43%, rgba(87, 177, 195, 1) 91%);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 25;
    display: none;
    opacity: 0;
    overflow: hidden;
}


#DeliverySuccess {
    position: relative;
    top: 20%;
    right: 0%;
    width: 100%;
    height: 10%;

    transform: translate(50%, -50%);
    text-transform: uppercase;
    font-family: verdana;
    font-size: 12em;
    font-weight: 700;
    color: #f5f5f5;
    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
        1px 18px 6px rgba(16, 16, 16, 0.4),
        1px 22px 10px rgba(16, 16, 16, 0.2),
        1px 25px 35px rgba(16, 16, 16, 0.2),
        1px 30px 60px rgba(16, 16, 16, 0.4);

    transform: rotate(11deg);
}

#Damage {
    position: absolute;
    right: 10%;
    top: 10%;
    height: 20%;

    font-family: din-round, sans-serif;
    font-size: 5em;
    font-weight: 700;
    letter-spacing: .8px;
    white-space: nowrap;
    color: #FFFFFF;
    text-align: right;

    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191;

    transform: rotate(11deg);
}

#Score {
    position: absolute;
    right: 10%;
    top: 20%;
    height: 20%;

    font-family: din-round, sans-serif;
    font-size: 5em;
    font-weight: 700;
    letter-spacing: .8px;
    white-space: nowrap;
    color: #FFFFFF;
    text-align: right;

    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191;

    transform: rotate(11deg);
}

#ReplayButton {
    position: absolute;
    top: 40%;
    right: -5%;
    width: 30%;
    height: 40%;

    appearance: button;
    background-color: #1899D6;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: din-round, sans-serif;
    font-size: 5em;
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 20px;
    margin: 0;
    outline: none;
    overflow: visible;
    padding: 13px 16px;
    text-align: center;
    text-transform: uppercase;
    touch-action: manipulation;
    transform: rotate(11deg);
    transition: filter .2s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}

#ReplayButton:after {
    background-clip: padding-box;
    background-color: #1CB0F6;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    bottom: -4px;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

#ReplayButton:main,
#ReplayButton:focus {
    user-select: auto;
}

#ReplayButton:hover:not(:disabled):not(:active) {
    filter: brightness(1.1);
    -webkit-filter: brightness(1.1);
}

#ReplayButton:active {
    filter: brightness(0.6);
    -webkit-filter: brightness(0.6);
}

#ReplayButton:disabled {
    cursor: auto;
}