/*-------------        INDEX     --------------*/
@font-face { font-family: font1; src: url('font1.ttf'); } 
@font-face { font-family: font2; src: url('font2.ttf'); } 

@media screen and (min-width: 700px){ 
    button.turnira {
        font-size: 35px;
    }
}

* {
    box-sizing: border-box;
}

div a img {
    display: none;
}

html {
    margin:0;
    height: 100%;        
    width: 100%;
}
body {
    direction: rtl;
    font-size: 18px;
    background: linear-gradient(#666666,#333333,#666666);
}

body.index {
    margin:0;
    height: 100%;        
    width: 100%;
    background: linear-gradient(#666666, black);
}

body.menu {
    margin:0;
    height: 100%;        
    width: 100%;
    background: linear-gradient(whitesmoke, #cccccc);
}

a {
    text-decoration: none;
}

.fullSize {
    height: 100%;
    width: 100%;
    margin: 0;
}
.fullWidth {
    width: 100%;
    margin: 0;
}

button.index {
    height: 100%;
    width: 90%;
    padding: 10px;
    background-color: transparent;
    font-size: 5vh;
    font-weight: 700;
    font-family: David Libre;
}

button.indexMenu {
    color: #cccccc;
    border: 0;
    margin: 0;
    padding: 3px;
    font-size: 3vh;
    font-family: Rubik;
    background: linear-gradient(to left,transparent, #666666 , transparent );
}
button.indexMenu:hover {
    color: whitesmoke;
    background: linear-gradient(to left,transparent, #660066 , transparent );
}
button.indexShorts {
    color: #cccccc;
    border: 0;
    margin: 0;
    padding: 3px;
    font-size: 3vh;
    font-family: Rubik;
    background: linear-gradient(to left,transparent, #666666 , transparent );
}
button.indexShorts:hover {
    color: whitesmoke;
    background: linear-gradient(to left,transparent, #003366 , transparent );
}
button.indexBack {
    color: #f26a6a;
    border: 0;
    margin: 0;
    font-size: 4vh;
    font-family: Rubik;
    background: linear-gradient(to left,transparent, #666666 , transparent );
}
button.indexBack:hover {
    color: whitesmoke;
    background: none;
    background: radial-gradient(#f9d1d1 0%, #521b1b 50%, transparent 100%);
}
button.menu {
    height: 100%;
    width: 100%;
    font-size: 4vh;
    margin: 0;
    max-width: 450px;
    border: 0;
    border-bottom: 1px #999999 solid;
    border-top: 1px #999999 solid;
}

td.menuTD {
    width: 100%;
}

button.indext {
    color: #0033cc;
}
button.indexnt {
    color: #009999;
}
button.indexg {
    color: #006600;
    font-size: 5vh;
}
button.indexh {
    color: #9785b5;
}
button.indexa {
    color: #9f9c6b;
}
button.indexop {
    color: #2d3448;
}
button.indexlo {
    color: #ff6666;
}


button.indext:hover{
    background: radial-gradient(white,#0033cc);
    color: #333333;
}
button.indexnt:hover{
    background: radial-gradient(white,#33ccff);
    color: #333333;
}
button.indexg:hover{
    background: radial-gradient(white,#5f7f61);
    color: #333333;
}
button.indexh:hover{
    background: radial-gradient(white,#6666ff);
    color: #333333;
}
button.indexa:hover{
    background: radial-gradient(white,#777741);
    color: #333333;
}
button.indexop:hover{
    background: radial-gradient(white,#18284d);
    color: #333333;
}
button.indexlo:hover{
    background: radial-gradient(white,#ff6666);
    color: #333333;
}
a:visited {
    color: black;
}
a:link {
    color: black;
}

table.mainf {
    color: white;
    font-size: 6vh;
    text-align: center;
    padding: 1%;
    font-family: David Libre;
}
td.mainfH {
    width: 50%; 
    height: 10%;
    margin: 0;
    padding-top: 3%;
    font-family: Amatic sc;
    font-size: 24px;
}

td.mainfN {
    width: 50%; 
    height: 40%;
    margin: 0;
    font-size: 12vh;
    color: #b2f7e8;
    font-family: Varela Round;
}
div.mad {
    font-size: 4vh; 
    background-color:green; 
    height:6vh;
    border: 1px #f4f8f7 outset;
}

td.curForm{
    height: 50px;
    border-radius: 100%;
}
td.curForm.w{ background: radial-gradient(#d5fbdc,#06940f); /* w */ }
td.curForm.t{ background: radial-gradient(#fbecca,#a47404); /* t */ }
td.curForm.l{ background: radial-gradient(#ffe3e3,#b61010); /* l */ }

th.mainfClub {
    padding: 5%;
}
td.mainfClub {
    
}

th.shorts {
    font-size: 6vh;
    font-family: amatic sc;
    color: white;
    background: linear-gradient(to right,#666666,#333333);
}
td.shorts {
    padding: 2vh;
}

a.shorts {
    background: radial-gradient(#666666,#333333);
    font-size: 4vh;
    font-weight: 700;
    font-family: David Libre;
    padding: 1%;
    padding-left: 5%;
    padding-right: 5%;
    border-radius: 40%;
    color: #99ffff;
}
a.shorts:hover {
    background: none;
    background-color: #666666;
}

div.tutorial {
    background: radial-gradient(transparent,gray);
    position: fixed;
    top: 0;
    right: 0;
    color: white;
    font-family: varela round;
    padding: 6px;
}
span.tutorial {
    background: radial-gradient(#660066,#333333);
}
span.tutorial.tutMainf {
    font-size: 16px;
}

div.achives {
    height: 80%;
    width: 80%; 
    background: linear-gradient(45deg,#99ccff,whitesmoke,#ccffcc); 
    position: fixed; 
    top: 10%;
    left: 10%;
    border: 1px #999999 ridge;
    border-radius: 2%;
    text-align: center;
    font-size: 7vh;
    vertical-align: central;
    font-family: varela round;
    box-shadow: 0 3px 10px #cbeacb, 0 -3px 10px #cbeacb;
    color: white;
    text-shadow: 2px 2px grey, 0 0 20px black;
}

/*----------  CLUB SELECT    ----------*/

th.clubSel {
    color: #d4cfcf;
    font-size: 7vh;
    font-family: amatic sc;
}

td.clubSel {
    padding: 1.5vh;
    font-size: 5vh;
    border: solid #999999 2px;
    background: linear-gradient(to right,#e6e0e0 60%,#3c3c2e 100%);
    width: 79%;
    text-align: center;
}
td.clubSel:hover{
    color: #9f9f2a;
    font-weight: 600;
    background: linear-gradient(to left,#e6e0e0 60%,#3c3c2e 100%);
}
td.clubSel.fav {
    padding-top: 1vh;
    padding-bottom: 1vh;
    font-size: 6vh;
    border: solid #999999 2px;
    background: radial-gradient(circle,#bad1c0 60%,#203926 100%);
    width: 20%;
    text-align: center;
}
td.clubSel.fav:hover{
    font-weight: 600;
    background: radial-gradient(circle,#ebd3d3 0%,#652a2a 60%);
}
td.clubSel.nfav {
    padding-top: 1vh;
    padding-bottom: 1vh;
    font-size: 6vh;
    border: solid #999999 2px;
    background: radial-gradient(circle,white 60%,silver 100%);
    width: 20%;
    text-align: center;
}
td.clubSel.nfav:hover{
    font-weight: 600;
    background: radial-gradient(circle,#bad1c0 0%,#203926 60%);
}
a.clubSel {
    width: 100%;
    color: #82820b;
}
a.clubSel.fav,a.clubSel.nfav {
    color: #116d27;
    font-family: varela round;
}
a.clubSel.fav:hover {
    color: #ce5858;
}
button.clubSel {
    height: 100%;
    width: 80%;
    font-size: 5vh;
    background-color: transparent;
    border: 1vh #333333 groove;
    border-radius: 150px;
    margin-top: 3vh;
    vertical-align: central;
    font-family: varela round;
    color: #d0c76d;
}

button.clubSel:hover {
    background: linear-gradient(to right,transparent 70%,#d0c76d);
    color: #e9e4b6;
}


/*----------        VIEW     -----------*/
div.view {
    padding-top: 1vh;
    padding-bottom: 1vh;
    font-size: 9vh;
    border: solid #999999 2px;
    background: linear-gradient(to right,#414e54 60%,#000033 100%);
    color: #0099cc;
    width: 97%;
    margin-right: 1.5%;
    text-align: center;
    margin-bottom: 15px;
}
div.view:hover{
    color: #c6d0ee;
    font-weight: 600;
    background: linear-gradient(to right,#414e54 80%,#000033 100%);
}

span.view {
    font-weight: 600;
    font-size: 8vh;
    background-color: #ccccff;
    color:#333333;
    padding: 1vh;
    border-radius: 50px;
}

/*----------        TURNIR     -----------*/
body.turnir {
    margin:0;
    height: 100%;        
    width: 100%;
    background: linear-gradient(#7d96b9,#006699,#7d96b9);
    font-family: tahoma;
    color: #d8e9e7;
}

td.turnir {
    padding: 3px;
    font-size: 4.5vh;
    text-align: center;
}
td.turnir.turH {
    font-size: 5vh;
    font-family: rubik;
    background: linear-gradient(to right,transparent 0%,#333333);
    text-shadow: -5px 0 blue, 0 5px blue, 5px 0 blue, 0 -5px blue;
}
td.turnir.teamsList {
    color: #333333;
    font-size: 6vh;
    text-align: center; 
    background:linear-gradient(to right,white,grey);
    border: 5px #003366 outset;
}
button.turnirg {
    height: 18vh;
    width: 90%;
    font-size: 8vh;
    background-color: transparent;
    border: 3px #00ff00 solid;
    color: #00ff00;
}
button.turnirg:hover {
    background-color: #00ff00;
    color: #333333;
}

button.turnirb {
    height: 12vh;
    width: 100%;
    font-size: 4.5vh;
    background-color: transparent;
    border: 3px #990000 solid;
    color: #990000;
}
button.turnirb:hover {
    background-color: #cc0000;
    color: #333333;
}

button.turnira {
    height: 15vh;
    width: 40%;
    font-size: 5vw;
    font-family: varela round;
    background-color: transparent;
    border: 6px #ffff00 outset;
    color: #ffff00;
    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: 3%;
    margin-right: 3%;
}

button.turnira:hover {
    background-color: #ffff00;
    color: #333333;
}
button.turnira.order{
    background-color: transparent;
    border: 6px #ff9900 outset;
    color: #ff9900;
}
button.turnira.order:hover {
    background-color: #ff9900;
    color: #333333;
}

div.orderT {
    width: 100%; 
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 5vh;
    font-family: varela round;
}

button.turDel{
    width: 80%;
    height: 10vh;
    font-size: 5vh;
    font-family: rubik;
    background: radial-gradient(#ff6666,red);
    color: white;
    
}
button.turDel:hover{
    background: radial-gradient(white,#e76868);
    color: #720808;
}

button.turGam{
    width: 80%;
    height: 10vh;
    font-size: 5vh;
    font-family: rubik;
    background: radial-gradient(#63cc60,#08a203);
    color: white;
    margin-bottom: 20px;
    margin-top: 20px;
}
button.turGam:hover{
    background: radial-gradient(white,#59ad56);
    color: #053c0b;
}
/*----------      NEW TURNIR     -----------*/

body.nTurnir {
    margin:0;
    height: 100%;        
    width: 100%;
    background: linear-gradient(white, #40f8f8,white);
    font-family: tahoma;
    color: whitesmoke;
    text-align: center;
}

th.nTurnir {
    font-size: 5vh;
    color: #858540;
    padding: 1%;
    height: 14%;
}
td.nTurnir {
    font-size: 4vh;
    color: #354b65;
    padding: 1%;
    height: 18%;
}
input.nTurnir {
    font-size: 4vh;
    width: 90%;
    text-align: center;
}
label.nTurnir {
    padding: 1%;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    border: 1px #73889f outset;
}
button.nTurnir {
    height: 90%;
    width: 90%;
    font-size: 5vh;
    background-color: transparent;
    border: 5px #3194b9 outset;
    color: #2a7ea2;
    border-radius: 20px;
}
button.nTurnir:hover {
    background-color: #3194b9;
    color: #b7f8f8;
} 

/*----------      ADD TEAMS     -----------*/


button.addTeams {
    margin: 2vh;
    width: 90%;
    font-size: 6vh;
    border: 3px #000000 solid;
    background: radial-gradient(#97ccef,#768c9a);
    color: white;
    margin-bottom: 20px;
}
button.addTeams:hover {
    background: radial-gradient(#0e82cf,#194664);
    color: white;
    box-shadow: 0 0 10px 7px #6394ce;
}

tr.addTeams {
    background: radial-gradient(#cccccc,#97ccef,blue);
}

td.addTeams {
    font-size: 20px;
    width: 50%;
    border: 3px #003399 solid;
    border-radius: 10px;
    padding: 2px;
}
th.addTeams {
    font-size: 22px;
    color: #999999;
    text-align: right;
    font-family: frank ruhl libre;
    border-top: 1px #999999 solid;
    border-bottom: 1px #999999 solid;
}

/*----------       NEW FIXTURE     -----------*/
body.fixture {
    text-align: center;
    background: linear-gradient(#74c87e,#ccffcc,#74c87e);
    font-family: tahoma;
    width: 99.9%;
    font-size: 6vh;
}

input.fixture {
    height: 35vh;
    width: 100%;
    font-size: 7vh;
    text-align: center;
}

option.fixture {
    text-align: center;
}
select.fixture {
    height: 250px;
    width: 100%;
    font-size: 60px;
    text-align: center;
}
button.fixture {
    height: 20vh;
    width: 80%;
    font-size: 7vh;
    background: radial-gradient(#a8b6a6,#273d24);
    color: white;
}
input.fixtureC {
    height: 15vh;
    width: 7vh;
}
button.fixtureDraw {
    height: 8vh;
    width: 50%;
    font-size: 6vh;
    font-weight: bolder;
    background: radial-gradient(#999900,#ffffcc);
    color: #3b363f;
    font-family: amatic sc;
}
td.nfUser,td.nfTeam {
    font-size: 4vh;
    border: 2px #253222 outset;
}
th.nfCatU,th.nfCatT{
    font-size: 5vh;
    padding: 3vh;
    color: red;
    border: 1px #ccffcc groove;
}
th.nfCatS {
    font-size: 5vh;
    padding: 3vh;
    color: red;
}
span.nfScoNum {
    padding: 1px;
}
th.gameData.gen {
    font-size: 3vh;
    background: radial-gradient(#009999,#0066cc);
    border-radius: 10% 10% 40% 40%;
    padding: 1vh;
    color: #d2f1f2;
    font-family: varela round;
}
td.gameData.lg {
    color: #216679;
    font-size: 5vw;
    border: 0.5vh #757951 ridge;
}
td.gameDataDisc {
    font-size: 16px;
    font-family: rubik;
}

/*----------        ADD     -----------*/

body.add {
    background: linear-gradient(#f5dc4a,#f4e8a6,#f5dc4a);
    text-align: center;
}

button.add {
    height: 60%;
    width: 80%;
    font-size: 6vh;
    background-color: transparent;
    border: 1vh #333333 groove;
    border-radius: 150px;
    margin-top: 3vh;
    margin-bottom: 3vh;
    vertical-align: central;
    font-family: varela round;
}

button.add:hover {
    background: linear-gradient(to right,transparent 70%,#666666);
    color: #666666;
}

button.add.club {
    border: 1vh #4d542a groove;
    box-shadow: 0 0 5px 3px #4d542a;
}

img.add {
    width: 5vh;
    height: 5vh;
    border-radius: 5px;
}

button.addB {
    height: 30%;
    width: 90%;
    font-size: 5vh;
    background-color: transparent;
    border: 1vh #ff0000 ridge;
    border-radius: 150px;
    margin-top: 40px;
    margin-bottom: 40px;
    color: #ff0000;
    font-family: rubik
}

button.addB:hover {
    background: linear-gradient(to right,transparent 70%,#ff0000);
    color: #ff3300;
}

td.addU {
    width: 50%;
    font-size: 32px;
    text-align: center;
    font-family: david libre;
    color: #525147;
}

td.addUcat {
    width: 50%;
    font-size: 27px;
    text-align: center;
    font-family: david libre;
    color: #525147;
}
td.addUcat.small {
    width: 100%;
    font-size: 20px;
    text-align: right;
    font-family: david libre;
    color: #0099cc;
}

input.addU {
    height: 80%;
    width: 80%;
    font-size: 27px;
    text-align: center;
    border: 4px #cccccc solid;
    margin: 20px;
}

select.addU {
    height: 70%;
    width: 70%;
    font-size: 25px;
}

button.addU {
    height: 100%;
    width: 90%;
    font-size: 25px;
    text-align: center;
    background: radial-gradient(#daf5dd,#3da747);
}

td.addT {
    height: 20%;
    width: 50%;
    font-size: 6vh;
    text-align: center;
    font-family: david libre;
    color: whitesmoke;
    padding: 1vh;
}

input.addT {
    height: 100%;
    width: 90%;
    font-size: 4vh;
    text-align: center;
    border: 4px #cccccc solid;
}

button.addT {
    height: 15vh;
    width: 90%;
    font-size: 5vh;
    text-align: center;
    margin: 20px;
    background: radial-gradient(#0da716,#506751);
    color: white;
}
button.addT:hover {
    background: radial-gradient(#0da716,#07560c);
    color: white;
    box-shadow: 0 0 5px 1px #daf8dc;
}

/*----------      HALL OF FAME    -----------*/

body.hall {
    margin:0;
    height: 100%;        
    width: 100%;
    background: linear-gradient(#cbb3cf 0%, #ccccff 100%);
    text-align: center;
}
td.hall {
    height: 50%;
    width: 50%;
    color: #d7ecec;
    font-size: 30px;
    background: radial-gradient(#3b0b5f,black);
    border: 4px #333333 solid;
    vertical-align: top;
}
td.hall:hover {
    background: radial-gradient(white,#3b0b5f) ;
    color: #2e1e30;
}

button.hof {
    height: 100%;
    width: 100%;
    color: #d7ecec;
    font-size: 30px;
    background-color: transparent;
    border: 0;
    font-family: David Libre;
}

th.hallTbls {
    font-size: 20px;
}
th.hallRows {
    font-size: 14px;
}
td.hallRows {
    font-size: 14px;
}

/*----------        H O F     -----------*/

body.hof {
    background-color: #333333;
}

th.hof1 {
    font-size: 5vh;
    padding: 2px;
    border: 1px solid #666666;
    border-radius: 20px;
    color: white;
    height: 10vh;
    width: 12%;
    font-family:amatic sc;
}

th.hof {
    font-size: 5vh;
    color: white;
    font-family: amatic sc;
    padding: 2px;
    border: 2px solid #666666;
    background: radial-gradient(#6e94a4,#4d99ba);
}

td.hof {
    font-size: 4vh;
    padding: 2px;
    border: 2px solid #999999;
    height: 10vh;
    text-align: center;
    width: 10%;
    font-family: Varela Round;
}
tr.hofTr {
    background: linear-gradient(to right, #d5e4f8, #a8cbfb);
}
tr.hofO{
    background: linear-gradient(to left, #999999, #ccccff);
    color: #333333;
}

tr.hof {
    color: #330099;
    background: linear-gradient(to left, white, #cccccc);
}

td.hof1 {
    font-size: 4.5vw;
    padding: 2px;
    border: 2px solid #ccccff;
    border-radius: 60px;
    height: 10vh;
    text-align: center;
    background: radial-gradient(#666666,#333333);
    
}
td.hof1.name {
    font-size: 5vw;
    background: radial-gradient(whitesmoke,#333333);
}
td.hof1.name.myself {
    background: radial-gradient(#e5cdf4,#333333);
}
a.hof1.name {
    color: #35016c;
    font-family: rubik;
}
a.hof1.name:hover {
    color: #ccccff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
td.hof1.games {
    background: radial-gradient(#666666,#333333);
}
td.hof1.perc {
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    height:4vh;
    font-weight: 500;
}

td.hof2 {
    font-size: 15px;
    padding: 2px;
    border: 2px solid #999999;
    text-align: center;
    width: 20%;
    color: #ccccff;
}

tr.turID {
    font-size: 5vh;
    font-family: amatic sc;
    color: white;
    text-align: center;
    text-shadow: -2px 0 #c2c2c1, 0 2px #c2c2c1, 2px 0 #c2c2c1, 0 -2px #c2c2c1;
}
td.turID {
    padding: 2%;
}
div.turID {
    background: radial-gradient(#064545,#27c1c1,#194f4f);
    padding: 0;
    margin: 1%;
    border-radius: 30%;
}

select.hofixt {
    width: 30%;
    margin: 1.5vh;
    margin-right: 0;
    margin-left: 5%;
    height: 7vh;
    border: 3px #00cccc solid;
    font-size: 3vh;
}

button.hof2 {
    width: 15%;
    height: 7vh;
    background-color: 3px #00cccc solid;
    font-size: 4vh;
}

tr.hof3.h {
    background: linear-gradient(to right, #f9d2f9 ,#c084d7); 
    height: 9vh;
}

tr.hof3.a {
    background: linear-gradient(to right,whitesmoke,#f9f2ac);
}
tr.hof3.b {
    background: linear-gradient(to right,grey,#ccccff);
}

th.hof3 {
    font-size: 3.5vh;
    font-family: varela round;
    border-radius: 80px 20px 50px;
    padding: 1vw;
    color: #363a44;
}
td.hof3 {
    font-size: 4vh;
    padding: 1vw;
    height: 7vh;
    text-align: center;
}
a.hof3.tid{
    font-weight: 600;
    font-family: david libre;
    color: #5a535e;
    padding: 5px;
}
a.hof3.tid:hover{
    font-weight: 800;
    color: #1f1b21;
}
a.hof3.chmp{
    font-weight: 600;
    font-family: frank ruhl libre;
    color: #686226;
}
a.hof3.chmp:hover{
    font-weight: 800;
    color: #252205;
}
a.hof3.sgan{
    font-weight: 600;
    font-family: frank ruhl libre;
    color: #724f08;
}
a.hof3.sgan:hover{
    font-weight: 800;
    color: #995b06;
}

th.hof.place {
    width:1%; 
    color:#ffffff; 
    font-size: 4vw;
    font-family: varela round;
    border: 1px #6666ff solid;
}

th.hof4 {
    font-size: 7vw;
    color: white;
    font-family: amatic sc;
    padding: 2px;
    border: 2px solid #666666;
    height: 12vh;
    background: radial-gradient(#6e94a4,#4d99ba);
}

td.hof4 {
    font-size: 4vw;
    padding-bottom: 1vh;
    padding-top: 1vh;
    border: 2px solid #999999;
    height: 10vh;
    text-align: center;
    width: 10%;
    font-family: Varela Round;
}

button.hof4 {
    width: 31%;
    font-size: 5vh;
    padding: 5px;
    font-family: david libre;
    border: 2px #333333 outset;
}

button.hof4.t {
    color: yellow;
    background-color: black;
}
button.hof4.n {
    color: #3399ff;
    background-color: #ffffff;
}
button.hof4.a {
    color: #66ffff;
    background-color: #666666;
}
button.hof4.back {
    width: 100%;
    color: #333333;
    background: radial-gradient(white,red);
    border: 4px #990000 ridge;
}
img.hofSym {
    height: 4vh;
    width: 30%;
    margin-top: 5px;
    opacity: 0.9;
}

/*----------      TEAM       ----------*/

h1.team {
    font-size: 7vh;
    background: linear-gradient(to right,#8e9091,#94dffb);
    color: whitesmoke;
    border-radius: 10px;
    font-family: Frank Ruhl Libre;
}
img.teamSym {
    height: 8vh;
    width: 22%;
    opacity: 0.9;
}

tr.teamCat {
    font-size: 4vh;
    background: radial-gradient(#c7dedb,white);
    color: #666666;
    padding: 10px;
}

tr.teamStat {
    font-size: 4vh;
    font-weight: 600;
    background-color: #00ffcc;
    padding: 10px;
    height: 7vh;
}

th.team {
    font-size: 3.5vh;
    background: linear-gradient(to left,#cccccc,white);
    color: #666666;
    padding: 1vh;
    width: 50%;
}

td.team {
    font-size: 4vh;
    font-weight: 600;
    background-color: #00ffcc;
    padding: 2vh;
    height: 8vh;
}

button.teamGames {
    width: 60%;
    font-size: 4vh;
    padding: 5px;
    font-family: rubik;
    background: radial-gradient(#63cc60,#08a203);
    color: white;
    margin-bottom: 10px;
}
button.teamGames:hover {
    background: radial-gradient(white,#59ad56);
    color: #053c0b;
}

img.teamEdit {
    width: 20%;
}

/*----------      USER       ----------*/
h1.user {
    font-size: 7vh;
    background: linear-gradient(to right,#8e9091,#94dffb,#8e9091);
    color: whitesmoke;
    font-family: Frank Ruhl Libre;
    text-shadow: 2px 2px #333333, 0 0 20px black;
}

tr.userCat {
    font-size: 4.5vh;
    background: radial-gradient(#c7dedb,white);
    color: #666666;
    padding: 10px;
}

tr.userStat {
    font-size: 5.5vh;
    font-weight: 600;
    background-color: #00ffcc;
    padding: 10px;
    height: 5vh;
}

td.user {
    font-size: 4vh;
    font-weight: 600;
    background: radial-gradient(#ebecea,#d2d4d2);
    padding: 10px;
    height: 8vh;
}
th.user {
    font-size: 3vh;
    background: linear-gradient(to left,#cccccc,white);
    color: #666666;
    padding: 10px;
    width: 50%;
}
tr.user {
    background: radial-gradient(circle,#d1d3d1,#5b5c5a);
    color: gold;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}
td.user.pos.res {
    font-size: 3vh;
    font-weight: 600;
    background: radial-gradient(#8cb48f,#3c6040) ;
    padding: 10px;
    height: 9vh;
    color: whitesmoke;
}
td.user.neg.res {
    font-size: 3vh;
    font-weight: 600;
    background: radial-gradient(#daa1a6,#a0495c) ;
    padding: 10px;
    height: 9vh;
    color: whitesmoke;
}
td.user.pos.win {
    font-size: 3vh;
    font-weight: 600;
    background: linear-gradient(to left,#86b195,#78e19b 30%) ;
    padding: 1vw;
    height: 9vh;
}
td.user.neg.win {
    font-size: 3vh;
    font-weight: 600;
    background: linear-gradient(to right,#fbcdd1,#f58693 30%) ;
    padding: 10px;
    height: 9vh;
}
td.user.pos.gol {
    font-size: 3vh;
    font-weight: 600;
    background: linear-gradient(to left,#879b87,#b5c6b5 30%) ;
    padding: 10px;
}
td.user.neg.gol {
    font-size: 3vh;
    font-weight: 600;
    background: linear-gradient(to right,#a48d92,#cbaab1 30%) ;
    padding: 1vw;
}
td.userTeams {
    font-size: 5.5vh;
    font-weight: 600;
    padding: 1vh;
    height: 9vh;
    width: 25%;
}
a.userRes {
    color: white;
}
tr.catFav {
    font-size: 5vh;
    background: radial-gradient(circle,#a6bdc3,black);
    color: #e3c9ad;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    font-family: david libre;
}
th.catFav {
    padding: 1vh;
}
tr.userFav{
    background: linear-gradient(to right,#666666,#cfdadc 2%,#cfeef5 98%,#666666);
}
td.userFav {
    font-size: 4vh;
    width: 50%;
    padding: 0.5vh;
}
td.userFav.perc {
    border: 3px #c2f0fb inset;
}