a {
    user-select: none;
}

a.close-button {
    align-items: flex-end;
    color: #111;
    display: flex;
    flex-direction: column;
    height: 20px;
    padding-right: var(--padding-medium) !important;
    margin-top: calc(var(--padding) * -1) !important;
    margin-bottom: var(--padding-large) !important;
    width: 100%;
}

a.link-button:link, a.link-button:visited {
    color: white;
    background-color: var(--color-default-dark);
    border: solid 4px #111111;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: var(--padding);
    font-family: interface-bold;
    font-size: var(--text-size-copy);
    border-radius: 10px;
}

a.link-button:hover {
    background-color: #333333;
    border-color: #333333;
}

a.link-button-secondary:link, a.link-button-secondary:visited {
    color: var(--color-default-dark);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: var(--padding);
    font-family: interface-bold;
    font-size: var(--text-size-copy);
}

a.link-button-secondary:hover {
    color: #333333;
}

a.link-tab:link, a.link-tab:visited {
    color: white !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: var(--padding) 0;
    font-family: interface-bold;
    font-size: var(--text-size-copy);
    border-bottom: 4px solid #111111;
}

a.link-tab:hover {
    border-bottom: 4px solid lightgray;
}

.link-selected {
    pointer-events: none !important;
    cursor: default !important;
    border-bottom: 4px solid white !important;
}

body {
    align-items: center;
    font-family: interface-regular;
    font-size: var(--text-size-copy);
    font-weight: var(--font-weight-medium);
    margin: auto;
    padding: 0 var(--padding) 0 var(--padding);
    width: 375px;
}

footer {
    align-items: center;
    background-color: var(--color-default-dark) !important;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 80px;
    position: fixed;
    width: 375px;
    white-space: nowrap;
    bottom: 0;
}

/* footer a {
    flex: 1 1 0;
    margin: 0 4px;
} */

header {
    align-items: center;
    background-color: white;
    display: flex;
    flex-direction: column;
    font-family: interface-black;
    font-size: var(--text-size-subheader);
    justify-content: center;
    height: 146px;
    position: fixed;
    width: 375px;
    white-space: nowrap;
    top: 0;
}

main {
    padding-bottom: var(--padding-xlarge);
    margin-top: 156px;
    overflow: hidden;
}

select {
    background-color: white;
    margin: var(--padding-medium) 0;
    padding: var(--padding-medium);
    font-family: interface-regular;
    border: solid 4px #111111;
    border-radius: 10px;
    outline: none;
    resize: none;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../resources/clown-small.svg) 96% / 7% no-repeat #EEE;
}

header svg {
    margin-bottom: var(--padding-medium);
}

.info-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.info-version {
    display: flex;
    justify-content: flex-start;
    font-family: interface-black;
    font-size: var(--text-size-copy);
    width: 45px;
}

.emphasis {
    font-family: interface-bold;
    font-size: var(--text-size-copy);
}

.clown {
    cursor: pointer;
    height: 50px;
    width: 50px;
}

.disabled {
    cursor: not-allowed !important;
    opacity: .5;
    pointer-events: none;
}

.hidden {
    display: none !important;
}

.history {
    border-bottom: solid 4px #111111;
    font-family: interface-regular;
    font-size: var(--text-size-copy);
    padding: var(--padding-medium) 0 var(--padding-large) 0;
    margin-bottom: var(--padding-medium);
    width: 100%;
}

.identify {
    display: block;
    padding: var(--padding-medium) var(--padding-large);
}

.identify:first-of-type {
    padding-top: calc(var(--padding-medium) + var(--padding));
}

.identify:last-of-type {
    padding-bottom: calc(var(--padding-medium) + var(--padding));
}

.identify:hover {
    background-color: #efefef;
  }
  
.identify-selected {
    color: white;
    background-color: var(--color-default-dark) !important;
}

.min-width {
    min-width: 220px;
}

.modal {
    background-color: rgba(0,0,0,0.8);
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.modal a {
    width: 95%;
    margin-top: var(--padding-medium);
}

.modal h4 {
    font-family: interface-black;
    font-size: var(--text-size-subheader);
    margin: 0 0 var(--padding-large) 0;
}

.modal textarea {
    border: solid 4px #111111;
    border-radius: 10px;
    font-family: interface-regular;
    padding: var(--padding);
    margin: 0 0 var(--padding-medium) 0;
    min-height: 75px;
    outline: none;
    resize: none;
    width: 95%;
}

.modal section {
    overflow: scroll;
}

.modal-content {
    align-items: center;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    font-family: interface-bold;
    font-size: var(--text-size-copy);
    /* max-height: 90%; */
    margin: 5% auto 5% auto;
    padding: var(--padding-large) var(--padding-medium) var(--padding-large) var(--padding-medium);
    width: 340px;
}

.numInput-container {
    align-items: center;
    border: solid 4px #111111;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    font-family: interface-regular;
    font-size: var(--text-size-copy);
    justify-content: space-between;
    padding: var(--padding-medium);
    margin: calc(var(--padding-medium) * -1) 0 calc(var(--padding-large) + var(--padding-medium)) 0;
    width: 90%;
}

.numInput-container a {
    align-items: center;
    color: #000;
    display: flex;
    flex-direction: column;
    height: 20px;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 20px;
}

.player {
    background-color: white;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-family: interface-light;
    font-size: var(--text-size-copy);
    padding: var(--padding-medium) var(--padding) var(--padding-medium) var(--padding-medium);
    margin: 0 var(--padding-medium) var(--padding-medium) var(--padding-medium);
    justify-content: space-between;
}

#ratifiers-container {
    margin-bottom: var(--padding-large);
}

.container-message {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: interface-light;
    font-size: calc(var(--text-size-subheader) * 0.9);
    justify-content: center;
    margin-top: calc(var(--padding-xlarge) * 4);
}

.g_id_signin {
    margin-top: var(--padding-large);
}

.row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.summary-button {
    cursor: pointer;
    margin: 2px 10px 0 0;
}

.summary-button:last-of-type {
    margin: 2px 0 0 10px;
}

.stack {
    display: flex;
    flex-direction: column;
}

.stack:last-child {
    margin-left: var(--padding);
}

.strike-count {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: interface-black;
    font-size: calc(var(--text-size-subheader) * 0.85);
    margin-right: var(--padding);
}

.strike-name {
    font-size: calc(var(--text-size-subheader) * 0.85);
    padding: var(--padding) 0;
}

.theme {
    font-family: interface-regular;
    font-size: var(--text-size-tiny);
    margin-top: var(--padding);
    text-align: center;
}

.timer-background {
    margin: var(--padding-medium) auto var(--padding-medium) auto;
}

.top-bumper {
    margin-top: calc(var(--padding) * 2);
}

.vote {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: var(--padding-large) var(--padding-medium) var(--padding-medium) var(--padding-medium);
    margin: 0 var(--padding-medium) var(--padding-medium) var(--padding-medium);
    justify-content: space-between;
}

@keyframes emph { 
    0% {
        transform: scale(1.0);
    }
    95% {
        transform: scale(0.97);
    }
    965% {
        transform: scale(1.0);
    }
    98% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1.0);
    }
}

.vote-emphasis { animation: emph 0.5s }

.v-count {
    text-align: center;
    margin: var(--padding) 0 var(--padding-medium) 0;
}

.v-enabled {
    background-color: white;
    border: solid 4px #111111;
}

.v-disabled {
    background-color: #efefef;
}

#container-awaken {
    background-color: var(--color-default-dark);
    color: white;
    display: flex;
    flex-direction: column;
    font-family: interface-black;
    font-size: var(--text-size-header);
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

#container-identify {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: interface-black;
    font-size: var(--text-size-copy);
}

#container-identify a {
    width: 90%;
    margin-top: var(--padding-medium);
}

#container-leaderboard {
    background-color: #efefef;
    height: 100%;
    padding: var(--padding-medium) 0;
}

#history-details {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 0 var(--padding);
}

/* 
TODO: Get rid of
#stats-current {
    background-color: #efefef;
    height: 100%;
    padding: var(--padding-medium) 0;
} */

#message-body {
    font-family: interface-regular;
}

#players-identify {
    border: solid 4px #111111;
    border-radius: 10px;
    font-family: interface-regular;
    margin: var(--padding-medium) 0 0 0;
    max-height: 250px;
    width: 100%;
    user-select: none;
    overflow: scroll;
}

#players-votes {
    padding-bottom: var(--padding-medium);
}

#player-selector {
    align-items: center;
    display: flex;
    font-family: interface-bold;
    flex-direction: column;
    width: 95%;
}

#player-strike-history {
    width: 90%;
}