html {
    height: 100%;
    width: 100%;
    min-height: 100%;
}

nav {
    margin-top: 0px;
    margin-right: 12px;
    margin-bottom: 0px;
    margin-left: 12px;
    display: flex;
    justify-content: space-between;
}

footer {
    margin-top: 0px;
    margin-right: 12px;
    margin-bottom: 12px;
    margin-left: 12px;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
}

body { /* The text in the honor roll tables */
    min-height: 100vh;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-family: ms gothic;
    font-size: 48px;
    font-weight: bold;
    color: #61B2ED;
    display: flex;
    flex-direction: column;
}

h1 { /* The main flash card text */
    font-family: ms gothic;
    font-size: 96px;
    font-weight: bold;
    color: #61B2ED;
    text-align: center;
}

h2 { /* The Honor Roll text */
    font-family: ms gothic;
    font-size: 36px;
    font-weight: bold;
    color: #61B2ED;
    text-align: center;
}

p { /* The following text blocks: Irasshaimase, Counter, Hi-score, and "Buy me a" */
    margin-top: 12px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-family: ms gothic;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    display: inline-block;
}

a { /* The following text blocks: Honor Roll, コーヒー */
    margin-top: 12px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-family: ms gothic;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    text-decoration: #61B2ED wavy underline;
    display: inline-block;
}

button { /* Inner text of buttons */
    height: 100px;
    width: 400px;
    color: #000000;
    font-family: ms gothic;
    font-size: 24px;
    font-weight: normal;
    background-color: #61B2ED;
    border-radius: 10%;
    cursor: pointer;
    transition-duration: 0.2s;
}

button:hover { /* Color of button while hovering */
    color: #FFFFFF;
    background-color: #D78BF2;
}

form {
    margin-top: 12px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    display: inline-block;
}

input {
    width: 100px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-family: ms gothic;
    font-size: 20px;
    font-weight: bold;
    color: #000000; /* Color of text inside username box */
    /* border: none; */
    border: 1px solid #61B2ED; /* Border around outside of Username and Themes input and button */
}

input[type=submit] {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding: 0px 0px;
    color: #FFFFFF; /* Color of text inside of Play and Assign boxes */
    text-decoration: none;
    background-color: #61B2ED; /* Color inside of Play and Assign boxes */
    cursor: pointer;
}

label {
    margin-top: 2px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-family: ms gothic;
    font-size: 20px;
    font-weight: bold;
    color: #000000; /* Color of text "Username:" and "Themes:" */
}

select {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-family: ms gothic;
    font-size: 20px;
    font-weight: bold;
    color: #000000; /* color of text inside Themes dropdown e.g. "Akachan" */
    border: 1px solid #61B2ED; /* Border around outside of Username and Themes input and button */
}

table {
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-left: 10px;
    font-family: ms gothic;
    font-size: 24px;
    width: 500px;
    border-collapse: collapse;
}
    
th, td {
    font-family: ms gothic;
    font-size: 24px;
    border: 2px solid #D78BF2; /* Leaderboard page, color of vertical dividers and top row */
    width: 250px;
    overflow: hidden;
    padding: 8px;
    text-align: left;
    height:36px;
    border-bottom: 2px solid #D78BF2; /* Leaderboard page, color of all rows aside from top row */
}

.center {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

.flex {
    display: flex;
    flex-direction: row;
}

#gradientBackground {
    height: 100%;
    background-color: #FFFFFF; /* for browsers that do not support gradients */
    background-image: linear-gradient(#FEB4C7, #FFFFFF, #8EC7F2);
}

.FloatingCombatText {
    display: inline-block;
    font-family: ms gothic;
    font-size: 20px;
    color: #008000; /* does not change with themes */
    animation: fighting 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    transform-origin: center;
    animation-fill-mode: forwards;
}

@keyframes fighting {
    0% {
    transform: scale(0) translateY(0%);
    opacity: 0;
    }
    10% {
    opacity: 1;
    transform: scale(1) translateY(-50%);
    }
    100% {
    transform: translateY(-100%) rotateZ(15deg);
    opacity: 0;
    visibility: hidden;
    }
}