:root {
    background-color: #122f3d;
    --red: #702c27;
    --blue: #272c70;
    --green: #216321;
    --yellow: #606b24;
    --purple: #502061;
    --winnerColor: #702c27;
}

body {
    margin: 0;
    padding: 0;
}

div, button {
    display: flex;
    box-sizing: border-box;
    margin: 2vh 2vw;
    padding: 1vh 1vw;
    min-height: 4vh;
    min-width: 2vw;
    border-radius: 10px;
    background-color: transparent;
}

.main {
    min-height: 96vh;
    width: 96vw;
    display: flex;
    flex-direction: column;
}

.seperator {
    margin: 0;
    padding: 0;
    border-width: 0px;
    display: flex;
   
}

.options {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.choice {
    cursor: pointer;
    font-size: 1.5em;
    padding: 3vh 6vw;
    border: 1px solid red;
    text-shadow: 2px 2px black;
}

.paper {
    color: var(--purple);
    border-color: var(--purple) var(--yellow) var(--purple) var(--green);
    border-width: 8px 4px;
    
}

.rock {
    color: var(--red);
    border-color: var(--red) var(--purple) var(--red) var(--blue);
    border-width: 8px 4px;
}

.scissors {
    color: var(--yellow);
    border-color: var(--yellow) var(--blue) var(--yellow) var(--red);
    border-width: 8px 4px;
}

.lizard {
    color: var(--green);
    border-color: var(--green) var(--red) var(--green) var(--yellow);
    border-width: 8px 4px;
}

.spock {
    color: var(--blue);
    border-color: var(--blue) var(--green) var(--blue) var(--purple);
    border-width: 8px 4px;
}

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

.info {
    font-size: 3em;
}

.scoreContainer > * {
    font-size: 2em;
}


.replay {
    display: flex;
    margin: 2vh auto;
    font-size: 2em;
    border: solid 5px var(--winnerColor);
    cursor: help;
}

.score {
    border-bottom: 5px solid black;
}

p {
     margin-top: -1.5vh;
 }

 .log {
     color: white;
 }