/* Page Settings*/
*{
    background-color: black;
}

body{
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
        /* calculator Box*/
section{
    margin-top: 50px;
    background: rgb(50, 47, 47);
    height: 390px;
    width: 205px;
    position: relative;
    border-radius: 9px;
    z-index: 1;
    position: absolute;
    transform: rotate(0deg);
    border: double white 2px;
}
        /* Neon Object*/
.border{
    margin-top: 48px;
    height: 350px;
    width: 200px;
    filter: blur(30px);
    z-index: 0;
    animation: spin 2s linear infinite;
}

@keyframes spin{
    0%{background: linear-gradient(0deg,red, orange,yellow,yellowgreen, green,cyan,skyblue,blue,purple,violet);}
    25%{background: linear-gradient(90deg,red, orange,yellow,yellowgreen, green,cyan,skyblue,blue,purple,violet);}
    50%{background: linear-gradient(180deg,red, orange,yellow,yellowgreen, green,cyan,skyblue,blue,purple,violet);}
    75%{background: linear-gradient(270deg,red, orange,yellow,yellowgreen, green,cyan,skyblue,blue,purple,violet);}
    100%{background: linear-gradient(360deg,red, orange,yellow,yellowgreen, green,cyan,skyblue,blue,purple,violet);}
}
        /* SCREEN*/
.screen{
    position: relative;
    
    justify-content: baseline;
    align-items: center;
    height: 20%;
    width: 90%;
    background: linear-gradient(to bottom, rgb(0, 19, 13), rgb(1, 37, 25));
    color: rgb(1, 37, 25);
    margin:0 10px;
    margin-top: 10px;
    border-radius: 4px;
    border: white double 2px;
    cursor: not-allowed;
}
#calculation{
    position: relative;
    font-family: Doto;
    text-align: start;
    color: rgb(82, 102, 121);
    background-color: transparent;
    font-weight: bolder;
    font-size: 20px;
    height: 40%;
    width: 100%;
    border: none;
    display: block;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    text-shadow: 0px 0px 2px rgb(72, 203, 83);
    padding-top: 3px;
    text-align: center;
}
#answer{
    display: block;
    position: relative;
    height: 60%;
    width: auto;
    background-color: transparent;
    color: aquamarine;
    font-family: monospace;
    font-size: 18px;
    text-align: right;
    border-top: aquamarine dotted 2px;
    padding: 5px 5px;
    box-sizing: border-box;
    
}

.js-time{
    background: linear-gradient(to bottom, rgb(0, 19, 13), rgb(1, 37, 25));
    font-family: Doto;
    font-size: 12px;
    height: 4%;
    width: 80px;
    color: aquamarine;
    text-align: right;
    padding-right: 5px;
    margin-top: 5px;
    margin-left: 110px;
    border: white double 2px;
    border-radius: 4px;
}

        /* General Button Settings*/
div.buttons{
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    display: grid;
    grid-template-columns: 40px 40px 40px 40px ;
    grid-template-rows: auto;
    grid-template-areas:
    "button7 button8 button9 button+"
    "button4 button6 button5 button-"
    "button1 button2 button3 button*" 
    "buttonC button0 button= button/";
    
}
div.buttons button{
    display: flex;
    justify-content: space-around;
    align-items:center ;
    height: 60px;
    width: 40px;
    cursor: pointer;
    z-index: 2;
    border: double white 2px;
    border-radius: 30px;
    margin: 2px;
    transform: rotate(0deg);
}
div.buttons button:active{
    cursor: default;
}
        /* BUTTON Square Box*/
.buttons{
    display: flex;
    justify-content: space-around;
    align-items: center ;
    background-color: transparent;
    border: double white 2px;
    border-radius: 20px;
    margin: 12px;
    margin-top: 0px;
    cursor: no-drop;
    background-color: rgba(0, 0, 0, 0.498);
}
        /* BUTTON STYLES*/
div.buttons button:nth-child(1){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(0, 0, 255) 2px double;
    color: rgb(0, 0, 255);
    text-align: center;
    
}
#button7:hover{
    scale: 1.1;
    background-color: rgb(0, 0, 255);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(0, 0, 255);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(5){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(64, 64, 255) 2px double;
    color: rgb(64, 64, 255);
    text-align: center;
    
}
div.buttons button:nth-child(5):hover{
    scale: 1.1;
    background-color: rgb(64, 64, 255);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(64, 64, 255);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(9){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(128, 128, 255) 2px double;
    color: rgb(128, 128, 255);
    text-align: center;
    
}
div.buttons button:nth-child(9):hover{
    scale: 1.1;
    background-color: rgb(128, 128, 255);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(128, 128, 255);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(13){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(128, 128, 255) 2px double;
    color: rgb(128, 128, 255);
    text-align: center;
    
}
div.buttons button:nth-child(13):hover{
    scale: 1.1;
    background-color: rgb(192, 192, 255);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(192, 192, 255);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(2){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(0, 255, 0) 2px double;
    color: rgb(0, 255, 0);
    text-align: center;
    
}
div.buttons button:nth-child(2):hover{
    scale: 1.1;
    background-color: rgb(0, 255, 0);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(0, 255, 0);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(6){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(64, 255, 64) 2px double;
    color: rgb(64, 255, 64);
    text-align: center;
    
}
div.buttons button:nth-child(6):hover{
    scale: 1.1;
    background-color: rgb(64, 255, 64);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(64, 255, 64);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(10){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(128, 255, 128) 2px double;
    color: rgb(128, 255, 128);
    text-align: center;
    
}
div.buttons button:nth-child(10):hover{
    scale: 1.1;
    background-color: rgb(128, 255, 128);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(128, 255, 128);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(14){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(192, 255, 192) 2px double;
    color: rgb(192, 255, 192);
    text-align: center;
    
}
div.buttons button:nth-child(14):hover{
    scale: 1.1;
    background-color: rgb(192, 255, 192);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(192, 255, 192);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(3){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(255, 0, 0) 2px double;
    color: rgb(255, 0, 0);
    text-align: center;
    
}
div.buttons button:nth-child(3):hover{
    scale: 1.1;
    background-color: rgb(255, 0, 0);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(255, 0, 0);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(7){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(255, 64, 64) 2px double;
    color: rgb(255, 64, 64);
    text-align: center;
    
}
div.buttons button:nth-child(7):hover{
    scale: 1.1;
    background-color: rgb(255, 64, 64);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(255, 64, 64);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(11){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(255, 128, 128) 2px double;
    color: rgb(255, 128, 128);
    text-align: center;
    
}
div.buttons button:nth-child(11):hover{
    scale: 1.1;
    background-color: rgb(255, 128, 128);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(255, 128, 128);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(15){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(255, 192, 192) 2px double;
    color: rgb(255, 192, 192);
    text-align: center;
    
}
div.buttons button:nth-child(15):hover{
    scale: 1.1;
    background-color: rgb(255, 192, 192);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(255, 192, 192);
    color: white;
    animation: linear infinite bounce 0.5s;
    font-size: 18px;
}
div.buttons button:nth-child(4){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(255, 255, 0) 2px double;
    color: rgb(255, 255, 0);
    text-align: center;
    
}
div.buttons button:nth-child(4):hover{
    scale: 1.1;
    background-color: rgb(255, 255, 0);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(255, 255, 0);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(8){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(255, 0, 255) 2px double;
    color: rgb(255, 0, 255);
    text-align: center;
    
}
div.buttons button:nth-child(8):hover{
    scale: 1.1;
    background-color: rgb(255, 0, 255);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(255, 0, 255);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(12){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(0, 255, 255) 2px double;
    color: rgb(0, 255, 255);
    text-align: center;
    
}
div.buttons button:nth-child(12):hover{
    scale: 1.1;
    background-color: rgb(0, 255, 255);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(0, 255, 255);
    color: white;
    font-size: 18px;
    animation: linear infinite bounce 0.5s;
}
div.buttons button:nth-child(16){
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(255, 255, 255) 2px double;
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 25px;
    
}
div.buttons button:nth-child(16):hover{
    scale: 1.1;
    background-color: rgb(255, 255, 255);
    z-index: 3;
    box-shadow: 0px 0px 10px rgb(255, 255, 255);
    color: black;
    animation: linear infinite bounce 0.5s;
}
@keyframes bounce{
    0%{ scale: 1;}
    50%{ scale: 1.1;}
    100%{scale: 1;}
}