styles.css

@font-face {
    font-family: 'Arcade_I';
    src: url(fonts/ARCADE_I.TTF);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'Arcade_N';
    src: url(fonts/ARCADE_N.TTF);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'Arcade_R';
    src: url(fonts/ARCADE_R.TTF);
    font-style: normal;
    font-weight: 100;
}

body {
    max-width: 500px;
    margin: auto;
}

.Title {
    display: flex;
    text-align: center;
    justify-content: center;
}


.RoundScoreImageParentContainer {
    display: flex;
    justify-content: center;
}

.roundContainerDiv {
    padding-right: 10%;
    padding-bottom: 0%;
}

.imageContainer {
    width: 600px;
    margin: 0, auto;
}

/* @media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)  {

	.creator {
		visibility: hidden;
	}
	
	.creator a {
		visibility: hidden;
	}
	
	.creator a:hover {
		visibility: hidden;
	}
	
	.footer {
		visibility: hidden;
	}
  } */

/* @media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)  {

	#boxArt{
		max-width: 70%;
		max-height: 70%;
		padding-left: 14%;
	}
  } */

#boxArt {
    max-width: 75%;
    max-height: 75%;
    padding-left: 12%;
}

.ScoreBoard {
    padding-left: 5%;
}

.winnablePointsContainer {
    padding-right: 30px;
}

h1 {
    font-size: xx-large;
    font-family: Arcade_I;
    font-weight: 100;
    text-align: center;
    color: blue;
}

h2 {
    font-family: Arcade_N;
    font-weight: 100;
    text-align: center;
    color: brown;
}

h3 {
    font-family: Arcade_N;
    font-weight: 100;
    text-align: center;
    color: brown;
}

h4 {
    font-family: Arcade_R;
    font-weight: 100;
    text-align: center;
    color: brown;
}

.ScoreBoard {
    text-align: center;
}


.ButtonsContainer {
    text-align: center;
    display: row;
}

.NextButton {
    display: flex;
}

.StartButtonContainer {
    display: flex;
}

#startGame {
    margin: auto;
    box-shadow: inset 0px 1px 0px 0px #fbafe3;
    background: linear-gradient(to bottom, #ff5bb0 5%, #ef027d 100%);
    background-color: #ff5bb0;
    border-radius: 6px;
    border: 1px solid #ee1eb5;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #c70067;
}

#startGame:hover {
    background: linear-gradient(to bottom, #ef027d 5%, #ff5bb0 100%);
    background-color: #ef027d;
}

#startGame:active {
    position: relative;
    top: 1px;
}

#nextGame {
    margin: auto;
    box-shadow: inset 0px 1px 0px 0px #fbafe3;
    background: linear-gradient(to bottom, #ff5bb0 5%, #ef027d 100%);
    background-color: #ff5bb0;
    border-radius: 6px;
    border: 1px solid #ee1eb5;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #c70067;
}

#nextGame:hover {
    background: linear-gradient(to bottom, #ef027d 5%, #ff5bb0 100%);
    background-color: #ef027d;
}

#nextGame:active {
    position: relative;
    top: 1px;
}

.AnswerButton1 {
    text-align: center;
    box-shadow: inset 0px 1px 0px 0px #e184f3;
    background: linear-gradient(to bottom, #c123de 5%, #a20dbd 100%);
    background-color: #c123de;
    border-radius: 6px;
    border: 1px solid #a511c0;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #9b14b3;
}

.AnswerButton1:hover {
    background: linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
    background-color: #a20dbd;
}

.AnswerButton1:active {
    position: relative;
    top: 1px;
}

.AnswerButton2 {
    text-align: center;
    box-shadow: inset 0px 1px 0px 0px #a4e271;
    background: linear-gradient(to bottom, #89c403 5%, #77a809 100%);
    background-color: #89c403;
    border-radius: 6px;
    border: 1px solid #74b807;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #528009;
}

.AnswerButton2:hover {
    background: linear-gradient(to bottom, #77a809 5%, #89c403 100%);
    background-color: #77a809;
}

.AnswerButton2:active {
    position: relative;
    top: 1px;
}

.AnswerButton3 {
    text-align: center;
    box-shadow: inset 0px 1px 0px 0px #97c4fe;
    background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
    background-color: #3d94f6;
    border-radius: 6px;
    border: 1px solid #337fed;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #1570cd;
}

.AnswerButton3:hover {
    background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
    background-color: #1e62d0;
}

.AnswerButton3:active {
    position: relative;
    top: 1px;
}

.AnswerButton4 {
    text-align: center;
    box-shadow: inset 0px 1px 0px 0px #f5978e;
    background: linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
    background-color: #f24537;
    border-radius: 6px;
    border: 1px solid #d02718;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #810e05;
}

.AnswerButton4:hover {
    background: linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
    background-color: #c62d1f;
}

.myAnswerButton4Button:active {
    position: relative;
    top: 1px;
}

/* ******************** */
/* ////// FOOTER ///// */
/* ****************** */
.creator {
    display: row;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: cyan;
    font-size: 1em;
    padding-top: 0px;
}

.creator a {
    color: cyan;
    text-decoration: underline;
}

.creator a:hover {
    color: rgb(238, 92, 92);
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(146, 90, 90);
    color: white;
    text-align: center;
}

.leaderboardLink {
    color: cyan;
}

/* *********************** */
/* LEADERBOARDS */
/* *********************** */

.leaderBoardTitle {
    font-size: xx-large;
    font-family: Arcade_I;
    font-weight: 100;
    text-align: center;
    color: blue;
}

.tableHead1 {
    font-family: Arcade_N;
    font-weight: 100;
    text-align: center;
    border: 1px solid rgb(136, 36, 111);
    padding: 8px;
    color: rgb(255, 251, 4);
    background-color: rgb(255, 0, 221)
}

.tableHead2 {
    font-family: Arcade_N;
    font-weight: 100;
    text-align: center;
    width: 100px;
    border: 1px solid rgb(136, 36, 111);
    padding: 8px;
    color: rgb(255, 251, 4);
    background-color: rgb(255, 0, 221)
}

.tableHead3 {
    font-family: Arcade_N;
    font-weight: 100;
    text-align: center;
    border: 1px solid rgb(136, 36, 111);
    padding: 8px;
    color: rgb(255, 251, 4);
    background-color: rgb(255, 0, 221)
}



#tabla {
    text-align: center;
    justify-content: center;
    /* font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-collapse: collapse;
    width: 100%;
    font-size: large;
}

#tabla td,
#tabla th {
    border: 1px solid rgb(136, 36, 111);
    padding: 8px;
}

#tabla tr:nth-child(even) {
    background-color: #eaff0070;
}

#tabla tr:hover {
    background-color: rgb(221, 221, 221);
}

#tabla th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}