* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
  font-family: lcd;
  src: url(../font/minisystem.otf);
}

html {
    font-size: 62.5%;
}

body {
    background-color: black;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;    
    min-height: 100vh;
    margin: 0;
}

main {
    margin: 20px 10px 0 10px;
    width: 100%;
    max-width: 400px;
}

/* Använd ID-selector för högre prioritet och bättre kontroll */
#lcd {
    width: 100%;
    font-size: 6.5rem;
    height: 120px;
    margin-bottom: 15px;
    background-color: #0a0a0a;
    color: #33ff33; /* En mer klassisk neon-grön LCD-färg */
    text-shadow: 0 0 10px rgba(51, 255, 51, 0.4); /* Ger en subtil glöd */
    text-align: right;
    padding: 10px 10px;
    font-family: lcd, 'Courier New', monospace;
    border: 2px solid #333;
    border-radius: 12px;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8); /* Ger djup till skärmen */
    white-space: nowrap;
    overflow: hidden;
    transition: font-size 0.2s ease; /* Gör storleksändringen mjuk */
}

/* Specifik färg för valutakoden i displayen */
#lcd .currency-label {
    color: #00bfff;
    font-size: 0.7em;
    margin-left: 10px;
    text-shadow: 0 0 5px rgba(0, 191, 255, 0.4);
}

#keyBoard {    
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 88%; /* Gör knappsatsen smalare */
    margin: 0 auto; /* Centrerar den i förhållande till displayen */
}

#keyBoard button {
    font-family: Verdana;
    font-size: 2.2rem;
    color: #00bfff;
    background-color: #1c1c1c;
    border: none;
    border-radius: 12px;
    padding: 10px 0;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

/* Sifferknappar */
#keyBoard button[id^=b]:not(#back) {
    color: white;
    background-color: #333333;
}

/* Operatorer */
#add,
#sub,
#mul,
#div {
    background-color: #ff9500; /* En tydlig orange färg */
    color: white; /* Vit text för bättre kontrast mot orange */
}

/* Specialknappar som AC och back */
#clear,
#back {
    color: #00bfff;
}

#enter {
    background-color: #00bfff;
    color: black;
    font-weight: bold;
}

/* Hover och aktiv effekt */
#keyBoard button:hover {
    filter: brightness(1.2);
}

#keyBoard button:active {
    transform: scale(0.95);
}

/* Ikon-centrering för backspace */
#back svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
}

/* För att se till att knapparna förblir relativt fyrkantiga */
#keyBoard button {
    aspect-ratio: 1 / 1;
}

/* Hantera y-potens texten i knappen */
#pow sup {
    font-size: 1.5rem;
    transform: translateY(-0.6em);
    margin-left: 2px;
}

/* Valutaomvandlare styling */
#currency-converter {
    margin-top: 15px;
    padding: 10px;
    background-color: #1c1c1c;
    border-radius: 12px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.converter-inputs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.currency-arrow {
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, color 0.2s;
}

.currency-arrow:hover {
    color: #00bfff;
    transform: scale(1.2);
}

#currency-converter select {
    flex: 1;
    background-color: #333;
    color: white;
    border: 1px solid #444;
    padding: 8px;
    border-radius: 6px;
    font-size: 1.4rem;
    outline: none;
}

#convertBtn {
    background-color: #00bfff;
    color: black;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.8rem;
    cursor: pointer;
    transition: filter 0.2s;
}

@media (max-width: 767px) {
    main {
        padding: 6px 3px;
        width: 95vw;
        max-width: none;
        font-size: 1.2rem;
        margin-top: 5px;
    }

    #lcd {
        font-size: 6rem; 
        height: 95px;
        margin-bottom: 10px;
        padding: 5px 10px;
    }

    #keyBoard {
        gap: 6px;
        width: 92%; /* Något bredare på små skärmar för att bibehålla klickbarhet */
    }

    #keyBoard button {
        padding: 5px 0;
        font-size: 2rem;
    }

    #currency-converter {
        margin-top: 15px;
        padding: 10px;
        gap: 10px;
    }

    #convertBtn {
        padding: 16px;
        font-size: 1.6rem;
    }
}

@media (max-width: 339px) {
    main {
        font-size: 1.1rem;
    }

}