:root{--gradient-scissors-from: hsl(39, 89%, 49%);--gradient-scissors-to: hsl(40, 84%, 53%);--gradient-paper-from: hsl(230, 89%, 62%);--gradient-paper-to: hsl(230, 89%, 65%);--gradient-rock-from: hsl(349, 71%, 52%);--gradient-rock-to: hsl(349, 70%, 56%);--color-dark-text: hsl(229, 25%, 31%);--color-score-text: hsl(229, 64%, 46%);--color-header-outline: hsl(217, 16%, 45%);--gradient-background-from: hsl(214, 47%, 23%);--gradient-background-to: hsl(237, 49%, 15%);--font-family: "Barlow Semi Condensed", sans-serif;--font-weight-semibold: 600;--font-weight-bold: 700}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}html{font-size:62.5%}@media screen and (min-width: 900px){html{font-size:75%}}body{background:linear-gradient(var(--gradient-background-from),var(--gradient-background-to));min-height:100vh;overflow-x:hidden}.overlay{position:fixed;z-index:5;left:0;top:0;width:100%;height:100%;background-color:#00000059;visibility:hidden;transition:all .25s ease-in-out}.overlay__active{visibility:visible!important}.rules{position:fixed;left:0;top:0;width:100%;height:100%;background-color:#eee;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:24px;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);transition:clip-path .5s cubic-bezier(.77,0,.175,1);z-index:999}.rules__active{clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}.rules__header{display:flex;justify-content:space-between;align-items:center;width:100%}.rules__heading{font-size:36px;text-transform:uppercase;color:var(--color-dark-text)}.close_btn{cursor:pointer}.close_btn path{fill:var(--color-dark-text);fill-rule:"evenodd";opacity:.25;transition:all .2s ease-in-out}.close_btn:hover path{opacity:1}@media screen and (min-width: 900px){.rules{left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:26px;border-radius:8px;-webkit-backdrop-filter:opacity(20%);backdrop-filter:opacity(20%)}.rules__body{flex-basis:100%;order:3;display:flex;justify-content:center;margin-top:36px}}.header{border:5px solid var(--color-header-outline);border-radius:5px;padding:1.5rem;width:30rem;margin:2rem auto;display:flex;justify-content:space-between;align-items:center;transition:width .5s ease-in-out}@media screen and (min-width: 600px){.header{padding:1.5rem;width:55rem;margin:2rem auto}}@media screen and (min-width: 900px){.header{padding:1.5rem;width:70rem;margin:2rem auto}}.heading__logo{color:#ddd;text-transform:uppercase;font-weight:600;line-height:.85;font-size:2rem}@media screen and (min-width: 900px){.heading__logo{font-size:2.75rem}}.heading__score{padding:1rem 2rem;background-color:#ddd;text-align:center;border-radius:5px}.heading__score h4{text-transform:uppercase;color:var(--color-score-text);font-size:1.2rem;letter-spacing:2px}.score_value{color:var(--color-dark-text);font-size:4rem;font-weight:700;line-height:1;transition:all .3s ease-in-out}.rules__btn{color:#c9c9c9;text-decoration:none;text-transform:uppercase;padding:.75rem 0;border:1.5px solid #c9c9c9;background:transparent;border-radius:7px;font-size:1.2rem;letter-spacing:5px;margin:5rem auto;width:11rem;display:block;text-align:center;font-weight:600;line-height:1.2;z-index:999;cursor:pointer}@media screen and (min-width: 900px){.rules__btn{margin:-7rem 3rem 4rem auto}}.game{position:relative;margin-top:10rem}.game__body{width:30rem;min-height:26.25rem;margin:auto;position:relative}@media screen and (min-width: 900px){.game__body{width:45rem;min-height:39rem}}.triangle__img{position:absolute;left:50%;top:0;transform:translate(-50%);width:75%;transition:all .5s ease-in-out}.triangle__img__hidden{opacity:0}.circle__container{transition:all .5s ease-in-out;position:absolute}.circle__container__rock{left:50%;bottom:6rem;transform:translate(-50%)}.circle__container__paper{left:0;top:-6.5rem}.circle__container__scissors{right:0;top:-6.5rem}.circle__outer{transition:all .5s ease-in-out;width:13rem;height:13rem;border-radius:50%;cursor:pointer;overflow:hidden;position:relative;box-shadow:0 3px 3px #00000040}.circle__outer__paper{background:#2642bf}.circle__outer__scissors{background:#c76b18}.circle__outer__rock{background:#9d1736}@media screen and (min-width: 900px){.circle__outer{border-radius:50%;overflow:hidden;position:relative;transition:all .5s ease-in-out;width:19rem;height:19rem}.circle__outer:hover{transform:scale(1.09) translateY(-5px)}.circle__container__paper,.circle__container__scissors{top:-8rem}.circle__container__rock{bottom:8rem}}.circle__inner{transition:all .5s ease-in-out;width:13rem;height:13rem;border-radius:50%;overflow:hidden;position:relative;box-shadow:0 3px 3px #00000040;transform:translateY(-6px) scale(1.03)}.circle__inner__rock{background:linear-gradient(120deg,var(--gradient-rock-from),var(--gradient-rock-to))}.circle__inner__paper{background:linear-gradient(120deg,var(--gradient-paper-from),var(--gradient-paper-to))}.circle__inner__scissors{background:linear-gradient(120deg,var(--gradient-scissors-from),var(--gradient-scissors-to))}@media screen and (min-width: 900px){.circle__inner{overflow:hidden;position:relative;cursor:pointer;width:19rem;height:19rem;transform:translateY(-9px) scale(1.03)}}.circle__type__outer{background-color:#bfbfbf;overflow:hidden;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:10rem;height:10rem;border-radius:50%}.circle__type__inner{width:10rem;height:10rem;border-radius:50%;background-color:#ddd;transform:translateY(4px) scale(1.02)}.type__icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}@media screen and (min-width: 900px){.circle__type__outer{width:14.5rem;height:14.5rem}.circle__type__inner{width:14.5rem;height:14.5rem;transform:translateY(7px) scale(1.02)}.type__icon{transform:translate(-50%,-50%) scale(1.75)}}.computer__choosing__loading{position:absolute;right:1rem;top:1rem;background-color:#0000001a;width:11rem;height:11rem;border-radius:50%;transition:all .5s ease-in-out}@media screen and (min-width: 900px){.computer__choosing__loading{width:15rem;height:15rem}.big__circle__choosed{width:25rem;height:25rem}.small__circle__choosed{width:20rem;height:20rem}}.choosed__item__player__container{top:0;left:0;right:auto;bottom:auto;transform:translate(0)}@media screen and (min-width: 900px){.choosed__item__player__container__after__loading{left:-15rem}}.choosed__item__computer__container{top:0;right:0;left:auto;bottom:auto;transform:translate(0)}@media screen and (min-width: 900px){.choosed__item__computer__container__after__loading{right:-15rem}}.choosed__item__player,.choosed__item__computer,.unchoosed__item{cursor:none}.unchoosed__item{opacity:0;top:0;right:0;left:auto;bottom:auto;transform:translate(0);cursor:unset}@media screen and (min-width: 900px){.unchoosed__item{top:0;right:0;left:auto;transform:translate(0);bottom:auto}}.picked{color:#eee;text-transform:uppercase;position:absolute;left:50%;bottom:-3rem;transform:translate(-50%);font-size:1.25rem;white-space:nowrap;letter-spacing:2px;font-weight:600;transition:all .5s ease-in-out;text-shadow:0 3px 3px rgba(0,0,0,.25)}@media screen and (min-width: 900px){.picked{color:#eee;text-transform:uppercase;position:absolute;left:50%;bottom:auto;top:-3rem;transform:translate(-50%)}}.winner__circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;transition:all .3s ease-in-out}.winner__first__circle{width:17rem;height:17rem;background-color:#ffffff0f;animation:first_circle_animation .25s ease-in-out}.winner__second__circle{width:21rem;height:21rem;background-color:#ffffff08;animation:second_circle_animation .5s ease-in-out}.winner__third__circle{width:25rem;height:25rem;background-color:#ffffff03;animation:third_circle_animation .75s ease-in-out}@media screen and (min-width: 900px){.winner__first__circle{width:25rem;height:25rem;background-color:#ffffff0f;animation:winner__first__circle .25s ease-in-out}.winner__second__circle{width:35rem;height:35rem;background-color:#ffffff08;animation:second_circle_animation .5s ease-in-out}.winner__third__circle{width:45rem;height:45rem;background-color:#ffffff03;animation:third_circle_animation .75s ease-in-out}}@keyframes first_circle_animation{0%{width:0;height:0}50%{width:10rem;height:10rem}to{width:25rem;height:25rem}}@keyframes second_circle_animation{0%{width:0;height:0}50%{width:25rem;height:25rem}to{width:35rem;height:35rem}}@keyframes third_circle_animation{0%{width:0;height:0}50%{width:30rem;height:30rem}to{width:45rem;height:45rem}}.game__over__div h2{color:#eee;text-transform:uppercase;margin:auto;font-size:5rem;font-weight:700;text-align:center;transition:all .5s ease-in-out}.game__over__div button{text-decoration:none;color:var(--gradient-background-from);width:20rem;padding:1.25rem 3rem;border-radius:7px;background-color:#eee;display:block;margin:1rem auto;text-align:center;font-size:1.4rem;text-transform:uppercase;letter-spacing:2px;cursor:pointer;transition:all .5s ease-in-out;font-weight:700;border:none}@media screen and (min-width: 900px){.game__over__div{position:absolute;left:50%;top:12.5rem;transform:translate(-50%,-50%)}.game__over__div button:hover{color:var(--gradient-rock-from)}}