body{
    background-image: linear-gradient(160deg, #0093E9 50%, #80D0C7 100%);
}

.smaller--part{
    width: 20%;
    border-bottom: 0px;
    background-color: rgb(26, 26, 94);
    position: relative;
    top: 0;
    left: 0;
}

.inputDivLabel{
    font-size: 25px;
    margin: 25px;
    width: 100%;
}

.valueInput , .discountInput{
    height: 5vh;
    font-family: "Roboto";
    width: 80%;    
    outline: none;
    color: black;
    font-size: 20px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.larger--part{
    font-family: 'Segoe UI', Tahoma, 'Geneva', Verdana, sans-serif;
    /* background-image: linear-gradient(lightblue, orange, purple, yellow, lightgreen);
    background-color: #0093E9; */
    border-radius: 10px;
    color: black;
    width: 100%;
    height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}



.larger-part_container{
    width: 90%;
    height: 100vh;
    font-size: 25px;
    padding-bottom: 25px;
    display: grid;
    font-family:Georgia, 'Times New Roman', Times, serif;
    background-image: linear-gradient(160deg, #D9AFD9 0%, #97D9E1 100%);
    background-color: #D9AFD9;
    border-radius: 10px;
}

/* This will disable the scroll of numbers in the input place which solves the problem of the negative number*/
.valueInput::-webkit-inner-spin-button,
.valueInput::-webkit-outer-spin-button,.discountInput::-webkit-inner-spin-button,
.discountInput::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

.valueInput:focus, .discountInput:focus{
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #f38df3 100%);
    outline: none;
    font-weight: 500;
    color: black;

}

.outputDiv{
    display: grid;
    margin-left: 25px;
}

.buttonDiv{
    
    display: grid;
}

.buttonDiv button{
    position: relative;
    left: 8%;
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Convert , .Reset{
    width: 85%;
    height: 50%;
    position: relative;
    left: 13%;
    margin-top: 30px;
    font-size: larger;
    background-color: rgb(240, 128, 165);
    border-radius: 7px;
}

.Convert:hover , .Reset:hover{
    background-color:  rgb(247, 90, 142);
    cursor: pointer;
}

/* Adding alert msg  */
/* From here */
.alertMsg{
    position: absolute;
    top: 20px;
    display: none;
    grid-template-columns: 1fr 10fr 1fr;
    background-color:rgb(250, 182, 193);
    color: rgb(236, 47, 47);
    padding: 15px;
    border-left: 10px solid rgb(247, 79, 79) ;
    width: 500px;
    animation: alertThing .8s forwards ease-in-out;
}

.text{
    font-size: 13px;
}

.fa-exclamation-circle{
    font-size: larger;
    position: relative;
    left: 0px;
}


.fa-times{
    position: absolute;
    right: 0px;
    top: 0%;
    height: 100%;
    background: rgb(240, 150, 150);
    padding: 20px 18px;
    cursor: pointer;
}

.fa-times:hover{
    background: rgb(238, 110, 110);
    
}
/* Till the previous line */

@keyframes alertThing {
    0%{
        opacity: 0;
    }
    30%{
        opacity: .3;
    }
    60%{
        opacity: .6;
    }
    100%{
        opacity: 1;
    }
}

@media (max-width: 700px){
    .alertMsg{
        width: 80%;
        padding-left: 5px;
    }

    .fa-times{
        padding: 10px;
    }

    .text{
        font-size: 13px;
    }

    .fa-exclamation-circle{
        font-size: 20px;
    }

    .smaller--part{
        width: 100% !important;
        height: 700px;
        margin: none;
        min-width: 350px;
    }

    .dropdown--outmost , .calc__div{
        display: grid;
        justify-content: center;
        align-items: center;
    }

    output{
        font-size: 20px;
    }

    .larger--part{
        font-size: 25px;
        align-items: center;
        width: 100%;
        padding: 50px 0;
    }

    .Convert , .Reset{
        font-size: 25px;
    }


    input{
        font-size: 20px;
    }

    .currency_heading{
        font-size: 30px;
    }

    .calc--text{
        text-align: center;
    }
    .head{
        font-size: 50px;
    }
}

@media (min-width: 700px) and (max-width: 1000px){
    .alertMsg{
        width: 80%;
    }

    .smaller--part{
        width: 35vw;
        height: 100vh;
    }

    .dropdown--outmost , .calc__div{
        display: grid;
        justify-content: center;
        align-items: center;
        left: 0;
    }


    .larger--part{
        height: 100vh;
        width: 60vw;
        position: relative;
        left: 0;
        padding: 0;
    }
}


@media (min-width: 1000px) and (max-width: 1320px){
    
    .smaller--part{
        min-width: 25%;
        height: 100vh;
        }
    .larger--part{
        width: 75%;
    }
}

@media (min-width: 1320px) {
    .smaller--part{
        min-width: 20%;
        height: 100vh;

    }
    .larger--part{
        width: 80%;
    }
}