:root {
	--star-size: 60px;
	--star-color: transparent;
	--star-background: rgba(0,0,0,0.6);
  }

html, body {
    height: 100%;
}

body {
    background-color: #eee;
	background-image: url('passphrase-background-grey.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
    display: flex;
    flex-direction: column;
	font-family: Roboto, sans-serif;
}

/* Mobile styles */
@media only screen and (max-width: 790px) {
	/* Center content */ body { text-align: center; }
	/* Break password onto lines */ #heading { word-break: break-all; min-height: 10vh; }
	/* Generator buttons one line */ button { padding: 5px !important; }
	/* app width */ #content > div { width: 85vw !important; margin: 20px auto !important; }
}

#content {
    margin: 20px auto;
    flex: 1 0 auto;
}

#content > div {
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
	padding: 20px 10px;
	margin: 20px;
	width: 70vw;
}

#heading {
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.0125em;
	margin: 0;
	padding-left: 20px;
}

#subheading {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.0178571429em;
	text-decoration: inherit;
	text-transform: inherit;
	opacity: 0.6;
	padding-left: 20px;
}

.stars {
	--percent: calc(var(--rating) / 5 * 100%);
	display: inline-block;
	font-family: Times;
	line-height: 1;
}
.stars::before {
	content: '★★★★★';
	background: linear-gradient(90deg, rgba(0,0,0,0.6) var(--percent), transparent var(--percent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

button {
	font-size: 0.875rem;
	font-weight: 500;
	padding: 10px 16px;
	color: #6200ee;
	text-decoration: none;
	margin: 0 4px;
	background: transparent;
	transition: background 0.1s linear;
	border: none;
    position: relative;
    overflow: hidden;
    outline: 0;
    border-radius: 0.25rem;
    cursor: pointer;
}

button:hover {
	background: #f3ebff;
	border-radius: 4px;
}

span.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.65s linear;
    background-color: rgba(98, 0, 236, 0.2);
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

#footer {
    flex-shrink: 0;
    height: fit-content;
    background:rgba(98, 0, 236, 0.2);
	text-align: center;
	padding: 10px;
}