@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&family=Roboto&display=swap');

:root {
  --firstCo: #FDF7E4;
  --secondCo: #FAEED1;
  --therdCo: #DED0B6;
  --forthCo: #BBAB8C;
  --fifthCo: #ffffff;
  --colorF: #000000;

}

.darkMode{
	--firstCo: #1B4242;
    --secondCo: #1B4242;
    --therdCo: #5C8374;
    --forthCo: #092635;
    --fifthCo: #9EC8B9;
    --colorF: #ffffff;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

.container{
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	background: var(--therdCo);
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: content-box;
}

:hover::-webkit-scrollbar {
	width: 0.7rem;
}

:hover::-webkit-scrollbar-thumb {
	background-color: #888;
}

.mainBox{
	height: 80vh;
	width: 70vw;
	gap: 1rem;
	scale: 0.5;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	align-content: flex-start;
	padding: 2rem 1rem;
	background: var(--firstCo);
	border-radius: 1rem;
	overflow: auto;
	resize: both;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.inputBox{
	width: 95%;
	height: 15%;
	position: relative;
/*	border: 1px solid black;*/
}

input{
	background: var(--fifthCo);
}

.tan{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: transparent;
}

.inputBox input{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1rem;
	padding: 1rem;
	font-size: 1.3rem;
	border: none;
	outline: none;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.showBox{
	width: 30%;
	height: 80%;
/*	border: 1px solid;*/
	border-radius: 1rem;
	padding: 1rem;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	overflow-y: auto;
	position: relative;
	background: var(--fifthCo);
}

.showBox::-webkit-scrollbar {
    width: 0.7rem;
}
.showBox::-webkit-scrollbar-thumb {
     display:none;
}
.showBox::-webkit-scrollbar-track {
    background: transparent;
}

.keys{
	width: 60%;
	height: 80%;
/*	border: 1px solid;*/
	border-radius: 1rem;
	padding: 1.2rem 1rem;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	background: var(--fifthCo);
}

.keys button{
	width: 21%;
	height: 13%;
	border-radius: 5px;
	border: none;
	outline: none;
	cursor: pointer;
	font-size: 1.2rem;
}

.icon i{
	font-size: 1.4rem;
	cursor: pointer;
}

#show{
/*	border: 1px solid ;*/
	padding: 5px 1rem;
	font-size: 1.4rem;
	overflow: auto;
}

#show::-webkit-scrollbar {
    width: 0.7rem;
}
#show::-webkit-scrollbar-thumb {
     display:none;
}
#show::-webkit-scrollbar-track {
    background: transparent;
}

.width95{
	width: 95% !important;
}

.height10{
	min-height: 20% !important;
	height: initial;
}

.scale1{
	scale: 1 !important;
}


.mainBox::-webkit-scrollbar {
	width: 10px;
}

.mainBox::-webkit-scrollbar-track {
	background: transparent;
}

.mainBox::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: content-box;
}

.mainBox:hover::-webkit-scrollbar {
	width: 0.7rem;
}

.mainBox:hover::-webkit-scrollbar-thumb {
	background-color: #888;
}

.hover:hover{
	background: var(--secondCo);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
/*	color: #fff;*/
}

.BBAB8C{
	background: var(--forthCo);
	color: var(--colorF);
}

.button{
	background: var(--therdCo);
}

.clear{
	min-width: 10%;
	min-height: 3%;
	cursor: pointer;
	border: none;
	outline: none;
	border-radius: 5px;
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	padding: 1rem;
	margin-top: 1rem;
}

.transition{
	transition-property: all;
    transition-duration: .3s;
    transition-timing-function: linear;
/*    transition-delay: 1s;*/
}

#lightDark{
	position: absolute;
	right: 1rem;
	top: 1rem;
	cursor: pointer;
	border-radius: 50%;
	outline: none;
	border: none;
	height: 2rem;
	width: 2rem;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	z-index: 2;
}

.white{
	color: var(--colorF);
}

@media only screen and (max-width: 800px) {
  .keys{
  	width: 95%;
  }
  .showBox{
  	width: 95%;
  	height: initial;
  	min-height: 20%;
  }
}

@media only screen and (max-width: 500px) {
  .mainBox{
  	width: 90vw;
  	height: 90vh;
  }

  .mainBox::-webkit-scrollbar {
	    width: 0.7rem;
  }
  .mainBox::-webkit-scrollbar-thumb {
	      display:none;
  }
  .mainBox::-webkit-scrollbar-track {
	     background: transparent;
  }
}