CalculApp.css

*{
    padding: 0%;
    margin: 0%;
    background-color: black;
   
}
@media screen and (max-width:480px) {
    

h1{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n1{
    background-color: rgb(46, 46, 46);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 530px;
    left: 30px;
}
.n1:hover{
    background-color: grey;
}

.n-2{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n2{
    background-color: rgb(46, 46, 46);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 530px;
    left: 115px;
}
.n2:hover{
    background-color: grey;
}

.n-3{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n3{
    background-color: rgb(46, 46, 46);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 530px;
    left: 200px;
}
.n3:hover{
    background-color: grey;
}

.plus1{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.plus{
    background-color: rgb(255, 187, 0);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 530px;
    left: 290px;
}
.plus:hover{
    background-color: rgb(255, 236, 62);
}





.n-4{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n4{
    background-color: rgb(46, 46, 46);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 450px;
    left: 30px;
}
.n4:hover{
    background-color: grey;
}

.n-5{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n5{
    background-color: rgb(46, 46, 46);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 450px;
    left: 115px;
}
.n5:hover{
    background-color: grey;
}

.n-6{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n6{
    background-color: rgb(46, 46, 46);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 450px;
    left: 200px;
}
.n6:hover{
    background-color: grey;
}


.moin1{
    color: white;
    position: absolute;
    top: 18px;
    left: 30px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.moin{
    background-color: rgb(255, 187, 0);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 450px;
    left: 290px;
}
.moin:hover{
    background-color: rgb(255, 236, 62);
}





.n-7{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n7{
    background-color: rgb(46, 46, 46);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 370px;
    left: 30px;
}
.n7:hover{
    background-color: grey;
}

.n-8{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n8{
    background-color: rgb(46, 46, 46);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 370px;
    left: 115px;
}
.n8:hover{
    background-color: grey;
}

.n-9{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n9{
    background-color: rgb(46, 46, 46);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 370px;
    left: 200px;
}
.n9:hover{
    background-color: grey;
}


.div1{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.div{
    background-color: rgb(255, 187, 0);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 370px;
    left: 290px;
}
.div:hover{
    background-color:rgb(255, 236, 62);
}





.n-10{
    color: rgb(0, 0, 0);
    position: absolute;
    top: 18px;
    left: 12px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n10{
    background-color: rgb(235, 235, 235);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 290px;
    left: 30px;
}
.n10:hover{
    background-color:rgb(247, 244, 244);
}


.n-11{
    color: rgb(0, 0, 0);
    position: absolute;
    top: 18px;
    left: 15px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n11{
    background-color: rgb(235, 235, 235);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 290px;
    left: 115px;
}
.n11:hover{
    background-color:rgb(247, 244, 244);
}

.n-12{
    color: rgb(0, 0, 0);
    position: absolute;
    top: 18px;
    left: 22px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n12{
    background-color: rgb(235, 235, 235);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 290px;
    left: 200px;
}
.n12:hover{
    background-color:rgb(247, 244, 244);
}


.n-13{
    color: white;
    position: absolute;
    top: 18px;
    left: 30px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n13{
    background-color: rgb(255, 187, 0);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 290px;
    left: 290px;
}
.n13:hover{
    background-color:rgb(255, 236, 62);
}





.n-14{
    color: white;
    position: absolute;
    top: 18px;
    left: 29px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n14{
    background-color: rgb(46, 46, 46);
    border-radius: 25%;
    height: 70px;
    width: 150px;
    position: absolute;
    top: 610px;
    left: 35px;
}
.n14:hover{
    background-color: grey;
}



.n-15{
    color: white;
    position: absolute;
    top: 18px;
    left: 33px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n15{
    background-color: rgb(46, 46, 46);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 610px;
    left: 203px;
}
.n15:hover{
    background-color: grey;
}


.n-16{
    color: white;
    position: absolute;
    top: 18px;
    left: 27px;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
.n16{
    background-color: rgb(255, 187, 0);
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 610px;
    left: 290px;
}
.n16:hover{
    background-color:rgb(255, 236, 62);
}


.calc{
    position: absolute;
    top: 110px;
    left: 295px;
    font-size: 100px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}
}