2

Author: kilsw1ch

carrom.css

@@ -11,42 +11,42 @@ body{
     font-size: 50px;
 } */
 
-.p1{
+.player1{
 
     position:absolute;
     width: 50%;
-    height: 50%;
+    height: 46%;
     background-color: #FDFD96;
     text-align: center;
 }
 
-.p2{
+.player2{
 
     position:absolute;
     left:50%;
     width: 50%;
-    height: 50%;
+    height: 46%;
     background-color: #FFB3BA;
     text-align: center;
 }
 
-.p3{
+.player3{
 
     position:absolute;
-    top:50%;
+    top:46%;
     width: 50%;
-    height: 50%;
+    height: 46%;
     background-color: #B8E2B8;
     text-align: center;
 }
 
-.p4{
+.player4{
 
     position:absolute;
-    top:50%;
+    top:46%;
     left:50%;
     width: 50%;
-    height: 50%;
+    height: 46%;
     background-color: #A7C6ED;
     text-align: center;
 }
@@ -61,38 +61,63 @@ input{
 
 }
 
-.p1 span, .p2 span, .p3 span, .p4 span{
+.player1, .player2, .player3, .player4{
 
-    display: inline-block;
-    margin-top:40%;
-}
+    span{
+        display: inline-block;
+        margin-top:35%;
+    }
 
-button{
+    .decbtn{
 
-    position: absolute;
-    left:35%;
-    top:60%;
-    
-    border: none;
-    border-radius: 50%;
+        position: absolute;
+        left:20%;
+        top:70%;
 
-    height: 150px;
-    width:150px;
+        border: none;
+        border-radius: 50%;
 
-    background-color: #000;
+        height: 120px;
+        width:120px;
 
-    font-size: 5rem;
-    color: #fff;
-    text-align: center;
+        background-color: #000;
+
+        font-size: 5rem;
+        color: #fff;
+        text-align: center;
+
+        padding: 10px;
+    }
+
+    .ranibtn{
+
+        position: absolute;
+        left:60%;
+        top:70%;
 
-    padding: 10px;
+        border: none;
+        border-radius: 50%;
+
+        height: 120px;
+        width:120px;
+
+        background-color: #FF6A4D;
+
+        font-size: 5rem;
+        text-align: center;
+
+        padding: 10px;
+
+        font-size: 3rem;
+        color: #fff;
+    }
 }
 
 .totaldiv{
 
     position: absolute;
     left: 44%;
-    top: 47%;
+    top: 42.5%;
 
     width: 120px;
     height: 120px;
@@ -105,15 +130,25 @@ button{
     line-height: 2;
 }
 
-.resetbtn{
+.bottombar{
 
-    background-color: #000;
-    color: #fff;
+    position: absolute;
+    display: flex;
+    top: 92%;
+    height: 8%;
+    width: 100%;
+    background-color: #999;
 
-    left: 42%;
-    top: 90%;
+    .resetbtn, .newbtn{
 
-    span{
-        font-size: 4rem;
+        margin:auto;
+
+        background-color: none;
+        color: #fff;
+        left: 42%;
+
+        span{
+            font-size: 4rem;
+        }
     }
 }