@import"https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap";.header{display:flex;align-items:center;justify-content:space-between;max-width:600px;width:100%;padding:1rem;border:3px solid lightgray;border-radius:1rem;font-size:20px}.header__title p{font-size:30px;line-height:.9}.header__score-box{display:flex;flex-direction:column;align-items:center;padding:12px 30px;background-color:#fff;border-radius:.5rem;color:var(--score-text)}.header__score-box p:first-child{font-size:16px}.header__score{color:var(--dark-text);font-size:36px;font-weight:700}.game{position:relative}.triangle{position:absolute;display:block;max-width:250px;top:50%;left:50%;transform:translate(-50%,-50%)}.game__icons{max-width:400px;height:350px;position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem}.icon{width:160px;height:160px;flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;cursor:pointer;position:relative;transition:transform .15s ease-in}.icon:hover{transform:scale(1.1)}.icon:after{content:"";box-shadow:inset 0 8px #d3d3d3;display:block;position:absolute;border-radius:50%;width:120px;height:120px;background-color:#fff}.icon img{z-index:1}.rock-container{background:var(--rock-gradient);box-shadow:0 8px #c4213f}.paper-container{background:var(--paper-gradient);box-shadow:0 8px #2648f2}.scissors-container{background:var(--scissors-gradient);box-shadow:0 8px #c1810b}@media screen and (max-width: 768px){.icon{width:140px;height:140px}.icon:after{width:100px;height:100px}}@media screen and (max-width: 400px){.icon{width:120px;height:120px}.icon:after{width:80px;height:80px}}.result__container{display:flex;justify-content:space-around;align-items:center;gap:2rem}.result__choice{flex:1;display:flex;flex-direction:column;align-items:center;gap:2rem}.result__text{font-size:20px;text-transform:uppercase}.result__summary{font-size:20px;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.25rem;opacity:0;animation:fade-in 1s ease-in-out 2s forwards}@keyframes fade-in{0%{display:none}to{display:block}}.result__summary p:first-child{font-size:36px;font-weight:700}.play_again{padding:.5rem 2rem;border:0;outline:0;border-radius:.5rem;background:whitesmoke;cursor:pointer;color:var(--dark-text);text-transform:uppercase;font-size:12px;font-weight:700}.play_again:hover{color:red}.computer-choice{opacity:0;animation:fade-in 1s ease-in-out 2s forwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.win{z-index:-1;animation:box-fade-in 1s ease-in-out 1s forwards}@keyframes box-fade-in{0%{box-shadow:0 0 0 40px #fff0,0 0 0 80px #fff0,0 0 0 120px #fff0}to{box-shadow:0 0 0 40px #ffffff1a,0 0 0 80px #ffffff13,0 0 0 120px #ffffff0d}}@media screen and (max-width: 500px){.result__container{flex-wrap:wrap;gap:1rem}.result__text{font-size:14px}.result__summary p:first-child{font-size:24px}.result__choice{flex-direction:column-reverse;gap:1rem}.player-choice{order:1}.computer-choice{order:2}.result__summary{order:3}}.footer{width:100%;display:flex;justify-content:end}.footer__rules-btn{padding:.5rem 2.5rem;border:3px solid lightgray;border-radius:.5rem;background:transparent;font-size:1rem;color:#fff;cursor:pointer;text-transform:uppercase}.rule{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:2rem;border-radius:1rem;z-index:999}.rule__title{color:var(--dark-text);display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.rule__text{font-size:2rem;font-weight:700}.cancel:hover{color:red}.rule__img{display:block;width:100%}@media screen and (max-width: 500px){.footer{justify-content:center}.footer__rules-btn{font-size:.8rem}.rule{top:0;left:0;right:0;bottom:0;transform:none;border-radius:0rem}}:root{--scissors-gradient: linear-gradient(hsl(39, 89%, 49%), hsl(40, 84%, 53%));--paper-gradient: linear-gradient(hsl(230, 89%, 62%), hsl(230, 89%, 65%));--rock-gradient: linear-gradient(hsl(349, 71%, 52%), hsl(349, 70%, 56%));--lizard-gradient: linear-gradient(hsl(261, 73%, 60%), hsl(261, 72%, 63%));--cyan: linear-gradient(hsl(189, 59%, 53%), hsl(189, 58%, 57%));--dark-text: hsl(229, 25%, 31%);--score-text: hsl(229, 64%, 46%);--header-outline: hsl(217, 16%, 45%);--background-gradient: radial-gradient( hsl(214, 47%, 23%), hsl(237, 49%, 15%) )}*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;line-height:1.5}body{font-family:Barlow Semi Condensed,sans-serif;background:var(--background-gradient);background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;text-transform:uppercase}.container{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:2rem;gap:2rem}