body {

    color: #544442;
}



.table-responsive {
  display: flex;
  justify-content: center;
  align-items: center;
}

.table-responsive tr {
    line-height: 2vw !important;
    font-size:1.5vw !important;
}
.table-responsive td {
    text-align:center !important;
}

.table-responsive thead {
    font-size:2vw !important;
    color: #8F0000 !important;
}


.topic {
    margin-bottom:35px;
    font-size: 25px;
}

@font-face {
font-family: '8bit_regular';
font-weight: normal;
src: local('8bit_regular'), url('/8bit_regular.woff') format('woff');
}

@font-face {
font-family: '8bit';
font-weight: normal;
src: local('8bit'), url('/8bit.woff') format('woff');
}

@font-face {
font-family: 'mrhorror';
font-weight: normal;
src: local('mrhorror'), url('/mrhorror.light.woff') format('woff');
}


.fightButton {
      border: 2px solid #f44336;
    font-size:1.25em !important;
    background: none;
    color: #f44336;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
outline:none;
}

.fightButton:hover {

    background: #f44336;
    color: white;


}

#firstRow {
    color: #FFD700 !important;
}
#secondRow {
    color: #E5E4E2 !important;
}
#thirdRow {
    color: #CD7F32 !important;
}

/* Adding transformation when the button is active */
.fightButton:active {
    transform: scale(0.88);
    /* Scaling button to 0.98 to its original size */
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
    color:black;
    /* Lowering the shadow */
}


h1,h2,h3, table {
	font-family: '8bit' !important;
}

body p, h1,li,h4{
	font-family: '8bit_regular' !important;
}

#totalKills {
      display: flex;
  justify-content: center;
  align-items: center;
}

#totalKillsText {
      text-align:center;
      color: #9c0e0ed6;
      font-size:2vw;
      
}

tbody tr:first-child th,
tbody tr:first-child td {
    padding-top: 20px;
}

tbody td,
tbody th {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.1;
}

#firstRow td:nth-child(2)::before {
    content: "👑 ";
}
@media only screen and (max-width: 600px) {
  .table-responsive thead {
    font-size:20px !important;
}




.table-responsive tr {
    line-height: 4vh !important;
    font-size:3.15vh !important;
}

.table-responsive thead {
    font-size:4vh !important;
}


#totalKillsText {
      text-align:center;
      font-size:25px;
      
      
}

#rollingNumber {
    font-weight:bold !important;
}



}