@font-face {
    font-family: 'Digital-7 Mono';
    src: url('fonts/digital-7 (mono).ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    background-color: #2b2b2b; 
    display: flex;
    justify-content: center;
    padding-top: 50px;
    margin: 0;
    font-family: sans-serif;
}

.calculator-wrapper {
    position: relative;
    width: 500px; 
}

.calc-image {
    width: 100%;
    display: block;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5); 
}

.vfd-screen {
    position: absolute;
    top: 24.5%;
    left: 11%;
    width: 73%;
    height: 10%;
    color: #00ff00;
    text-shadow: 0 0 8px #00ff00;
    font-family: 'Digital-7 Mono', monospace;
    letter-spacing: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 2.2rem; 
    transform: skewX(-13deg); 
    padding-right: 40px; 
}

.btn {
    position: absolute;
    background-color: transparent; 
    border: none;
    cursor: pointer;
    border-radius: 6px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: all 0.1s ease; 
}

.btn-7 { top: 56%; left: 17%; width: 11%; height: 8%; }
.btn-8 { top: 56%; left: 28.5%; width: 11%; height: 8%; }
.btn-9 { top: 56%; left: 40%; width: 11%; height: 8%; }
.btn-c { top: 56%; left: 61%; width: 11%; height: 8%; }
.btn-ck { top: 56%; left: 72.5%; width: 11%; height: 8%; }
.btn-4 { top: 64.5%; left: 17%; width: 11%; height: 8%; }
.btn-5 { top: 64.5%; left: 28.5%; width: 11%; height: 8%; }
.btn-6 { top: 64.5%; left: 40%; width: 11%; height: 8%; }
.btn-add { top: 64.5%; left: 61%; width: 11%; height: 8%; }
.btn-sub { top: 64.5%; left: 72.5%; width: 11%; height: 8%; }
.btn-1 { top: 73%; left: 17%; width: 11%; height: 8%; }
.btn-2 { top: 73%; left: 28.5%; width: 11%; height: 8%; }
.btn-3 { top: 73%; left: 40%; width: 11%; height: 8%; }
.btn-mul { top: 73%; left: 61%; width: 11%; height: 8%; }
.btn-div { top: 73%; left: 72.5%; width: 11%; height: 8%; }
.btn-0 { top: 81%; left: 17%; width: 22.5%; height: 9%; }
.btn-dot { top: 81%; left: 40%; width: 11%; height: 9%; }
.btn-eq { top: 81%; left: 61%; width: 22.5%; height: 9%; }

.btn-manual {
    position: absolute;
    top: 0;
    right: -160px;
    width: 140px;
    padding: 15px 5px;
    background-color: #2a2a2a;
    color: #00ff00;
    border: 1px solid #444;
    text-align: center;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}