└── Code


/Code:
--------------------------------------------------------------------------------
 1 | .calculator {
 2 |         background: #333;
 3 |         border-radius: 20px;
 4 |         padding: 20px;
 5 |         box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
 6 |         animation: fadeIn 1.2s ease-in-out;
 7 |     }
 8 | 
 9 |     @keyframes fadeIn {
10 |         from {
11 |             opacity: 0;
12 |             transform: scale(0.8);
13 |         }
14 |         to {
15 |             opacity: 1;
16 |             transform: scale(1);
17 |         }
18 |     }
19 | 
20 |     .screen {
21 |         text-align: right;
22 |         margin-bottom: 20px;
23 |     }
24 | 
25 |     .screen input {
26 |         width: 100%;
27 |         height: 60px;
28 |         background: #222;
29 |         border: none;
30 |         border-radius: 10px;
31 |         color: #fff;
32 |         font-size: 2rem;
33 |         padding: 10px;
34 |         box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
35 |         animation: slideIn 0.6s ease-out;
36 |     }
37 | 
38 |     @keyframes slideIn {
39 |         from {
40 |             transform: translateY(-50px);
41 |             opacity: 0;
42 |         }
43 |         to {
44 |             transform: translateY(0);
45 |             opacity: 1;
46 |         }
47 |     }
48 | 
49 |     .buttons {
50 |         display: grid;
51 |         grid-template-columns: repeat(4, 1fr);
52 |         gap: 10px;
53 |     }
54 | 
55 |     button {
56 |         background-color: #444;
57 |         color: white;
58 |         font-size: 1.5rem;
59 |         padding: 20px;
60 |         border: none;
61 |         border-radius: 10px;
62 |         cursor: pointer;
63 |         transition: transform 0.2s, background-color 0.3s;
64 |     }
65 | 
66 |     button:hover {
67 |         background-color: #555;
68 |         transform: scale(1.1);
69 |     }
70 | 
71 |     button:active {
72 |         transform: scale(0.95);
73 |     }
74 | 
75 |     button.equal {
76 |         background-color: #ff9800;
77 |         color: white;
78 |         grid-column: span 2;
79 |     }
80 | 
81 |     button.equal:hover {
82 |         background-color: #e68a00;
83 |     }
84 | </style>
85 | 


--------------------------------------------------------------------------------