html,
body {
    overscroll-behavior: none;
}

body {
    background: #FFF;
	color: #333;
	font-size: 1.2em;
	font-family: "Jost", sans-serif;
	margin: 0;
	padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;  
    -ms-user-select: none;   
    user-select: none;
}

form {
    display: inline;
}

p {
    margin: .2em 0;
}

svg {
    width: 100%;
    height: 100%;
}

#battlefield {
    display: flex;
    flex-direction: column;
    height: 33%;
    justify-content: space-evenly;
    text-align: center;
    width: 100%;
}

#battlefield,
#scoreboard {
    place-self: center;
}

#levelboard {
    display: flex;
    font-size: 2em;
    justify-content: space-evenly;
    text-align: center;
}

#levelboard .name,
#levelboard .opp-name,
#levelboard .name-opponent {
    font-size: .7em;
}

.name-opponent {
    display: none;
}

.names-hide .name-opponent {
    display: inline;
}

.names-hide .opp-name {
    display: none;
}

#mainPrompt {
    background: #FFF;
    border: 1px solid #666;
    border-radius: .5em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 90%;
    justify-content: space-evenly;
    left: 5%;
    padding: 1.5em;
    position: absolute;
    text-align: center;
    top: 5%;
    width: 90%;
}

#opponent {
    line-height: 4em;
}

#oppThrow {
    transform: scaleY(-1);
}

#pb {
    background: #999;
    bottom: 0;
    height: 100%;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    transition: max-height 1s ease-in-out, background-color 1s;
    width: 100%;
}

#pb-text {
    font-size: 1em;
    left: 0;
    position: absolute;
    top: 2.5em;
    transform: rotate(-90deg);
    white-space: nowrap;
    width: 1em;
}

#player {
    display: flex;
    justify-content: center;
}

#player_throw {
    line-height: 4em;
}

#progress {
    background: #FFF;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 1.25em;
}

#promptContent {
    text-align: center;
}

#scoreboard {
    width: 50%;
    text-align: center;
}

#score-bar {
    border: 1px solid #999;
    height: 1em;
}

#screenWrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
}

#settings {
    position: absolute;
    right: .33em;
    top: .33em;
}

#settingsButton {
    cursor: pointer;
    width: 1.75em;
}

#settingsMenu {
    background: #FFF;
    border: .15em solid #333;
    border-radius: .3em;
    font-size: .9em;
    line-height: 1.5em;
    padding: .5em 1em;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

#settingsMenu span {
    display: none;
}

#settingsMenu .active span {
    display: inline;
}

#startScreen {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    text-align: center;
    top: 50%;
    transform: translate(-50%, 0);
    width: 100%;
}

#startSettings {
    padding: 1.5em;
}

.tied {
    
}

#w_ro,
#w_pa,
#w_sci,
#oppThrow,
#p_throw {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bigly {
    font-size: 2em;
}

.button {
    align-self: center;
    background-color: #5CF;
    border: 1px solid #000;
    border-radius: .3em;
    cursor: pointer;
    line-height: 2em;
    margin: 0 auto;
    width: 35%;
}

.checker {
  --square-size: 12px; /* Define the size of each square */
  --color-one: #EEE;  /* First color of the squares */
  --color-two: #333;  /* Second color of the squares */

  background: conic-gradient(
    var(--color-one) 90deg,
    var(--color-two) 90deg 180deg,
    var(--color-one) 180deg 270deg,
    var(--color-two) 270deg
  ) !important;
  
  background-repeat: repeat !important;
  background-size: var(--square-size) var(--square-size) !important;
}

.heading {
    color: #888;
    font-weight: bold;
}

.w-ro {
    background-image: url('rock_ha.svg');
}

.w-pa {
    background-image: url('paper_ha.svg');
}

.w-sci {
    background-image: url('scissors_ha.svg');
}

.chooser {
    
}

.clickable {
    cursor: pointer;
}

.lost {
    animation: flashRed .7s;
}

.opp-point-block {
    background: #F88;
    border-left: 1px solid #666;
    box-sizing: border-box;
    float: right;
    height: 100%;
    width: 33.333%;
}

.player-point-block {
    background: #8F8;
    border-right: 1px solid #666;
    box-sizing: border-box;
    float: left;
    height: 100%;
    width: 33.333%;
}

.prompt-img {
    height: 3em;
    animation: floaty 1.25s linear infinite;
}

.tied {
    animation: flashGray .7s;
}

.w-arrow {
    bottom: 0;
    left: 50%;
    line-height: 0;
    position: absolute;
    transform: translate(-25%, 1em);
}

.weapon {
    cursor: pointer;
    line-height: 3em;
    position: relative;
    width: 15%;
}

.won {
    animation: flashGreen .7s;
}

.fade {
    animation: fadeInOut 1.5s linear infinite;
}

.gone {
    opacity: 0;
    transition: visibility .1s, opacity .1s;
    visibility: hidden;
}

.gone.show {
    opacity: 1;
    transition: visibility .7s, opacity .7s;
    visibility: visible;
}

.hidden {
    opacity: 0;
    transition: visibility .8s, opacity .8s;
    visibility: hidden;
}

.hidden.show {
    opacity: 1;
    transition: visibility .5s, opacity .5s;
    visibility: visible;
}

.hidden.show90 {
    opacity: .93;
    transition: visibility .5s, opacity .5s;
    visibility: visible;   
}

@keyframes floaty {
    0% {
        transform: translate(0, .25em);
    }
    50% {
        transform: translate(0, -.25em);
    }
    100% {
        transform: translate(0, .25em);
    }
}

@keyframes flashGray {
    0% {
        background: #888;
    }
    100% {
        background: #FFF;
    }
}

@keyframes flashGreen {
    0% {
        background: #8F8;
    }
    100% {
        background: #FFF;
    }
}

@keyframes flashRed {
    0% {
        background: #F88;
    }
    100% {
        background: #FFF;
    }
}

@keyframes fadeInOut {
    0% {
        color: #333; /* Starts fully transparent */
    }
    50% {
        color: #BBB;
    }
    100% {
        color: #333; /* Ends fully transparent, ready to loop */
    }
}