@font-face{
    font-family: f1;
    src: url(../font/CreatoDisplay-Black.otf);
}

@font-face {
    font-family: f2;
    src: url(../font/DS-DIGIB.TTF);
}

body{
    margin: 0;
    background-repeat: no-repeat;
    background-image: url(../img/bg.png);
    background-size: contain, cover;
    background-color: #F4F3DB;
}

#logocalcu{
    width: 130px;
}

.number, .signs, .equal{
    cursor: pointer;
}

header{
    background-image: linear-gradient(#F3A0C8, #F4F3DB, #F5F5F5);
    border-bottom: 1px solid #D1538F;
}


footer{
    background-image: linear-gradient( #F5F5F5, #F4F3DB, #F3A0C8);
    border-top: 1px solid #D1538F;
    width: 100%;
    min-height: 80px;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-card{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid rgba(209, 83, 143, 0.35);
    border-radius: 999px;
    background: rgba(255, 249, 251, 0.75);
    box-shadow: 0 8px 22px rgba(209, 83, 143, 0.12);
}

.footer-label{
    color: #D1538F;
    font-family: f1, sans-serif;
    font-size: clamp(0.68rem, 1vw, 0.82rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#submitted{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    font-size: clamp(0.72rem, 1.2vw, 0.9rem);
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #59434c;
    margin: 0;
    padding-top: 0;
}

.footer-separator{
    color: #D1538F;
    opacity: 0.7;
    padding: 0 0.2rem;
}

#logo{
    display: center;
}


#shadow{
    width: 100%;
    border-radius: 16% 16% 44% 44%;
    box-shadow: 0px 7px 49px 21px #d9f9ff;
}

.battery{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.batt{
    flex: 1 0 100px;
    height: 100px;
}

#logocalcu{
    padding-left: 20px;
}

/**smallest**/
@media only screen and (max-width: 600px){


    #calculator{
        width: min(92vw, 23rem);
        align-content: center;
        /** alignment ng calcu**/
        margin: 1.5rem auto 2rem;
    }

    body{
        background-image: linear-gradient(rgba(244, 243, 219, 0.72), rgba(244, 243, 219, 0.82)), url(../img/bg.png);
        background-position: center top;
        background-size: cover;
    }

    header div{
        padding: 0.75rem 0;
    }

    header img{
        width: min(40vw, 9rem) !important;
    }

    footer{
        height: auto;
        padding: 1rem 0.75rem;
    }

    .footer-card{
        width: min(100%, 22rem);
        border-radius: 1.4rem;
        padding: 0.8rem 0.9rem;
        gap: 0.3rem;
    }

    .footer-label{
        width: 100%;
        text-align: center;
    }

    #submitted{
        width: 100%;
        padding-top: 0;
        line-height: 1.4;
    }

    #shadow{
        overflow: hidden;
        border-radius: 2.2rem 2.2rem 4.4rem 4.4rem;
        box-shadow: 0px 12px 36px 10px rgba(217, 249, 255, 0.9);
    }

    #calcuscreen{
        width: 100%;
        box-sizing: border-box;
        background-image: linear-gradient(to left, #FFD8DA, #FFD8DA, #FFD8DA, #FFE2E3, #FEF2F4 );
        padding: 1.25rem 1rem 0.85rem 1rem;
        border-right:  12px solid #d396a4;
        border-radius: 2.2rem 2.2rem 0% 0%;
        box-shadow: inset -24px -1px 40px -13px #DBB4B7;
    }

    .battery{
        justify-content: flex-start;
        margin-bottom: 0.75rem;
    }

    .batt{
        height: auto;
    }

    #logocalcu{
        width: 5.5rem;
        padding-left: 0;
    }
    
    #screen{
        box-sizing: border-box;
        background-color: #779A8C;
        border-top: 8px solid #C19D9D;
        border-left: 8px solid #C19D9D;
        border-right: 6px solid #FFDFE0;
        border-bottom: 6px solid #F6CFD2;
        width: 100%;
        height: 4.9rem;
        padding: 0 0.75rem;
        border-radius: 10px 10px 10px 10px;
        font-size: clamp(2.2rem, 11vw, 3.5rem);
        font-family: f2;
        text-align: right;
    }

    #calcunum{
        width: 100%;
        box-sizing: border-box;
        border-right:  12px solid #d396a4;
        border-bottom:  12px solid #d396a4;
        background-image: linear-gradient(to left, #FFD8DA, #FFD8DA, #FFD8DA, #FFE2E3, #FEF2F4 );
        border-radius: 0% 0% 3.6rem 3.6rem;
        padding: 0.9rem 0.85rem 1.3rem 0.85rem;
        box-shadow: inset -24px -1px 40px -13px #DBB4B7;
    }

    #calcunum > div{
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    #calcunum > div:first-child{
        margin-top: 0;
    }

    .number{
        box-sizing: border-box;
        width: 100%;
        height: 2.85rem;
        font-size: clamp(0.95rem, 4.2vw, 1.25rem);
        font-family: f1;
        background-image: linear-gradient(to right,#E7E6E0, #F6F2EF);
        border-radius: 10px;
        margin: 0;
        border-bottom: 4px outset #c6bbbc;
        border-right: 4px outset #c6bbbc;
    }

    .equal{
        box-sizing: border-box;
        width: 100%;
        height: 2.85rem;
        font-size: clamp(0.95rem, 4.2vw, 1.25rem);
        font-family: f1;
        margin: 0;
        background-color: #fdd831;
        border-radius: 8px;
        border-bottom: 4px outset #CD888B;
        border-right: 4px outset #CD888B;
    }
    
    .signs{
        box-sizing: border-box;
        width: 100%;
        height: 2.85rem;
        font-size: clamp(0.95rem, 4.2vw, 1.25rem);
        font-family: f1;
        margin: 0;
        background-color: #E3859B;
        color: #FEF2F4;
        border-radius: 8px;
        border-bottom: 4px outset #CD888B;
        border-right: 4px outset #CD888B;
    }
}

@media only screen and (min-width: 601px) and (max-width: 767px){


    body{
        background-position: 62% top;
        background-size: 175% auto;
    }

    header div{
        padding: 0.85rem 0;
    }

    header img{
        width: min(24vw, 9.5rem) !important;
    }

    #calculator{
        width: min(66vw, 26rem);
        align-content: center;
        /** alignment ng calcu**/
        margin: 2rem auto 3rem clamp(1.75rem, 10vw, 5.5rem);
    }

    #shadow{
        overflow: hidden;
        border-radius: 2.8rem 2.8rem 4.8rem 4.8rem;
    }

    #calcuscreen{
        width: 100%;
        box-sizing: border-box;
        background-image: linear-gradient(to left, #FFD8DA, #FFD8DA, #FFD8DA, #FFE2E3, #FEF2F4 );
        padding: 1.55rem 1rem 1rem 1rem;
        border-right:  13px solid #d396a4;
        border-radius: 2.8rem 2.8rem 0% 0%;
        box-shadow: inset -24px -1px 40px -13px #DBB4B7;
    }

    .battery{
        justify-content: flex-start;
        margin-bottom: 0.8rem;
    }

    .batt{
        height: auto;
    }

    #logocalcu{
        width: 6rem;
        padding-left: 0;
    }
    
    #screen{
        display: block;
        box-sizing: border-box;
        background-color: #779A8C;
        border-top: 8px solid #C19D9D;
        border-left: 8px solid #C19D9D;
        border-right: 6px solid #FFDFE0;
        border-bottom: 6px solid #F6CFD2;
        width: 100%;
        height: 5.4rem;
        padding: 0 0.8rem;
        border-radius: 10px 10px 10px 10px;
        font-size: clamp(2.6rem, 8vw, 3.6rem);
        font-family: f2;
        text-align: right;
    }

    
    #calcunum{
        width: 100%;
        box-sizing: border-box;
        border-right:  13px solid #d396a4;
        border-bottom:  13px solid #d396a4;
        background-image: linear-gradient(to left, #FFD8DA, #FFD8DA, #FFD8DA, #FFE2E3, #FEF2F4 );
        border-radius: 0% 0% 4rem 4rem;
        padding: 1rem 0.9rem 1.5rem 0.9rem;
        box-shadow: inset -24px -1px 40px -13px #DBB4B7;
    }

    #calcunum > div{
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.55rem;
        margin-top: 0.55rem;
    }

    #calcunum > div:first-child{
        margin-top: 0;
    }

    .number{
        box-sizing: border-box;
        width: 100%;
        height: 3.35rem;
        font-size: clamp(1.05rem, 3vw, 1.3rem);
        font-family: f1;
        background-image: linear-gradient(to right,#E7E6E0, #F6F2EF);
        border-radius: 10px;
        margin: 0;
        border-bottom: 4px outset #c6bbbc;
        border-right: 4px outset #c6bbbc;
    }

    .equal{
        box-sizing: border-box;
        width: 100%;
        height: 3.35rem;
        font-size: clamp(1.05rem, 3vw, 1.3rem);
        font-family: f1;
        margin: 0;
        background-color: #fdd831;
        border-radius: 8px;
        border-bottom: 4px outset #CD888B;
        border-right: 4px outset #CD888B;
    }
    
    .signs{
        box-sizing: border-box;
        width: 100%;
        height: 3.35rem;
        font-size: clamp(1.05rem, 3vw, 1.3rem);
        font-family: f1;
        margin: 0;
        background-color: #E3859B;
        color: #FEF2F4;
        border-radius: 8px;
        border-bottom: 4px outset #CD888B;
        border-right: 4px outset #CD888B;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px){


    body{
        background-position: 58% top;
        background-size: 145% auto;
    }

    header div{
        padding: 0.85rem 0;
    }

    header img{
        width: min(20vw, 10rem) !important;
    }

    #calculator{
        width: min(46vw, 29rem);
        align-content: center;
        /** alignment ng calcu**/
        margin: 2.5rem auto 3.25rem clamp(4rem, 14vw, 10rem);
    }

    #calcuscreen{
        width: 100%;
        box-sizing: border-box;
        background-image: linear-gradient(to left, #FFD8DA, #FFD8DA, #FFD8DA, #FFE2E3, #FEF2F4 );
        padding: 2.2rem 1.1rem 1.8rem 1.1rem;
        border-right:  15px solid #d396a4;
        border-radius: 20% 20% 0% 0%;
        box-shadow: inset -24px -1px 40px -13px #DBB4B7;
    }

    .battery{
        margin-bottom: 0.8rem;
    }
    
    #screen{
        display: block;
        box-sizing: border-box;
        background-color: #779A8C;
        border-top: 8px solid #C19D9D;
        border-left: 8px solid #C19D9D;
        border-right: 6px solid #FFDFE0;
        border-bottom: 6px solid #F6CFD2;
        width: 100%;
        max-width: 22rem;
        height: 6rem;
        padding: 0 0.9rem;
        border-radius: 10px 10px 10px 10px;
        font-size: clamp(3rem, 6vw, 4.1rem);
        font-family: f2;
        text-align: right;
        margin: 0 auto;
    }

    #calcunum{
        width: 100%;
        box-sizing: border-box;
        border-right:  15px solid #d396a4;
        border-bottom:  15px solid #d396a4;
        background-image: linear-gradient(to left, #FFD8DA, #FFD8DA, #FFD8DA, #FFE2E3, #FEF2F4 );
        border-radius: 0% 0% 50% 50%;
        padding: 1.1rem 0.8rem 1.8rem 0.8rem;
        box-shadow: inset -24px -1px 40px -13px #DBB4B7;
    }

    #calcunum > div{
        display: grid;
        grid-template-columns: 58px 58px 58px 58px;
        justify-content: center;
        gap: 6px;
        margin-top: 4px;
    }

    #calcunum > div:first-child{
        margin-top: 0;
    }

    .number{
        width: 58px;
        height: 36px;
        font-size: 16px;
        font-family: f1;
        background-image: linear-gradient(to right,#E7E6E0, #F6F2EF);
        border-radius: 10px;
        margin: 0;
        border-bottom: 4px outset #c6bbbc;
        border-right: 4px outset #c6bbbc;
    }

    .equal{
        width: 58px;
        height: 36px;
        font-size: 18px;
        font-family: f1;
        margin: 0;
        background-color: #fdd831;
        border-radius: 8px;
        border-bottom: 4px outset #CD888B;
        border-right: 4px outset #CD888B;
    }
    
    .signs{
        width: 58px;
        height: 36px;
        font-size: 16px;
        font-family: f1;
        margin: 0;
        background-color: #E3859B;
        color: #FEF2F4;
        border-radius: 8px;
        border-bottom: 4px outset #CD888B;
        border-right: 4px outset #CD888B;
    }
}


@media only screen and (min-width: 992px){


    #calculator{
        width: 35%;
        align-content: center;
        /** alignment ng calcu**/
        margin: 5vw 44.5vw 5vw 21.5vw;
    }

    #calcuscreen{
        width: 98%;
        background-image: linear-gradient(to left, #FFD8DA, #FFD8DA, #FFD8DA, #FFE2E3, #FEF2F4 );
        padding: 5vw 0vw 5vw 0vw;
        border-right:  15px solid #d396a4;
        border-radius: 20% 20% 0% 0%;
        box-shadow: inset -24px -1px 40px -13px #DBB4B7;
    }
    
    #screen{
        background-color: #779A8C;
        border-top: 8px solid #C19D9D;
        border-left: 8px solid #C19D9D;
        border-right: 6px solid #FFDFE0;
        border-bottom: 6px solid #F6CFD2;
        width: 25vw;
        height: 7vw;
        border-radius: 10px 10px 10px 10px;
        font-size: 45px;
        font-family: f2;
        text-align: right;
    }

    #calcunum{
        width: 98%;
        border-right:  15px solid #d396a4;
        border-bottom:  15px solid #d396a4;
        background-image: linear-gradient(to left, #FFD8DA, #FFD8DA, #FFD8DA, #FFE2E3, #FEF2F4 );
        border-radius: 0% 0% 50% 50%;
        padding: 3vw 0vw 8vw 0vw;
        box-shadow: inset -24px -1px 40px -13px #DBB4B7;
    }

    #calcunum > div{
        display: grid;
        grid-template-columns: 50px 50px 50px 50px;
        justify-content: center;
        gap: 4px;
        margin-top: 4px;
    }

    #calcunum > div:first-child{
        margin-top: 0;
    }

    .number{
        width: 50px;
        height: 30px;
        font-size: 15px;
        font-family: f1;
        background-image: linear-gradient(to right,#E7E6E0, #F6F2EF);
        border-radius: 10px;
        margin: 0;
        border-bottom: 4px outset #c6bbbc;
        border-right: 4px outset #c6bbbc;
    }

    .equal{
        width: 50px;
        height: 30px;
        font-size: 20px;
        font-family: f1;
        margin: 0;
        background-color: #fdd831;
        border-radius: 8px;
        border-bottom: 4px outset #CD888B;
        border-right: 4px outset #CD888B;
    }
    
    .signs{
        width: 50px;
        height: 30px;
        font-size: 15px;
        font-family: f1;
        margin: 0;
        background-color: #E3859B;
        color: #FEF2F4;
        border-radius: 8px;
        border-bottom: 4px outset #CD888B;
        border-right: 4px outset #CD888B;
    }
}
@media only screen and (min-width: 1200px){


    #calculator{
        width: 35%;
        align-content: center;
        /** alignment ng calcu**/
        margin: 5vw 44.5vw 5vw 21.5vw;
    }

    #calcuscreen{
        width: 98%;
        background-image: linear-gradient(to left, #FFD8DA, #FFD8DA, #FFD8DA, #FFE2E3, #FEF2F4 );
        padding: 5vw 0vw 5vw 0vw;
        border-right:  15px solid #d396a4;
        border-radius: 20% 20% 0% 0%;
        box-shadow: inset -24px -1px 40px -13px #DBB4B7;
    }
    
    #screen{
        background-color: #779A8C;
        border-top: 8px solid #C19D9D;
        border-left: 8px solid #C19D9D;
        border-right: 6px solid #FFDFE0;
        border-bottom: 6px solid #F6CFD2;
        width: 25vw;
        height: 7vw;
        border-radius: 10px 10px 10px 10px;
        font-size: 80px;
        font-family: f2;
        text-align: right;
    }

    #calcunum{
        width: 98%;
        border-right:  15px solid #d396a4;
        border-bottom:  15px solid #d396a4;
        background-image: linear-gradient(to left, #FFD8DA, #FFD8DA, #FFD8DA, #FFE2E3, #FEF2F4 );
        border-radius: 0% 0% 50% 50%;
        padding: 3vw 0vw 8vw 0vw;
        box-shadow: inset -24px -1px 40px -13px #DBB4B7;
    }

    #calcunum > div{
        display: grid;
        grid-template-columns: 80px 80px 80px 80px;
        justify-content: center;
        gap: 12px;
        margin-top: 4px;
    }

    #calcunum > div:first-child{
        margin-top: 0;
    }

    .number{
        width: 80px;
        height: 40px;
        font-size: 20px;
        font-family: f1;
        background-image: linear-gradient(to right,#E7E6E0, #F6F2EF);
        border-radius: 10px;
        margin: 0;
        border-bottom: 4px outset #c6bbbc;
        border-right: 4px outset #c6bbbc;
    }

    .equal{
        width: 80px;
        height: 40px;
        font-size: 20px;
        font-family: f1;
        margin: 0;
        background-color: #fdd831;
        border-radius: 8px;
        border-bottom: 4px outset #CD888B;
        border-right: 4px outset #CD888B;
    }

    .signs{
        width: 80px;
        height: 40px;
        font-size: 20px;
        font-family: f1;
        margin: 0;
        background-color: #E3859B;
        color: #FEF2F4;
        border-radius: 8px;
        border-bottom: 4px outset #CD888B;
        border-right: 4px outset #CD888B;
    }

}