/* universal changes */
* {
    margin: 0;
    padding: 0;
    /* border: 1px solid red; */
}







/* element changes */
.container-fluid {
    overflow-x: hidden;
    background: url('https://images.unsplash.com/photo-1557683304-673a23048d34?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1700&q=80');
    background-repeat: no-repeat;
    background-size: cover ;
    background-position: center;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.row {
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.col {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card {
    opacity: 0.5;
    border-radius: 50px;
    height: 500px;
    width: 300px;
    margin-bottom: 10px;
    transition: 0.3s ease-in-out all;
}

.card:hover {
    opacity: 1;
    scale: 1.02;
    box-shadow: 0 0 10px black;
}

.card-header {
    position: relative;
    border: none;
}

.title {
    position: relative;
    text-align: center;
    padding: 5px;
    font-size: 3vw;
    color: black;
    background-color: white;
    margin-bottom: 15px;
    font-weight: bold;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    text-align: center;  
}

h1 {
    font-weight: bold;
    width: 100%;
    height: 100%;
    border: none;
    background: rgba(255,255,255,0.7);
    border-radius: 10px;
    text-align: center;
    transition: .3s ease-in-out all;
}

.card:hover h1 {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.card-footer {
    border: none;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.speed, .health {
    margin-left: 5px;
    width: 150px;
    height: 100%;
    background: rgba(255,255,255,0.7);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}
/* styling the stares */
.fa-solid {
    transition: .3s ease-in-out all;
    color: transparent;
    font-size: 16px;
}
/* current stats before the season update */
.pre-update-filled {
    transition: .3s ease-in-out all;
    color: grey;
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

.nerf {
    transition: .3s ease-in-out all;
}

.buff {
    transition: .3s ease-in-out all;
}


/* nerfs */
/* .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
} */





/* individual operator cards */
.sledge {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/6eIdbZWLBIdtCygNAu9uue/8856e29f0e9ebc3b6ed996223586ebce/r6-operators-list-sledge.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}

/* nerf */
.sledge:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.sledge:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}

/* no stat */
.sledge:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.zofia {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/z60t1OJxJoHqm2zp0t5dL/4acc0904444f43b12a17f6a578322cf9/r6-operators-list-zofia.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor:pointer;
}

/* nerf */
.zofia:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.zofia:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}

/* no stat */
.zofia:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.thatcher {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/5QGPM6l25ybaINnaIaLgvm/d018abc75d44758d666ad6bea0a38a9b/r6-operators-list-thatcher.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}

/* nerf */
.thatcher:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.thatcher:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}

/* no stat */
.thatcher:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.dokkaebi {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/7fjUupLXClpcdTyqdvPv24/e4492917c18682ef09f9b0445176b2f2/r6-operators-list-dokkaebi.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}


/* nerf */
.dokkaebi:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.dokkaebi:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}

/* no stat */
.dokkaebi:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.zero {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/24jDQIfDdVMLX5K54pKNe5/58dec3b1e7d32a637bc76560e0cf0385/r6s-operator-list-zero.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}

/* nerf */
.zero:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.zero:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}

/* no stat */
.zero:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.osa {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/3Dg95rvyhPtw588r60vIPM/75e609068a0b205cc4dbc7bf3e517f51/r6s-operators-list-osa.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}

/* nerf */
.osa:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.osa:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}

/* no stat */
.osa:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.sens {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/1ieRqIy6e47QH48sTp1W4a/59f8188d94ae610bf76da26b4fef0b92/r6s-operators-list-sens.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}

/* nerf */
.sens:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.sens:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}

/* no stat */
.sens:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.mute {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/4BWoDVmdDsgrI071YJwqyF/4bcf11da1e22bda96d130a0f0d4d5b48/r6-operators-list-mute.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}

/* nerf */
.mute:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.mute:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}
/* no stat */
.mute:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.ela {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/6110n4X8KghHzBtPrksrKD/28e78ce725b3d1cd35c6f0967c0524b8/r6-operators-list-ela.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}


/* nerf */
.ela:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.ela:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}
/* no stat */
.ela:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.echo {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/7MdVMpafww11MfSVMEzyTK/4d4c5d92585c7cf11a28cbf9456e3d9e/r6-operators-list-echo.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor:pointer;
}

/* nerf */
.echo:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.echo:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}
/* no stat */
.echo:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.melusi {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/1yoVAGw5rEQ8zPPHoQSDJb/b16a570fadb3342416c5c44847cc651a/r6s-operator-list-melusi.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}

/* nerf */
.melusi:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.melusi:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}
/* no stat */
.melusi:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.aruni {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/4yfuWCW8O4ja2VqR9tXqaE/c8dd123a6405959cf4f091c3854c9d96/r6s-operators-list-aruni.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}

/* nerf */
.aruni:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.aruni:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}
/* no stat */
.aruni:hover .no-stat {
    color: transparent;
    text-shadow: none;
}

.thunderbird {
background-image: url('https://staticctf.akamaized.net/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/3gadEIZqtSfsHstfPMe3bz/424c7e4c21276e99f41a8c75478aa5e5/r6s-operators-list-thunderbird.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}

/* nerf */
.thunderbird:hover .nerf {
    color: rgba(255,50,50,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,1);
}

/* buffs */
.thunderbird:hover .buff {
    color: rgba(50,255,50,0.8);
    text-shadow: 0 0 10px rgba(0,255,0,1);
}
/* no stat */
.thunderbird:hover .no-stat {
    color: transparent;
    text-shadow: none;
}