/** Scrollbox content **/

/*
Light: #f5e0bf
Dark: #c4b399
*/

.menu {
	display: none;
	flex-direction: column;
	justify-content: center;
	width: 960px;
	height: 540px;
	position: relative
}

/* Open/close animations */

.scrollbox-top {
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	image-rendering: pixelated;
	-webkit-animation: scrollbox-open 0.2s linear;
	animation: scrollbox-open 0.2s linear
}

.scrollbox-bottom {
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
	image-rendering: pixelated;
	-webkit-transform: rotateZ(180deg);
	-ms-transform: rotateZ(180deg);
	transform: rotateZ(180deg);
	-webkit-animation: scrollbox-open 0.2s linear;
	animation: scrollbox-open 0.2s linear
}

@-webkit-keyframes scrollbox-open {
	from {height: 0}
	to {height: 50%}
}
@keyframes scrollbox-open {
	from {height: 0}
	to {height: 50%}
}

@-webkit-keyframes scrollbox-close {
	from {height: 50%}
	to {height: 0}
}
@keyframes scrollbox-close {
	from {height: 50%}
	to {height: 0}
}

/* Content */

.menu-title {
	display: block;
	height: 40px;
	line-height: 40px;
	font-size: 34px;
	z-index: 1
}

.menu-title .title {float: left}

.menu-title .btn {float: right}

.subtitle {
	width: 100%;
	height: 30px;
	line-height: 30px;
	top: 0;
	position: sticky;
	background-color: #f5e0bf;
	font-size: 22px;
	z-index: 2
}

.content {
	visibility: hidden;
	width: 90%;
	height: 80%;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute
}

.content .scrollable {
	width: 100%;
	height: calc(100% - 80px);
	overflow-y: auto;
	background-color: #f5e0bf
}

.content .actions {
	height: 30px;
	margin-top: 10px
}

/* Media queries */

@media screen and (max-width: 1200px) and (max-aspect-ratio: 1.78) {
	.menu {
		width: 80vw;
		height: calc(80vw / 1.78)
	}
}

@media screen and (max-height: 675px) and (min-aspect-ratio: 1.78) {
	.menu {
		width: calc(80vh * 1.78);
		height: 80vh
	}
}