* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

html {
	font-size: 20px;
}

body {
	align-items: center;
    justify-content: center;
    transition: 0.25s ease-in-out;
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
}

body #canvasHolder {
    position: relative;
    text-align: center;
}

body #canvasHolder .accBtn {
    position: relative;
    margin: 10px;
    padding: 10px;
    cursor: pointer;
    background-color: rgba(77, 27, 255, 100);
    color: rgb(255, 255, 255);
    width: 15%;
    border-radius: 10px;
    outline: none;
    transition: 0.25s ease-in-out;
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
}

body #canvasHolder .accBtn:disabled {
    background-color: grey;
}

body #canvasHolder .accBtn:hover:not(:disabled) {
    background-color: rgba(115, 88, 255, 100);
    color: rgb(10, 10, 10);
}

body input {
    width: 25%;
    font-size: 1rem;
    padding: 8px;
    border: none;
    border-bottom: 1px solid black;
    border-radius: 10px;
    background-color: rgb(59, 204, 202);
    box-shadow: 5px 5px 5px black;
}

body input:focus {
    outline: none;
}

body #canvasHolder #account {
    visibility: hidden;
    position: absolute;
    width: 100%;
    height: 50%;
    transform: translateY(45%);
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -ms-transform: translateY(45%);
    z-index: 10000;
}

body #canvasHolder #signup {
    visibility: hidden;
    position: absolute;
    width: 100%;
    height: 50%;
    transform: translateY(45%);
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -ms-transform: translateY(45%);
    z-index: 10000;
}
body #canvasHolder #signup #backBtn {
    margin: 20px;
    cursor: pointer; 
    width: 10%; 
    text-align: center; 
    background-color: antiquewhite; 
    color: black;
    border-radius: 15px;
    transition: 0.25s ease-in-out;
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
}

body #canvasHolder #signup #backBtn:hover {
    background-color: rgb(54, 54, 54); 
    color: white;
}

body #canvasHolder #signup #accChecked,
body #canvasHolder #signup #fieldChecked,
body #canvasHolder #account #signInChecked {
    color: red;
    visibility: hidden;
    margin: 20px;
}

canvas {
    display: block;
    width: 100% !important;
    height: 100vh !important;
}

@media (max-width: 768px) {
    canvas {
        height: 100% !important;
    }
}

/* TABLE */
body #canvasHolder #tableDisplay,
body #bgColour {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, top, bottom, from(rgb(55, 162, 204)), to(#69da65));
    background-image: linear-gradient(to bottom, rgb(55, 162, 204), #69da65);
    background-repeat: no-repeat;
    background-size: cover;
    user-select: none;
    -moz-user-select: none;
    cursor: context-menu;
    transition: 0.25s ease-in-out;
        -webkit-transition: 0.25s ease-in-out;
        -moz-transition: 0.25s ease-in-out;
        -ms-transition: 0.25s ease-in-out;
        -o-transition: 0.25s ease-in-out;
}

body #canvasHolder #tableDisplay #tableContainer {
    position: absolute;
    top: 0;
    transform: translate(50%, 50%);
    top: 0;
    left: 0;
    width: 50%;
    max-height: 50%;
    background: rgba(27, 27, 27, 0.95);
    overflow-y: scroll;
}

body #canvasHolder #tableDisplay #tableContainer table {
    position: relative;
    border-collapse: collapse;
    border-spacing: 2px;
    border: 2px solid rgb(243, 255, 82);
    width: 100%;
    color: white;
    border: 2px solid #dee2e6;
}

body #canvasHolder #tableDisplay #tableContainer table th {
    color: white;
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    padding: 0.75rem;
    text-align: inherit;
}

body #canvasHolder #tableDisplay #tableContainer table tbody {
    color: gray;
}

body #canvasHolder #tableDisplay #tableContainer table tbody td {
    border: 2px solid #dee2e6;
    padding: 0.75rem;
    vertical-align: top;
}

/* LEADERBOARD BUTTON */
body #canvasHolder #leaderboardBtn {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: 50%;
    transform: translateX(50%);
        -webkit-transform: translateX(50%);
        -moz-transform: translateX(50%);
        -ms-transform: translateX(50%);
    text-align: center;
}

body #canvasHolder #backBtn2 {
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 20px;
    cursor: pointer; 
    width: 10%; 
    text-align: center; 
    background-color: antiquewhite; 
    color: black;
    border-radius: 15px;
    transition: 0.25s ease-in-out;
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
}

body #canvasHolder #backBtn2:hover {
    background-color: rgb(39, 39, 39); 
    color: white;
}

body #canvasHolder #leaderboardBtn #leaderboardBtnContainer {
    position: relative;
    width: 50%;
    color: white;
    background-color: black;
    font-size: 1rem;
    margin: auto;
    padding: 2.5px;
    cursor: pointer;
    border-radius: 10px;
    transition: 0.25s ease-in-out;
        -webkit-transition: 0.25s ease-in-out;
        -moz-transition: 0.25s ease-in-out;
        -ms-transition: 0.25s ease-in-out;
        -o-transition: 0.25s ease-in-out;
}

body #canvasHolder #leaderboardBtn #leaderboardBtnContainer:hover {
    color: rgb(43, 43, 43);
    background-color: rgb(255, 255, 255);
}

body #canvasHolder #leaderboardBtn #modeBtn {
    visibility: hidden;
    position: absolute;
    bottom: 0;
    width: 50%;
    transform: translateX(50%);
        -webkit-transform: translateX(50%);
        -moz-transform: translateX(50%);
        -ms-transform: translateX(50%);
    text-align: center;
}
body #canvasHolder #leaderboardBtn #mode1 {
    float: left;
    clear: left;
}

body #canvasHolder #leaderboardBtn #mode2 {
    float: right;
    clear: right;
}

body #canvasHolder #leaderboardBtn #mode1,
body #canvasHolder #leaderboardBtn #mode2 {
    position: relative;
    width: 50%;
    color: white;
    background-color: rgb(44, 44, 44);
    font-size: 1rem;
    margin: auto;
    padding: 2.5px;
    cursor: pointer;
    transition: 0.25s ease-in-out;
        -webkit-transition: 0.25s ease-in-out;
        -moz-transition: 0.25s ease-in-out;
        -ms-transition: 0.25s ease-in-out;
        -o-transition: 0.25s ease-in-out;
}

body #canvasHolder #leaderboardBtn #mode1:hover,
body #canvasHolder #leaderboardBtn #mode2:hover {
    color: rgb(46, 46, 46);
    background-color: white;
}

/* PLACEHOLDER */
::placeholder {
    color: black;
    font-size: 0.75rem;
    opacity: 0.75; /* Firefox */
  }
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: black;
    font-size: 0.75rem;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: black;
    font-size: 0.75rem;
}

/* scroll bar */

/* width of the entire scrollbar */
#tableContainer::-webkit-scrollbar {
    width: 12px;
}

/* color of the tracking area */
#tableContainer::-webkit-scrollbar-track {
    border-radius: 20px;
    background: rgb(0, 0, 0);
}


#tableContainer::-webkit-scrollbar-thumb{
    background-color: rgb(59, 204, 202);    /* color of the scroll thumb */
    border-radius: 20px;       /* roundness of the scroll thumb */
    border: 2px solid rgb(0, 0, 0);  /* creates padding around scroll thumb */
}

@media only screen and (max-width: 650px) {
	html {
		font-size: 2.5vw;
    }

    body #canvasHolder #account {
        visibility: hidden;
        position: absolute;
        width: 100%;
        height: 50%;
        transform: translateY(-5%);
        -webkit-transform: translateY(-5%);
        -moz-transform: translateY(-5%);
        -ms-transform: translateY(-5%);
        z-index: 10000;
    }

    body #canvasHolder #signup {
        visibility: hidden;
        position: absolute;
        width: 100%;
        height: 50%;
        transform: translateY(-5%);
        -webkit-transform: translateY(-5%);
        -moz-transform: translateY(-5%);
        -ms-transform: translateY(-5%);
        z-index: 10000;
    }

}