.container
{
display: flex;
justify-content: center;
align-items: center;

}

#exclamation
{
    color: rgb(141, 148, 203);
}
body
{
    background-color: #60696f;
}

h1
{
    color: #d2cfcf;
    font-size: xx-large;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.Calculator-Panel
{
    border-radius: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-content: space-around;
    align-items: stretch;
    border: 10px solid black;
    height: 900px;
    width: 600px;
    background-color: #508C9B;
    flex-grow: 0;
   
}

.Input-Panel
{
    display: flex;
    flex-direction: row;
    justify-content: center;
   
}

.Input-Panel > *
{
 
    margin-top: 6vh;
    border-radius: 3%;
    height: 180px;
    border: 5px solid rgb(2, 2, 2);
   width: 90%; 
   font-size: xx-large;


   background-color: #d2cfcf;
}

.Input-Panel-Button-Panel
{
display: flex;
flex-direction: column;

}
.Button-Panel
{
    display: grid;
    border: 5px solid black;
     grid-template-columns: repeat(6 , 1fr);
     grid-template-rows: repeat(5 , 120px);
    background-color: #1F316F;
    height: 400px;
    width: 90%;
    padding: 2%;
    margin-left: 2%;
    margin-right: 1%;
    border-radius: 10%;
    flex-grow: 0;
    align-self: start;

    /* grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr); */
}

.Button-Component , button
{
 cursor: pointer;
    border-radius: 20px;
   height: 100px;
   font-size: xx-large;
   margin: 2px;
   width: 70px;
   height: 90px;
   background-color: #5B99C2;
   margin-left: 0.5vw;
   margin-right: 0.5vw;
   margin-top: 2.5vh;
   border: 5px solid black;

}

.Button-Component , button:hover
{
    background-color: rgb(244, 244, 255);
}

#plus
{
    grid-column: 5;
    grid-row: 1;
}


#equal
{

    grid-column: 6;
    grid-row: 3;
}

#minus
{
    grid-column: 6;
    grid-row: 1;
}

#multiply
{
    grid-column: 6;
    grid-row: 2;
}

#divide
{
grid-column: 5;
grid-row: 2;
}

#three
{
grid-column: 3;
grid-row: 1;
}

#four
{

    grid-column: 4;
grid-row: 1;
}

#five
{
    grid-row: 2;
    grid-column: 1;
}

#six
{
    grid-row: 2;
    grid-column: 2;
}

#nine
{
    grid-row: 3;
    grid-column: 1;
}


#dot
{
    text-align: center;
    font-size: 50px;
}

@media (min-width: 100px) and (max-width: 1000px)  {
    
    .container
    {
    display: flex;
    justify-content: center;
    align-items: center;
    
    }

    h1
    {
        color: #d2cfcf;
        font-size: small;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    } 
.Calculator-Panel
{
    border-radius: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-content: space-around;
    align-items: stretch;
    border: 10px solid rgb(0, 0, 0);
    height: 650px;
    width: 450px;
    background-color: #508C9B;
   
}

.Input-Panel
{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#Input-Box
{
 
    margin-top: 6vh;
    border-radius: 3%;
    height: 150px;
    border: 5px solid rgb(2, 2, 2);
   width: 90%; 
   font-size: xx-large;


   background-color: #d2cfcf;
}

.Input-Panel-Button-Panel
{
display: flex;
flex-direction: column;

}
.Button-Panel
{
    display: grid;
    border: 5px solid black;
     grid-template-columns: repeat(6 , 1fr);
     grid-template-rows: repeat(5 , 1fr);
    background-color: #1F316F;
    height: 350px;
    margin-left: 1%;
    margin-right: 1%;
    border-radius: 10%;

    /* grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr); */
}

.Button-Component , button
{
 
    border-radius: 20px;
   height: 100px;
   font-size: xx-large;
   margin: 2px;
   width: 50px;
   height: 80px;
   background-color: #5B99C2;
   margin-left: 1vw;
   margin-right: 1vw;
   margin-top: 2.5vh;
   border: 5px solid black;
}

#plus
{
    grid-column: 5;
    grid-row: 1;
}


#equal
{

    grid-column: 6;
    grid-row: 3;
}

#minus
{
    grid-column: 6;
    grid-row: 1;
}

#multiply
{
    grid-column: 6;
    grid-row: 2;
}

#divide
{
grid-column: 5;
grid-row: 2;
}

#three
{
grid-column: 3;
grid-row: 1;
}

#four
{

    grid-column: 4;
grid-row: 1;
}

#five
{
    grid-row: 2;
    grid-column: 1;
}

#six
{
    grid-row: 2;
    grid-column: 2;
}

#nine
{
    grid-row: 3;
    grid-column: 1;
}


#dot
{
    text-align: center;
    font-size: 50px;
}

    
}

@media (min-width:100px) and (max-width:500px) {

    .container
{
display: flex;
justify-content: center;
align-items: center;

}

    .Button-Component , button
    {
     
        border-radius: 20px;
       height: 100px;
       font-size: xx-large;
       margin: 2px;
       width: 40px;
       height:10px;
       background-color: #5B99C2;
       margin-left: 1vw;
       margin-right: 1vw;
       margin-top: 2.5vh;
       border: 5px solid black;
    }
    
    
    .Calculator-Panel
    {
        border-radius: 10%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        justify-content: space-around;
        border: 10px solid black;
        height: 800px;
        width: 350px;
        background-color: #508C9B;
       
    }
    
    .Input-Panel
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    #Input-Box
    {
     
        margin-top: 6vh;
        border-radius: 3%;
        height: 200px;
        border: 5px solid rgb(2, 2, 2);
       width: 90%; 
       font-size: xx-large;
    
    
       background-color: #d2cfcf;
    }
    
    .Input-Panel-Button-Panel
    {
    display: flex;
    flex-direction: column;
    
    }
    .Button-Panel
    {
        display: grid;
        border: 5px solid black;
         grid-template-columns: repeat(6 , 1fr);
         grid-template-rows: repeat(5 , 1fr);
        background-color: #1F316F;
        height: 300px;
        margin-left: 1%;
        margin-right: 1%;
        border-radius: 10%;
    
        /* grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr); */
    }
    
}