/*.calculator{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80vh;
}

form{
	background-color: black;
	padding: 20px;
	border-radius: 20px;
	color: white;
}

input{
	width: 60px;
	height: 60px;
	font-size: 30px;
	background-color: black;
	color: white;
	margin: 10px;
	box-shadow: 2px 2px 5px ghostwhite, -2px 2px 5px ghostwhite;
	cursor: pointer;
}

.display input{
	width: 80%;
	text-align: right;
}



*/


* {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    body {
      background: linear-gradient(135deg, #dfe9f3 0%, #ffffff 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: "Segoe UI", sans-serif;

    }

    .calculator {
      background-color: #222;
      padding: 20px;
      border-radius: 20px;
      box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
      width: 320px;
      max-width: 90vw;
    }

    .display {
      width: 100%;
      height: 60px;
      background-color: #111;
      color: #0f0;
      font-size: 2em;
      text-align: right;
      padding: 10px;
      border: none;
      border-radius: 10px;
      margin-bottom: 15px;
    }

    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
    }

    button {
      height: 60px;
      font-size: 1.4em;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: 0.2s;
    }

    button:hover {
      opacity: 0.85;
    }

    .operator {
      background-color: #ff9500;
      color: #fff;
    }

    .number {
      background-color: #333;
      color: #fff;
    }

    .clear {
      background-color: #d32f2f;
      color: #fff;
    }

    .equal {
      background-color: #4caf50;
      color: #fff;
      grid-column: span 2;
    }

    .main{
    	background-color: black;
    	color: white;
    	text-align: center;
    	padding: 20px;
    	/*border-radius: 20px;*/
    	/*margin: 0px 20px;*/
    }

    .para{
    	background-color: lightgray;
    	text-align: center;
    	/*z-index: 99;*/
    	padding: 10px 0px;
    	/*color: white;*/
    }

    @media (max-width: 400px) {
      .calculator {
        width: 95%;
        padding: 15px;
        z-index: 99;
      }

      button {
        font-size: 1.2em;
        height: 55px;
      }
    }