style.css

:root {
	--shadow-dark:0 6px 10px rgba(40,40,40,0.2);
	--shadow-darker:0 6px 10px rgba(40,40,40,0.4);
	--font-family:"Helvetica Neue", "Lucida Grande", "Arial", "Verdana", "Tahoma", sans-serif;
}
html {
	font-family:var(--font-family);
}
body {
	background:rgb(255,255,255);
	color:rgb(75,75,75);
	margin:0;
	padding:0;
}
button, input {
	border:none;
	outline:none;
	transition:background 0.25s, color 0.25s;
}
a {
	text-decoration:none;
	color:rgb(0,150,255);
}
.noselect {
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	outline:none;
}
.hidden {
	display:none;
	visibility:hidden;
	position:absolute;
	z-index:-1;
}
::-webkit-scrollbar {
	display:block;
	width:4px;
	background:rgba(60,60,60,0);
}
::-webkit-scrollbar-thumb {
	border-radius:5px;
	background:rgb(150,150,150);
}
::-webkit-scrollbar-thumb:hover {
	background:rgb(100,100,100);
}
::-webkit-scrollbar-track {
	background:rgb(210,210,210);
}

.action-button {
	background:rgb(0,125,255);
	color:rgb(255,255,255);
	padding:10px;
	font-size:20px;
	font-weight:bold;
	border-radius:20px;
	margin:20px;
	box-shadow:var(--shadow-dark);
	transition:box-shadow 0.25s;
	cursor:pointer;
}
#desktop .action-button:hover {
	box-shadow:var(--shadow-darker);
}

.section {
	box-shadow:var(--shadow-dark);
	background:rgb(240,240,240);
	width:calc(100% - 40px - 20px);
	margin:0 auto 20px auto;
	border-radius:10px;
	padding:10px;
}
.section .action-button {
	margin:20px 0 10px 0;
}
.action-button-wrapper {
	text-align:right;
}
.hint {
	font-size:20px;
	color:rgb(100,100,100);
	display:block;
}
.input-wrapper .hint {
	font-size:16px;
	color:rgb(125,125,125);
}

.input-wrapper {
	display:block;
}
.label {
	display:block;
	font-size:20px;
	color:rgb(0,125,255);
	margin:10px 0 10px 0;
}
.input {
	background:rgb(75,75,75);
	display:block;
	padding:10px;
	outline:none;
	border-radius:10px;
	color:rgb(255,255,255);
	font-size:20px;
}