@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); 
  
 * { 
   margin: 0; 
   padding: 0; 
   box-sizing: inherit; 
 } 
  
 html { 
   font-size: 62.5%; 
   box-sizing: border-box; 
 } 
  
 body { 
   font-family: 'Nunito', sans-serif; 
   font-weight: 400; 
   height: 100vh; 
   color: #333; 
   background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%); 
   display: flex; 
   align-items: center; 
   justify-content: center; 
 } 
  
 /* LAYOUT */ 
 main { 
   position: relative; 
   width: 100rem; 
   height: 60rem; 
   background-color: rgba(255, 255, 255, 0.35); 
   backdrop-filter: blur(200px); 
   filter: blur(); 
   box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25); 
   border-radius: 9px; 
   overflow: hidden; 
   display: flex; 
 } 
  
 .player { 
   flex: 50%; 
   padding: 9rem; 
   display: flex; 
   flex-direction: column; 
   align-items: center; 
   transition: all 0.75s; 
 } 
  
 /* ELEMENTS */ 
 .name { 
   position: relative; 
   font-size: 4rem; 
   text-transform: uppercase; 
   letter-spacing: 1px; 
   word-spacing: 2px; 
   font-weight: 300; 
   margin-bottom: 1rem; 
 } 
  
 .score { 
   font-size: 8rem; 
   font-weight: 300; 
   color: #c7365f; 
   margin-bottom: auto; 
 } 
  
 .player--active { 
   background-color: rgba(255, 255, 255, 0.4); 
 } 
 .player--active .name { 
   font-weight: 700; 
 } 
 .player--active .score { 
   font-weight: 400; 
 } 
  
 .player--active .current { 
   opacity: 1; 
 } 
  
 .current { 
   background-color: #c7365f; 
   opacity: 0.8; 
   border-radius: 9px; 
   color: #fff; 
   width: 65%; 
   padding: 2rem; 
   text-align: center; 
   transition: all 0.75s; 
 } 
  
 .current-label { 
   text-transform: uppercase; 
   margin-bottom: 1rem; 
   font-size: 1.7rem; 
   color: #ddd; 
 } 
  
 .current-score { 
   font-size: 3.5rem; 
 } 
  
 /* ABSOLUTE POSITIONED ELEMENTS */ 
 .btn { 
   position: absolute; 
   left: 50%; 
   transform: translateX(-50%); 
   color: #444; 
   background: none; 
   border: none; 
   font-family: inherit; 
   font-size: 1.8rem; 
   text-transform: uppercase; 
   cursor: pointer; 
   font-weight: 400; 
   transition: all 0.2s; 
  
   background-color: white; 
   background-color: rgba(255, 255, 255, 0.6); 
   backdrop-filter: blur(10px); 
  
   padding: 0.7rem 2.5rem; 
   border-radius: 50rem; 
   box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1); 
 } 
  
 .btn::first-letter { 
   font-size: 2.4rem; 
   display: inline-block; 
   margin-right: 0.7rem; 
 } 
  
 .btn--new { 
   top: 4rem; 
 } 
 .btn--roll { 
   top: 39.3rem; 
 } 
 .btn--hold { 
   top: 46.1rem; 
 } 
  
 .btn:active { 
   transform: translate(-50%, 3px); 
   box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15); 
 } 
  
 .btn:focus { 
   outline: none; 
 } 
  
 .dice { 
   position: absolute; 
   left: 50%; 
   top: 16.5rem; 
   transform: translateX(-50%); 
   height: 10rem; 
   box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2); 
 } 
  
 .player--winner { 
   background-color: #2f2f2f; 
 } 
  
 .player--winner .name { 
   font-weight: 700; 
   color: #c7365f; 
 } 
  
 .hidden { 
   display: none; 
   }