.attribution {
    font-size : 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

html,
body {
    min-height: 100%;
    cursor    : url('images/cursor1.png'), default;
}

body {
    font-family      : 'Barlow Semi Condensed', sans-serif;
    background       : rgb(31, 55, 86);
    background       : radial-gradient(circle at 50% -1%, #1f3756, #1f3655, #1d3454, #1c3151, #1a2d4e, #19284a, #172446, #161f42, #151b3f, #15183c, #14163a, #141539);
    background-repeat: no-repeat;
}

.no-shadow {
    box-shadow: none !important;
}

.upper-case {
    text-transform: uppercase;
}

.rules {
    letter-spacing: 0.2em;
    position      : absolute;
    bottom        : 1em;
    right         : 2em;
}

.BorderRadius {
    border-radius: 1em;
}

.header {
    border      : hsl(217, 16%, 45%) 0.15em solid;
    font-weight : 700;
    width       : 50%;
    margin-top  : 2em !important;
    padding     : 1em;
    padding-left: 2em;
    height      : fit-content;
}

.top-margin-remove {
    margin-top: -0.35em;
}

.score-text {
    color         : hsl(229, 64%, 46%);
    letter-spacing: 0.17em;
}

.score {
    color      : hsl(229, 25%, 31%);
    font-weight: 700;
    font-size  : 4rem;
}

.score-board {
    /* width: 66%; */
    padding  : 1em;
    min-width: 12em;
}

.TextCenter {
    text-align: center;
}

.normal-line-height {
    line-height: normal;
}

.Row {
    display: flex;
}

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

.Container {
    margin: auto;
}

.JustifySpaceBetween {
    justify-content: space-between;
}

.JustifyCenter {
    justify-content: center;
}

.AlignCenter {
    align-items: center;
}

.h2 {
    font-size: 2.5rem;
}

.outer-circle {
    width           : 12em;
    height          : 12em;
    border-radius   : 100%;
    position        : relative;
    /* cursor       : url('images/pointer.png'), default; */
    z-index         : 10;
}

.paper {
    background: linear-gradient(360deg, #4865f4, #4865f4, #4966f4, #4b67f4, #4c69f4, #4e6af4, #506cf5, #526df5, #536ff5, #5570f5, #5671f5, #5671f5);
    box-shadow: 0px 8px 0px -2px #233dbf;
    position  : absolute;
    top       : -5em;
    left      : -4em;
}

.scissor {
    background: linear-gradient(360deg, #ec9e0e, #ec9e0e, #ed9f0f, #eea10f, #efa211, #eea414, #eea518, #eda61b, #eda71e, #eca820, #eca921, #eca922);
    box-shadow: 0px 8px 0px -2px #a37625;
    position  : absolute;
    top       : -5em;
    left      : 11em;
}

.scissor-res {
    background: linear-gradient(360deg, #ec9e0e, #ec9e0e, #ed9f0f, #eea10f, #efa211, #eea414, #eea518, #eda61b, #eda71e, #eca820, #eca921, #eca922);
    box-shadow: 0px 8px 0px -2px #a37625;
}

.rock {
    background: linear-gradient(360deg, #dc2e4e, #dc2e4e, #dc304f, #dc3151, #dc3353, #dc3655, #dd3857, #dd3b59, #dd3d5a, #dd3e5c, #dd405d, #dd405d);
    box-shadow: 0px 8px 0px -2px #950f27;
    position  : absolute;
    top       : 9em;
    left      : 3em;
}

.inner-circle {
    width           : 10em;
    height          : 10em;
    background-color: white;
    border-radius   : 100%;
    position        : absolute;
    left            : 1em;
    top             : 1em;
    display         : flex;
    justify-content : center;
    align-items     : center;
    box-shadow      : inset 0px 9px 0px -1px #dddddd;
}

.inner-wait-circle {
    width           : 10em;
    height          : 10em;
    background-color: white;
    border-radius   : 100%;
    position        : absolute;
    left            : 50%;
    top             : 50%;
    transform       : translateX(-50%) translateY(-50%);
    display         : flex;
    justify-content : center;
    align-items     : center;
    box-shadow      : inset 0px 9px 0px -1px #dddddd;
}

.wait-circle {
    width              : 13em;
    height             : 13em;
    background-color   : #1415396b;
    border-radius      : 100%;
    position           : absolute;
    left               : 1em;
    top                : 1em;
    /* display         : flex;
    justify-content    : center;
    align-items        : center;
    box-shadow         : inset 0px 9px 0px -1px #dddddd; */
}

.outer-wait-circle {
    width           : 13em;
    height          : 13em;
    border-radius   : 100%;
    position        : relative;
    /* cursor       : url('images/pointer.png'), default; */
    z-index         : 10;
    zoom            : 1.35;
}

.inner-inner-circle {
    display        : flex;
    justify-content: center;
    align-content  : center;
}

.resize-inner-vector {
    width : 6em;
    height: 6em;
}

.central-triangle {
    position       : absolute;
    top            : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin         : 0 50%;
    transform      : translateX(-50%);
}

.triangle-svg {}

.logo {
    height: auto;
}

.response-text {
    color         : hsl(0, 0%, 100%);
    letter-spacing: 0.17em;
}

@media (max-width: 55em) {}