@font-face {
    font-family: "Akira";
    src: url(../FONTS/akira_expanded/Akira\ Expanded\ Demo.otf);
}
@font-face {
    font-family: 'Azonix';
    src: url(../FONTS/azonix/Azonix.otf);
}
@font-face {
    font-family: 'code';
    src: url(FONTS/code/CODE\ Bold.otf);
}
@font-face {
    font-family: 'depixel';
    src: url(../FONTS/depixel/DePixelBreit.otf);
}
@font-face {
    font-family: 'gobold';
    src: url(../FONTS/gobold/Gobold\ Bold.otf);
}
@font-face {
    font-family: 'goride';
    src: url(../FONTS/goride_sans/Goride\ Sans.otf);
}
@font-face {
    font-family: 'hirise';
    src: url(../FONTS/highrise/HighriseFont-Bold-Demo.otf);
}

@font-face {
    font-family: 'neo';
    src: url(../FONTS/ncl_neovibes/NCLNeovibes-Demo.otf);
}


body{
    animation: transitionIn 0.5s;
    
}




@keyframes transitionIn {
    from {
        opacity: 0;
        transform: scale(0.95)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}
@media (max-width: 900px) {
    .button-nav {
        display: flex ;
        flex-wrap: wrap ;
        justify-content: center ;
        align-items: center ;
        gap: 12px ;
        padding: 10px 0 ;
        width: 100vw ;
        margin: 0 auto 18px auto ;
        background: none ;
        box-shadow: none ;
        overflow: hidden;
    }
    #buttons {
        font-size: 1.1rem ;
        padding: 10px 12px ;
        border-radius: 14px ;
        min-width: 0 ;
        margin: 0 2px ;
    }
    #main-display {
        font-size: 2rem ;
        padding: 14px 32px ;
        border-radius: 20px ;
       
        font-weight: bold ;
        box-shadow: 0 2px 12px #1e00ff33 ;
        margin: 0 6px ;
    }
    #buttons:hover{
        transform: scale(1.07); /* smaller scale on hover */
        z-index: 2;
    }
}

@media (max-width: 600px) {
    .button-nav {
        overflow: hidden;
        gap: 6px ;
        padding: 6px 0 ;
        width: 100vw ;
    }
    #buttons {
        font-size: 0.95rem ;
        padding: 7px 7px ;
        border-radius: 10px ;
    }
    #buttons:hover {
        
        transform: scale(1.04);
        z-index: 2;
    }
    #buttons, #main-display {
        max-width: 98vw;
        box-sizing: border-box;
    }
    #main-display {
        font-size: 1.3rem ;
        padding: 10px 16px ;
        border-radius: 14px ;
    }
}