:root {
	--color1: #f9f9f9;
	--color2: #a0dcfa;
	--color3: #1a1a1a;
	--color4: #141414;
	--color5: #d7ebfa;
	--font-size-1: 15px;
	--font-size-2: 26px;
}

html { 
	color: var(--color3);
	font: var(--font-size-1) monospace, sans-serif;
	font-stretch: 10%;
	background: #fff;
	white-space: pre;
}

body {
	background: var(--color1); 
	position: relative;	
	border: 1px solid #000; 
	width: 290px; 
	height: 528px; 
	padding: 20px 15px; 
	display: flex;
	flex-flow: column wrap;
}

input, .login-btn, .transfer-btn {
	background: var(--color2);
	color: var(--color4);
	border: none;
	border-radius: 8px;
	outline: none;
	margin: 5px;
	padding: 10px 15px;
	width: 250px;
}

input::placeholder {
	color: var(--color4);
	opacity: 0.5;
}

input[type="radio"] {
	display: inline-block;
	width: auto;
	margin-right: 4px;
}
  
.login-btn {
	background: var(--color3);
	color: var(--color5);
	width: 280px;
}

#menu {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 320px;
    height: 55px;
    display: none;
}

.menu_btn {
	flex:1; 
	text-align:center; 
	line-height: 55px;
	background-color:var(--color2);
	color:var(--color4);
}

#a0, #a1, #history, #transfer { display: none; }

.box, .container {
	display: flex;
	flex-wrap: wrap;
}

.box {
	background: var(--color5);
	border-radius: 4px;
	width: 270px;
	padding: 10px;
}

.title { 
	width: 290px; 
	height: 30px; 
	font-size: var(--font-size-2);
	margin-bottom: 5px;
}

.IMG {
	background: var(--color2);
	color: var(--color4);
	width: 30px; 
	height: 30px; 
	padding: 5px;
	border-radius: 50%;
	font-size: var(--font-size-2);
	text-align: center;
	margin-right: 10px;
}

#a1, #history {
	overflow-y: scroll;
	width: 290px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

#a1 {
	height: 500px;
}

#history {
	height: 550px;
	margin-top: -20px;
}

#Account_info { 
	width: 220px; 
	height: 40px;
	padding-top: 5px; 
}

hr {
	width: 290px; 
	margin: 10px 0;
}