@font-face {
    font-family: codFont;
    src: url("./assets/HitmarkerText-VF.ttf");
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOutAnimation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes progress {
    0% {
        --percentage: 0;
    }

    100% {
        --percentage: var(--value);
    }
}

* {
    font-family: codFont !important;
}

body {
    cursor: url('./assets/cursorcod.cur'), auto;
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.parent {
    display: grid;
    grid-template-columns: 0.1fr repeat(14, 1fr) 0.1fr;
    grid-template-rows: 0.04fr 0.1fr 1fr 0.1fr 0.3fr 0.06fr;
    grid-column-gap: 15px;
    grid-row-gap: 0px;
    height: 100%;
    width: 100%;
    background-image: url("https://media.steelseriescdn.com/blog/posts/modern-warfare-3-changes-we-want-to-see-at-launch/weapons_081d8256fb754c159aee885a181fdf93.jpg");
    background-position: center;
    background-size: cover;
}

/* .parent>div {
    border: 1px solid blue;
} */

.parent>div>button {
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.div1 {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 2 / 2 / 3 / 4;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    color: white;
}

.namespace {
    color: red;
}

.div2 {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 2 / 15 / 3 / 16;
}

.div3 {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 2 / 13 / 3 / 15;
}

.div4 {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 2 / 5 / 3 / 12;
}

.div5 {
    grid-area: 3 / 12 / 4 / 16;
    padding-top: 5%;
    padding-bottom: 20%;
}

.div6 {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 4 / 2 / 5 / 4;
}

.div7 {
    grid-area: 5 / 2 / 6 / 5;
}

.div8 {
    display: flex;
    align-items: center;
    grid-area: 4 / 6 / 5 / 8;
    /* border: 1px solid blue;
    line-height: 100%; */
}

.div9 {
    grid-area: 5 / 6 / 6 / 8;
}

.div10 {
    grid-area: 5 / 8 / 6 / 10;
}

.div11 {
    grid-area: 5 / 10 / 6 / 12;
}

.div12 {
    grid-area: 5 / 12 / 6 / 14;
}

.div13 {
    grid-area: 5 / 14 / 6 / 16;
}

.div14 {
    grid-area: 4 / 13 / 5 / 16;
    display: flex;
    align-items: center;
    /* border: 1px solid blue; */
    /* padding: 40px 60px;
    margin-bottom: 5px;
    margin-right: 100px; */
}

.div15 {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 4 / 5 / 5 / 6;
}

.div16 {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 5 / 5 / 6 / 6;
}

/* group */
.group {
    background-color: #0e0d11;
    border: 1px solid #575357;
    background-image: url(./assets/friendsbar.png);
    background-position: right 150x center;
    background-size: cover;
    height: 80%;
    width: 80%;
    border-radius: 4px;
    opacity: 0.73;
}

.group-count {
    position: relative;
    /* top: 50%; */
    z-index: 2;
    color: white;
}

.group-parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 100%;
    width: 100%;
}

/* .group-parent > div {
    border: 1px solid blue;
} */

.group-div1 {
    margin-top: 20%;
    margin-bottom: 20%;
    grid-area: 1 / 1 / 2 / 2;
    border-right: 1px solid #575357;
}

.group-div2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 15%;
    color: white;
    font-weight: 600;
    font-size: large;
    grid-area: 1 / 2 / 2 / 3;
}


/* group sheet */

.group-sheet-parent {
    display: grid;
    /* border: 1px solid blue; */
    grid-template-columns: 1fr 0.2fr;
    grid-template-rows: 0.5fr repeat(6, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 100%;
    width: 100%;
}

/* .group-sheet-parent>div {
    border: 1px solid blue;
} */

.group-sheet-div1 {
    background-color: #18181866;
    display: flex;
    justify-content: flex-start;
    padding-left: 5%;
    align-items: center;
    color: #8f9da4;
    font-weight: 600;
    grid-area: 1 / 1 / 2 / 2;
}

.group-sheet-div2 {
    background-color: #18181866;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8f9da4;
    font-weight: 600;
    grid-area: 1 / 2 / 2 / 3;
}

.group-sheet-div3 {
    grid-area: 2 / 1 / 3 / 3;
}

.group-sheet-div4 {
    grid-area: 3 / 1 / 4 / 3;
}

.group-sheet-div5 {
    grid-area: 4 / 1 / 5 / 3;
}

.group-sheet-div6 {
    grid-area: 5 / 1 / 6 / 3;
}

.group-sheet-div7 {
    grid-area: 6 / 1 / 7 / 3;
}

.group-sheet-div8 {
    grid-area: 7 / 1 / 8 / 3;
}

.group-card-parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr) 0.1fr 3fr repeat(3, 1fr) 3fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 100%;
    width: 100%;
}

.group-card-parent > div {
    /* border: 1px solid blue; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 600;
}

.group-card-div1 {
    background-image: url(./assets/weaponxp.png);
    background-position: 5px center;
    background-size: contain;
    background-repeat: no-repeat;
    grid-area: 1 / 1 / 2 / 2;
}

.group-card-div2 {
    grid-area: 1 / 2 / 2 / 3;
}

.group-card-div3 {
    margin-top: 400%;
    margin-bottom: 400%;
    border-left: 1px solid #7e787e !important;
    grid-area: 1 / 3 / 2 / 4;
}

.group-card-div4 {
    padding-left: 5px;
    justify-content: flex-start !important;
    grid-area: 1 / 4 / 2 / 5;
}

.group-card-div5 {
    /* background-image: url(./assets/weaponxp.png); */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    grid-area: 1 / 5 / 2 / 6;
}

.group-card-div6 {
    background-image: url('https://img.icons8.com/?size=100&id=lFs7bgEBFRPS&format=png&color=FFFFFF');
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    grid-area: 1 / 6 / 2 / 7;
}

.group-card-div7 {
    background-image: url('https://img.icons8.com/?size=100&id=25XtUnzsVv3h&format=png&color=FFFFFF');
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    grid-area: 1 / 7 / 2 / 8;
}

.group-card-div8 {
    background-image: url('https://img.game8.co/3794229/8ea1102304353f0ac6027b3971fb3c0c.png/original');
    background-position: center;
    background-size: 90% 80%;
    background-repeat: no-repeat;
    grid-area: 1 / 8 / 2 / 9;
}



/* Options */

.options {
    background-color: #0e0d11;
    border: 1px solid #575357;
    opacity: 0.73;
    border-radius: 4px;
    height: 80%;
    width: 100%;
}

.options-nav-parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 0.2fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 100%;
    width: 100%;
}

.options-nav-div1 {
    grid-area: 1 / 1 / 2 / 2;
    background-image: url("assets/6vakken.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.options-nav-div2 {
    grid-area: 1 / 2 / 2 / 3;
    background-image: url("assets/bel.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.options-nav-div3 {
    grid-area: 1 / 3 / 2 / 4;
    background-image: url("assets/headset.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.options-nav-div4 {
    grid-area: 1 / 4 / 2 / 5;
    background-image: url("assets/settings.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.options-nav-div5 {
    grid-area: 1 / 5 / 2 / 6;
    margin-top: 120%;
    margin-bottom: 120%;
    /* margin-right: 10%; */
    border-left: 1px solid #575357 !important;
}

.options-nav-div6 {
    grid-area: 1 / 6 / 2 / 7;
}

.options-nav-div7 {
    grid-area: 1 / 7 / 2 / 8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
}

.circular-progress {
    --size: 250px;
    --half-size: calc(var(--size) / 2);
    --stroke-width: 20px;
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc((var(--progress) * var(--circumference)) / 100);
}

.circular-progress circle {
    cx: var(--half-size);
    cy: var(--half-size);
    r: var(--radius);
    stroke-width: var(--stroke-width);
    fill: none;
    stroke-linecap: round;
}

.circular-progress circle.bg {
    stroke: #312e3b;
}

.circular-progress circle.fg {
    transform: rotate(-90deg);
    transform-origin: var(--half-size) var(--half-size);
    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
    transition: stroke-dasharray 0.3s linear 0s;
    stroke: #5394fd;
}

.options-nav-parent>div:not(:nth-child(6)):hover {
    background-color: #3a9bff;
}

/* QUICKPLAY */

.quickplay-image {
    margin-right: 5px;
    z-index: 5;
    margin-bottom: -10%;
}

.quickplay-text {
    color: white;
    font-size: xx-large;
    z-index: 5;
    margin-bottom: -10%;
}

.playlist-text {
    background-color: #80808080;
    opacity: 1;
    color: white;
    /* opacity: 0.6; */
    margin-left: -50px;
    font-size: x-large;
    padding: 3px;
    /* height: 30px;
    line-height: 100%; */
}

#streep {
    height: 100%;
    width: 1px;
    border-right: 1px solid #5f6469;
}

#punt {
    height: 10px;
    width: 10px;
    background-color: white;
    /* margin-bottom: -10%; */
}

/* top Navigation */
.top-nav {
    display: flex;
    justify-content: center;
    /* background-color: #222; */
    /* padding: 10px 0; */
}

.top-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.top-nav ul li {
    margin: 0 2px;
}

.top-nav ul li a {
    text-decoration: none;
    color: #fff;
    padding: 5px 20px;
    display: block;
    background-color: rgba(24, 24, 24, 0.73);
    border-radius: 4px;
    border: 1px solid #7c7c7c;
    box-shadow: inset 0px 0px 5px 3px #353335;
    text-transform: uppercase;
    font-size: large;
}

.top-nav ul li a:hover,
nav ul li.active a {
    background-color: #3a9bff;
}

.top-nav ul li a {
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.top-nav ul li a:hover {
    background-color: #424242;
    border: 1px solid #aeaeae;
    box-shadow: none;
}

.top-nav ul li.active a {
    background-color: #3b667b;
    border: 2px solid rgba(124, 199, 225, 0.85);
    color: #fff;
}

/* bpoosts */

.boosts {
    height: 100%;
    width: 100%;
    background-color: #181818;
    opacity: 0.73;
    border-radius: 4px 4px 15px 4px;
    border: 1px solid #7c7c7c;
    margin-bottom: 7.5%;
    z-index: 1;
    clip-path: polygon(100% 0, 100% 80%, 95% 100%, 0 100%, 0 0);
    -webkit-clip-path: polygon(100% 0, 100% 80%, 95% 100%, 0 100%, 0 0);
}

.boosts-parent {
    display: grid;
    grid-template-columns: 1fr 0.1fr 0.5fr repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 100%;
}

/* .boosts-parent > div {
    border: 1px solid blue
} */

.boosts-div1 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10%;
    margin-bottom: 10%;
    grid-area: 1 / 1 / 2 / 2;
    line-height: 100%;
    text-align: center;
    margin-right: -20%;
    color: white;
}

.boosts-div2 {
    margin-top: 20%;
    margin-bottom: 20%;
    grid-area: 1 / 3 / 2 / 4;
    border-left: 1px solid #575357;
}

.boosts-div3 {
    /* background-image: url(./assets/playerxp.png);
    background-position: center;
    background-size: 60% 60%;
    background-repeat: no-repeat; */

    grid-area: 1 / 4 / 2 / 5;
}

.boosts-div4 {
    background-image: url(./assets/weaponxp.png);
    background-position: center 25%;
    background-size: 50% 55%;
    background-repeat: no-repeat;

    grid-area: 1 / 5 / 2 / 6;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: white;
    font-size: small;
    margin-bottom: 10%;
}

.boosts-div5 {
    background-image: url(./assets/playerxp.png);
    background-position: center 25%;
    background-size: 50% 55%;
    background-repeat: no-repeat;
    grid-area: 1 / 6 / 2 / 7;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: white;
    font-size: small;
    margin-bottom: 10%;
}

.timerinside {
    /* bottom: 0; */
}

/* Startbuttons */

.start-button {
    background-image: url("assets/GIFFF-2.gif");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    appearance: none;
    /* border: 3px solid #3c6c86; */
    border-radius: 2px;
    /* cursor: pointer; */
    cursor: url('./assets/cursorcod.cur'), auto;
    font-weight: 800;
    font-size: xx-large;
    transition: height .4s;
}

#startbutton {
    font-size: 3rem;
    font-weight: 600;
}

.start-button:hover {
    transition: .2s ease-in all;
    box-shadow: 0 0 .2rem #fff,
        0 0 .2rem #fff,
        0 0 2rem #3c6b86,
        0 0 0.8rem #3c6b86,
        0 0 2.8rem #3c6b86,
        inset 0 0 1.1rem #3c6b86;
    height: 115%;
}

.start-button:hover #filterbutton {
    display: block;
    animation: fadeInAnimation ease 1s;
}

.start-button:hover #findbutton {
    display: none;
    animation: fadeOutAnimation ease-out 1s;
}

#filterbutton {
    display: none;
    font-size: medium;
    width: 60%;
    background-color: #00000080;
    /* opacity: 0.4; */
    font-weight: 200;
}

#findbutton {
    font-size: medium;
    width: 60%;
    background-color: #00000080;
    /* opacity: 0.4; */
    font-weight: 200;
}

.start-button-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 100%;
}

.start-button-content>div {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 100%;
    text-align: center;
}

.start-button-div1 {
    grid-area: 3 / 1 / 4 / 2;
}

.start-button-div2 {
    grid-area: 4 / 1 / 5 / 2;
}

.start-button-div3 {
    grid-area: 5 / 1 / 6 / 2;
}


/* GAMEMDOE BUTTON SENSE */

.gamemode-button {
    display: flex;
    /* align-items: center;
    justify-content: flex-start; */
    /* background-image: url("https://hard-drive.net/wp-content/uploads/2022/02/cod-ww3.jpg.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; */
    height: 100%;
    width: 100%;
    appearance: none;
    border: 1px solid #000000;
    /* border-bottom: 0px;
    border-top: 0px; */
    /* border-radius: 3px; */
    background-color: white;
    /* cursor: pointer; */
    cursor: url('./assets/cursorcod.cur'), auto;
    font-weight: 600;
    font-size: x-large;
}

.gamemode-button>span {
    height: fit-content;
    width: fit-content;
    /* border: 1px solid blue; */
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: 10%;
    right: 0;
    bottom: 0;
}

/* .gamemode-button:hover {
    background-image: linear-gradient(180deg, rgb(81, 161, 201) 0%, rgba(42, 42, 42, 0)24%), url("https://hard-drive.net/wp-content/uploads/2022/02/cod-ww3.jpg.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
} */

.gamemode-button-dropdown {
    display: none;
    /* needs to be none */
    align-items: center;
    justify-content: center;
    position: relative;
    bottom: 0;
    height: 12%;
    background-color: #386e89;
    box-shadow: inset 0px 0px 3px 1px #819fb0;
    border: 1px solid #819fb0;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
}

.gamemode-button-topbar {
    display: none;
    /* needs to be none */
    position: relative;
    top: -2%;
    height: 2%;
    background-color: #386e89;
    border: 1px solid #819fb0;
    border-bottom: 0px;
    border-radius: 5px 5px 0px 0px;
}

.gamemode-button-dropdown-parent {
    display: grid;
    grid-template-columns: 1fr repeat(2, 0.5fr) 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 100%;
    width: 100%;
    margin: 0px 5% 0px 5%;
    color: white;
}

.gamemode-button-dropdown-parent>div {
    /* border: 1px solid blue; */
    display: flex;
}

.gamemode-button-dropdown-div1 {
    grid-area: 1 / 1 / 2 / 2;
    align-items: center;
    justify-content: flex-start;
}

.gamemode-button-dropdown-div2 {
    grid-area: 1 / 2 / 2 / 3;
    margin: 5% 0 5% 0;
}

.gamemode-button-dropdown-div3 {
    grid-area: 1 / 3 / 2 / 4;
    margin: 5% 0 5% 0;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5%;
    border-left: 1px solid white;
}

.gamemode-button-dropdown-div4 {
    grid-area: 1 / 4 / 2 / 5;
    align-items: center;
    justify-content: flex-end;
}

.gamemode-button-dropdown-div3>button {
    background-color: white;
    box-shadow: 0px 0px 1px .2px #000000;
    border-radius: 1px;
    height: 80%;
    width: 45%;
    appearance: none;
    border: none;
    text-align: center;
    line-height: 80%;
}

.div9:hover .gamemode-button {
    margin-top: -2%;
}

.div10:hover .gamemode-button {
    margin-top: -2%;
}

.div11:hover .gamemode-button {
    margin-top: -2%;
}

.div12:hover .gamemode-button {
    margin-top: -2%;
}

.div13:hover .gamemode-button {
    margin-top: -2%;
}

.div9:hover .gamemode-button-dropdown {
    display: flex;
    animation: fadeInAnimation ease .2s;
}

.div10:hover .gamemode-button-dropdown {
    display: flex;
    animation: fadeInAnimation ease .2s;
}

.div11:hover .gamemode-button-dropdown {
    display: flex;
    animation: fadeInAnimation ease .2s;
}

.div12:hover .gamemode-button-dropdown {
    display: flex;
    animation: fadeInAnimation ease .2s;
}

.div13:hover .gamemode-button-dropdown {
    display: flex;
    animation: fadeInAnimation ease .2s;
}

.div9:hover .gamemode-button-topbar {
    display: flex;
    animation: fadeInAnimation ease .2s;
}

.div10:hover .gamemode-button-topbar {
    display: flex;
    animation: fadeInAnimation ease .2s;
}

.div11:hover .gamemode-button-topbar {
    display: flex;
    animation: fadeInAnimation ease .2s;
}

.div12:hover .gamemode-button-topbar {
    display: flex;
    animation: fadeInAnimation ease .2s;
}

.div13:hover .gamemode-button-topbar {
    display: flex;
    animation: fadeInAnimation ease .2s;
}

#gungame {
    background-image: url("assets/gcall5.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#gungame:hover {
    background-image: linear-gradient(180deg, #51a1c9 0%, #2a2a2a00 24%), url("assets/gcall5.png");
    /* -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%;
    mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%; */
    background-repeat: no-repeat;
    /* animation: shimmer 2.5s infinite; */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#teamdeathmatch {
    background-image: url("assets/gcall1.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#teamdeathmatch:hover {
    background-image: linear-gradient(180deg, #51a1c9 0%, #2a2a2a00 24%), url("assets/gcall1.png");
    /* url("assets/rain.gif"), */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#searchdestroy {
    background-image: url("assets/gcall2.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#searchdestroy:hover {
    background-image: linear-gradient(180deg, #51a1c9 0%, #2a2a2a00 24%), url("assets/gcall2.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#domination {
    background-image: url("assets/gcall3.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#domination:hover {
    background-image: linear-gradient(180deg, #51a1c9 0%, #2a2a2a00 24%), url("assets/gcall3.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#freeforall {
    background-image: url("assets/gcall4.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#freeforall:hover {
    background-image: linear-gradient(180deg, #51a1c9 0%, #2a2a2a00 24%), url("assets/gcall4.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}