@font-face {
    font-family: 'Gilroy-Bold';
    src: url('./fonts/Gilroy-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-Regular';
    src: url('./fonts/Gilroy-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-Medium';
    src: url('./fonts/Gilroy-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    overflow: hidden;
    margin: 0;
    border: 0;
    padding: 0;
    user-select: none;
    color: white;
    /* background-image: url("./figma.png"); */
    /* background-color: rgb(12, 12, 12); */
}

.header {
    position: absolute;
    right: 2vmin;
    top: 2.963vh;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.head {
    font-family: 'Gilroy-Bold', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 2.963vh;
    line-height: 3.7037vh;
    margin-right: 1.3889vh;
    letter-spacing: 0.463vh;
    color: #FFFFFF;
}

.headline {
    font-family: 'Mr Dafoe', cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 3.2407vh;
    line-height: 4.1667vh;
    letter-spacing: 0.05em;
    color: #0099ff;
    margin-top: -2.5vh;
    margin-right: 1.6667vh;
}

.id-container {
    position: absolute;
    top: 1.5vmin;
    right: 23vmin;

    height: 4.6296vh;
    margin-top: 1.8519vh;

    display: flex;
    align-items: center;
}

#id-icon {
    color: white;
    font-size: 1.6667vh;
}

.id {
    margin-left: 1vmin;
    font-family: 'Gilroy-Regular', sans-serif;
    font-weight: 600;
    font-size: 1.2963vh;
    line-height: 1.5741vh;
    color: rgba(255, 255, 255, 0.56);
    text-align: left;
}

.id-string {
    font-family: 'Gilroy-Regular', sans-serif;
    text-align: left;
    font-weight: 700;
    font-size: 1.2963vh;
    color: #FFFFFF;
}

.Player-container {
    position: absolute;
    top: 1.5vmin;
    right: 30vmin;

    height: 4.6296vh;
    margin-top: 1.8519vh;

    display: flex;
    align-items: center;
}

#Player-icon {
    color: white;
    font-size: 1.6667vh;
}

.Player {
    margin-left: 1vmin;
    font-family: 'Gilroy-Regular', sans-serif;
    font-weight: 600;
    font-size: 1.2963vh;
    line-height: 1.5741vh;
    color: rgba(255, 255, 255, 0.56);
    text-align: left;
}

.Player-string {
    font-family: 'Gilroy-Regular', sans-serif;
    text-align: left;
    font-weight: 700;
    font-size: 1.2963vh;
    color: #FFFFFF;
}

.hud-container {
    position: absolute;

    top: 9.537vmin;
    right: 3vmin;

    width: 13.3333vmin;
    height: 9vmin;

    display: grid;
}

.hudItem {
    position: relative;
    height: 3vmin;
    width: 100%;
}

.blue {
    --color: #0099ff;
}

.red {
    --color: #0099ff;
}

.hudBorder {
    position: absolute;

    right: 0vmin;
    height: 100%;
    width: 0.2778vmin;

    background: var(--color);
    box-shadow: 0vmin 0vmin 1.2963vmin var(--color);
    border-radius: 0.463vmin;
}

.hudItem #icon {
    position: absolute;

    right: 0.9259vmin;

    width: 3vmin;
    height: 100%;

    background: radial-gradient(60% 60% at 50% 50%, #006eff28 0.01%, #0099ff 100%);
    box-shadow: 0vmin 0vmin 1.8519vmin rgba(47, 179, 255, 0.35);
    border-radius: 0.0926vmin;

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

    font-size: 1.3889vmin;
    color: white;
}

.hudItem #icon2 {
    position: absolute;

    right: 0.9259vmin;

    width: 3vmin;
    height: 100%;

    background: radial-gradient(60% 60% at 50% 50%, rgba(107, 5, 5, 0) 0.01%, #0099ff 100%);
    filter: drop-shadow(0vmin 0vmin 1.8519vmin rgba(47, 130, 255, 0.35));
    border-radius: 0.0926vmin;

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

    font-size: 1.3889vmin;
    color: white;
}

.hudItem span:nth-child(3) {
    position: absolute;

    top: 0vmin;
    right: 5vmin;

    text-align: right;
    font-family: 'Gilroy-Regular';
    font-weight: 600;
    font-size: 1.2037vmin;
    color: rgba(255, 255, 255, 0.62);
}

.hudItem span:nth-child(4) {
    width: 30vmin;
    position: absolute;

    bottom: 0vmin;
    right: 5vmin;

    text-align: right;
    font-family: 'Gilroy-Medium';
    font-weight: 700;
    font-size: 1.2963vmin;
    color: #FFFFFF;
}

.hudBottom {
    position: absolute;
    width: 15vmin;
    height: 17vmin;
    left: 2.5vmin;
    bottom: 0vmin;
}

.bottomItem {
    margin-top: 1vmin;
    position: relative;
    position: relative;
    height: 3vmin;
    width: 100%;
}

.bottomBorder {
    position: absolute;

    left: 0vmin;
    height: 100%;
    width: 0.2778vmin;

    background: var(--color);
    box-shadow: 0vmin 0vmin 1.2963vmin var(--color);
    border-radius: 0.463vmin;
}

.bottomItem #bottomIcon {
    position: absolute;

    left: 0.7407vmin;

    width: 3vmin;
    height: 100%;

    background: radial-gradient(60% 60% at 50% 50%, rgba(98, 73, 4, 0) 0.01%, #0099ff 100%);
    filter: drop-shadow(0vmin 0vmin 1.8519vmin rgba(47, 137, 255, 0.35));
    border-radius: 0.0926vmin;

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

    font-size: 1.3889vmin;
    color: white;
}

.bottomItem span:nth-child(3) {
    position: absolute;

    top: 0vmin;
    left: 4.5vmin;

    text-align: left;
    font-family: 'Gilroy-Regular';
    font-weight: 600;
    font-size: 1.2037vmin;
    color: rgba(255, 255, 255, 0.62);
}

.bottomItem span:nth-child(4) {
    position: absolute;

    bottom: 0vmin;
    left: 4.5vmin;

    text-align: left;
    font-family: 'Gilroy-Medium';
    font-weight: 700;
    font-size: 1.2963vmin;
    color: #FFFFFF;
}

.hud-stats-container {
    position: absolute;

    bottom: 19vmin;
    left: 2.8vmin;

    width: 24.9vmin;
    height: 5vmin;

    display: flex;
    justify-content: space-between;
}

.hud-stats-item {
    position: relative;
    width: 8vmin;
    height: 5vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.hud-stats-container .hud-stats-item span {
    font-family: 'Gilroy-Bold';
    font-size: 1.6vmin;
    width: auto;
    margin-left: 0.5vmin;
}

.hud-stats-container .hud-stats-item i {
    color: #0099ff;
    margin-right: 0.5vmin;
    font-size: 1.8vmin;
}

.hud-stats-container .hud-stats-item:nth-child(1) span {
    text-align: left;
}

.hud-stats-container .hud-stats-item:nth-child(2) span {
    text-align: center;
}

.hud-stats-container .hud-stats-item:nth-child(3) span {
    text-align: right;
}

.streak {
    position: absolute;
    transform: translate(-50% -50%);
    top: 51%;
    left: 51%;

    width: auto;
    height: 2.963vmin;

    display: flex;
    align-items: center;
    justify-content: center;
}

.streak p {
    transform: translateX(0.7vmin);
    text-align: left;
    color: #ffffff;
    text-shadow: 0vmin 0vmin 1.2037vmin #ffffff;
    font-family: "Gilroy-Bold";
    font-size: 1.6vmin;
    font-style: italic;
}

.notifyContainer {
    position: absolute;
    top: 10vmin;
    left: 3vmin;
    width: 22vmin;
    height: 30vmin;
}

.notify {
    margin-top: 1vmin;
    position: relative;
    width: 22vmin;
    border-radius: 0.3704vmin;
    display: flex;
    align-items: center;
    background: url("notify.png") no-repeat;
    background-size: cover;
    background-position: center;
    padding: 1.2vmin;
    animation: fadeInFromLeft 0.6s ease-in-out forwards;
}

.notify .icon {
    margin-top: -0.6vmin;
    margin-left: -0.6vmin;
    width: 4.5vmin;
    height: 4.5vmin;
   /* border: 0.0926vmin solid rgba(255, 255, 255, 0.1); */
   /* border-radius: 0.2778vmin; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.notify .icon i {
    width: 2.3vmin; 
    height: 2.3vmin; 
    background: radial-gradient(60% 60% at 50% 50%, #0073c0 0.01%, #0099ff 100%);
    box-shadow: 0vmin 0vmin 1.8519vmin rgba(255, 189, 47, 0.35);
    border-radius: 0.0926vmin;
    font-size: 1.15vmin; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.notify .notifyHeader {
    padding-bottom: 0.8vmin;
    margin-left: 0.8vmin; 
    width: 15vmin; 
    height: auto;
}

.notify .notifyHeader span:nth-child(1) {
    width: 10vmin; 
    height: 1.4vmin; 
    font-family: 'Gilroy-Medium';
    font-weight: 400;
    font-size: 1.1vmin; 
    color: #FFFFFF;
}

.notify .notifyHeader span:nth-child(2) {
    width: 15vmin; 
    height: 2.2vmin; 
    font-family: 'Gilroy-Regular';
    font-weight: 400;
    font-size: 1.0vmin; 
    color: rgba(255, 255, 255, 0.5);
}



.announceContainer {
    position: absolute;

    top: 2vmin;
    left: 50%;
    transform: translateX(-50%);

    width: 40vmin;
    height: 6vmin;
}

.announce {
    margin-top: 0.5vmin;
    position: relative;

    width: 40vmin;
    height: 6vmin;

    border-radius: 0.6vmin;

    display: flex;
    align-items: center;

    background: url("announce.png") no-repeat;
    background-size: cover;
    background-position: center;

    padding: 0.6vmin;
    animation: AnnouncefadeIn 0.6s ease-in-out forwards;
}

.announce .icon {
    margin-left: 1vmin;
    width: 3vmin;
    height: 3vmin;

    /*border: 0.1vmin solid rgba(255, 255, 255, 0.1);*/
    /*border-radius: 0.3vmin;*/

    display: flex;
    align-items: center;
    justify-content: center;
}

.announce .icon i {
    width: 2vmin;
    height: 2vmin;

    background: radial-gradient(60% 60% at 50% 50%, #0059a1 0.01%, #0099ff 100%);
    box-shadow: 0vmin 0vmin 1vmin rgba(255, 189, 47, 0.35);
    border-radius: 0.15vmin;

    font-size: 1.1vmin;
    display: flex;
    align-items: center;
    justify-content: center;
}

.announce .announceHeader {
    margin-left: 1.5vmin;

    width: 30vmin;
    height: auto;
}

.announce .announceHeader span:nth-child(1) {
    width: 30vmin;
    height: 1.2vmin;

    font-family: 'Gilroy-Medium';
    font-weight: 400;
    font-size: 1.4vmin;
    color: #FFFFFF;
}

.announce .announceHeader span:nth-child(2) {
    width: 30vmin;
    height: 1.8vmin;
    font-family: 'Gilroy-Regular';
    font-weight: 400;
    font-size: 1.3vmin;
    color: rgba(255, 255, 255, 0.7);
}


.notify .progress {
    position: absolute;

    bottom: 0.6481vmin;
    left: 50%;
    transform: translateX(-50%);

    width: 21.8vmin;
    height: 0.2778vmin;

    background: rgba(47, 161, 255, 0.5);
    box-shadow: 0vmin 0vmin 1.2963vmin #0099ff;
    border-radius: 0.463vmin;
}

@keyframes fillLine {
    100% {
        width: 100%;
    }
}

.notify .progress .inner {
    width: 0%;
    height: 100%;

    background: #0099ff;
    box-shadow: 0vmin 0vmin 1.2963vmin #0099ff;
    border-radius: 0.463vmin;

    --time: 3000ms;
    animation: fillLine var(--time) forwards;
}

@keyframes AnnouncefadeIn {
    from {
        transform: translateY(-200px);
    }

    to {
        transform: translateY(0px);
    }
}

@keyframes fadeInFromLeft {
    from {
        transform: translateX(-29vmin);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes fadeOutFromLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-29vmin);
    }
}

.announceIn {
    animation: annin 0.3s ease;
}

.announceOut {
    animation: annout 0.5s ease;
}