body {
    overflow-x: hidden;
    margin-left: 3vw;
}

.background-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    z-index: -1; 
}

.background-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
}

.naviButtons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: 1vw;
}

.topLeftButtons {
    width: 50%;
}

.topRightButtons {
    text-align: right;
    position: relative;
}

#githubIcon {
    font-size: 2.5vw;
    transition: all 0.3s ease;
    /* margin-left: .5vw; */
}

#githubIcon:hover {
    transform: scale(1.3);
    animation: blink 1s infinite;
    cursor: pointer;
}

#linkedinIcon {
    font-size: 2.5vw;
    margin-left: 25px;
    transition: all 0.3s ease;
}

#linkedinIcon:hover {
    transform: scale(1.3);
    animation: blink 1s infinite;
    cursor: pointer;
}

#agentButton {
    font-size: 35px;
    transition: all 0.3s ease;
}


#helpButton{
    font-size: 2.5vw;
    margin-left: 2vw;
    transition: all 0.3s ease;
    margin-right: 1vw;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .modal {
    visibility: hidden;
    width: 15vw;
    background-color: rgb(221, 82, 82);
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    z-index: 1;
    left: -3.5vw;
    top: 24vh;
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
    font-size: 1.2vw;
    margin-right: 9vw;
}

.tooltip:hover .modal {
    visibility: visible;
}

.headerSection {
    display: flex;
    justify-content: center;
    margin-bottom: 10vh;
    margin-top: -10vh;
}

#websiteTitle {
    font-size: 10vw;
    font-family: 'Bebas Neue', sans-serif;
    color: rgb(221, 82, 82);
}

.contentWrapper {
    display: flex;
}

.agentDetails {
    position: absolute;
}

.agentIcon {
    display: flex;
    flex-wrap: wrap;
    width: 25vw;
    height: 25vh;
    margin-left: 5vw;
}

.agentIcon img {
    margin-left: 1vw;
    margin-top: 2vw;
    width: 25%; 
    height: auto;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.agentIcon img:hover {
    transform: scale(1.2); 
    filter: brightness(1.9); 
    cursor: pointer;
}

.agentDisplay {
    display: grid;
    justify-content: center;
    position: relative;
    margin-left: 3vw;
    width: max-content;
    height: max;
}

#agentName {
    font-size: 5.5vw;
    color: white;
    height: auto;
    margin-top: 14vh;
    font-family: 'Exo 2', sans-serif;
}

.agentRoleSection {
    display: flex;
    justify-content: left;
    flex-direction: row;
    width: 17vw;
    height: auto;
    margin-top: 30vh;
}

#agentPortraitWrapper {
    position: absolute;
    margin-top: 10vh;
    margin-left: 20vw;
 }

#agentPortrait {
    width: 50vw;
    height: auto;
    object-fit: contain;
}

#agentRoleName {
    font-size: 2.5vw;
    color: white;
    display: inline-block;
    margin-left: 1vw;
    font-family: 'Teko', sans-serif;
}

#agentRoleIcon {
    width: 4vw;
    height: 7vh;
    margin-top: 4.5vh;
}

#agentDescription {
    width: 27vw;
    color: white;
    font-size: 1.7vw;
    margin-top: 5vh;
    font-family: 'Teko', sans-serif;
}

.abilitySection {
    display: flex;
    margin-top: 130vh;
    margin-left: 4vw;
}

.abilityWordSection {
    position: absolute;
    margin-top: 5vh;
}

.selectedAbility {
    margin-top: 7vh;
    margin-bottom: 20vh;
    margin-left: 2vw;
    height: fit-content;
    width: 50vw;
}

#agentAbility1 {
    width: 6vw;
    height: auto;
    transition: all 0.3s ease;
}

#agentAbility1:hover {
    transform: scale(1.5); 
    filter: brightness(150%) contrast(200%);
    animation-iteration-count: infinite;
    cursor: pointer;
}

#agentAbility2 {
    width: 6vw;
    height: auto;
    margin-left: 3vw;
    transition: all 0.3s ease;
}

#agentAbility2:hover {
    transform: scale(1.5); 
    filter: brightness(150%) contrast(200%);
    animation-iteration-count: infinite;
    cursor: pointer;
}

#agentAbility3 {
    width: 6vw;
    height: auto;
    margin-left: 3vw;
    transition: all 0.3s ease;
}

#agentAbility3:hover {
    transform: scale(1.5); 
    filter: brightness(150%) contrast(200%);
    animation-iteration-count: infinite;
    cursor: pointer;
}

#agentAbility4 {
    width: 6vw;
    height: auto;
    margin-left: 3vw;
    transition: all 0.3s ease;
}

#agentAbility4:hover {
    transform: scale(1.5); 
    filter: brightness(150%) contrast(200%);
    animation-iteration-count: infinite;
    cursor: pointer;
}

#agentAbilityDescription {
    width: 30vw;
    color: white;
    font-size: 1.5vw;
    font-family: 'Teko', sans-serif;
}

#agentAbilityName {
    font-size: 2.5vw;
    color: white;
    width: 25vw;
    font-family: 'Teko', sans-serif;
}

#abilityVideoClip {
    width: 50vw;
    height: 55vh;
    margin-left: 40vw;
    margin-bottom: 10vh;
    border: 5px solid transparent;
    border-image: linear-gradient(to left, black , rgb(221, 82, 82));
    border-image-slice: 1;
    object-fit: cover;
}

.weaponSection {
    margin-top: 30vh;
}

.weaponRow1 {
    margin-right: 1vw;
}

.weaponRow2 {
    margin-right: 1vw;
}
.weaponRow3 {
    margin-right: 1vw;
}

.weaponDisplayGrid {
    display: flex;
    margin-left: 1vw;
}

.row1HeaderContainer {
    background-color: rgb(70, 204, 159);
    justify-content: center;
    display: flex;
}

.row2HeaderContainer {
    background-color: rgb(70, 204, 159);
    justify-content: center;
    display: flex;
}

.row3HeaderContainer {
    background-color: rgb(70, 204, 159);
    justify-content: center;
    display: flex;
}

.row4HeaderContainer {
    background-color: rgb(70, 204, 159);
    justify-content: center;
    display: flex;
}

.weaponGridText {
    color: white;
    font-family: 'Teko', sans-serif;
    font-size: 1.5vw;
}

.weaponGridText2 {
    color: rgb(175, 173, 173);
    font-family: 'Teko', sans-serif;
    font-size: 1.5vw;
}

.weaponItemWrapper1 {
    margin-top: .5vh;
    background-color: rgb(54, 54, 54);
    display: grid;
    justify-content: left;
    width: 13vw;
    border: 2px solid transparent;
}

.weaponItemWrapper2 {
    margin-top: .7vh;
    background-color: rgb(54, 54, 54);
    display: grid;
    justify-content: left;
    width: 23vw;
    border: 2px solid transparent;
}

.weaponItemWrapper3 {
    margin-top: 1.2vh;
    background-color: rgb(54, 54, 54);
    display: grid;
    justify-content: left;
    width: 27vw;
    border: 2px solid transparent;
}

.weaponItemWrapper4 {
    margin-top: 0.85vh;
    background-color: rgb(54, 54, 54);
    display: grid;
    justify-content: left;
    width: 29vw;
    border: 2px solid transparent;
}

.weaponItemWrapper1:hover {
    filter: brightness(140%);
    cursor: pointer;
}

.weaponItemWrapper2:hover {
    filter: brightness(140%);
    cursor: pointer;
}

.weaponItemWrapper3:hover {
    filter: brightness(140%);
    cursor: pointer;
}

.weaponItemWrapper4:hover {
    filter: brightness(140%);
    cursor: pointer;
}

.weaponBuyPortrait1 {
    width: 11vw;
    height: 6vh;
    margin-top: 0.5vh;
    margin-left: 1vw;
}

.weaponBuyPortrait2 {
    width: 17vw;
    height: 11vh;
    margin-top: 1vh;
    margin-left: 1.5vw;
}

.weaponBuyPortrait3 {
    width: 21vw;
    height: 11vh;
    margin-top: 1.7vh;
    margin-left: 1vw;
}

.weaponBuyPortrait4 {
    width: 25vw;
    height: 9vh;
    margin-top: 1.6vh;
    margin-left: 1vw;
}

#weaponContentText {
    margin-left: 0.5vw;
    margin-bottom: 0.5vh;
}

#ClassicBuyImage {
    width: 8vw;
    height: 8vh;
    margin-left: 1.5vw;
}

#FrenzyBuyImage {
    width: 8vw;
    height: 9vh;
    margin-left: 3vw;
}

#SheriffBuyImage {
    width: 8vw;
    height: 8vh;
    margin-left: 2.5vw;
}

#StingerBuyImage {
    width: 15vw;
    margin-top: 1vh;
    margin-left: 5vw;
}
#SpectreBuyImage {
    margin-top: 1vh;
    width: 19vw;
}

#SpectreItem {
    margin-bottom: 1vh;
}

#BuckyBuyImage {
    width: 18vw;
    height: 6vh;
    margin-top: 1vh;
    margin-left: 3vw;
}

#JudgeBuyImage {
    width: 20vw;
    height: 10.8vh;
    margin-top: 1vh;
}

#BulldogBuyImage {
    margin-left: 2.5vw;
}

#GuardianBuyImage {
    width: 24vw;
    height: 8vh;
}

#PhantomBuyImage {
    width: 23vw;
    height: 9vh;
    margin-left: 1.5vw;
}

#VandalBuyImage {
    height: 11vh;
    width: 23vw;
    margin-left: 1.5vw;
}

#MarshalBuyImage {
    width: 25vw;
    height: 7vh;
    margin-left: 2vw;
}

#OperatorItem {
    margin-bottom: 1vh;
}

#OperatorBuyImage {
    width: 27vw;
    height: 9vh;
}

#AresBuyImage {
    width: 25vw;
    margin-left: 2vw;
}

#OdinBuyImage {
    width: 27vw;
    height: 11vh;
}

.selectedWeaponDisplay {
    display: flex;
    margin-top: 10vh;
    border: 3px solid red;
    width: 75%;
    height: 25vh;
    padding-bottom: 15vh;
    margin-left: 12vw;
    margin-bottom: 10vh;
    background-color: rgb(221, 82, 82);
    box-shadow: 0 0 10px 3px red;
    justify-content: space-around;
}

.weaponImage {
    width: 60%;
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#weaponPortraitContainer {
    max-width: 100%;
    max-height: 100%;
}

.pistol .weaponMainPortrait {
    max-width: 40%;
    max-height: 40%;
    margin-left: 13vw;
}


.pistol2 .weaponMainPortrait {
    max-width: 60%;
    max-height: 60%;
    margin-left: 12vw;
}


.weaponMainPortrait {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.weaponStats {
    width: 20vw;
}


#weaponNameDisplay {
    color: white;
    font-size: 4vw;
    margin-top: -0vh;
    font-family: 'Teko', sans-serif;
    margin-left: 3vw;
    margin-bottom: 1vh;
}


#magazineSize,
#fireRate,
#reloadTime,
#firstBulletAccuracy {
    color: white;
    font-size: 2vw; /* Adjust the value as per your preference */
    font-family: 'Teko', sans-serif;
    margin: 0;
    margin-bottom: 2vh;
}


@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}