@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+SC:wght@600&display=swap');

body {
	background-color: transparent !important;
}
#flashstatus {
    margin-left: 10px;
}
.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.picture-container {
	position: relative;
	width: 1000px;
	padding: 25px;
	border: 1px solid #999999;
	border-radius: 2px;
	box-shadow: 0px 2px 10px 4px #999999;
	transform: rotate(1deg);
	background-color: white;
}

.picture {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	aspect-ratio: 16 / 9;
}

.info {
	margin-top: 2em;
	text-align: center;
	user-select: none;
	font-family: 'Encode Sans SC', sans-serif;
}

#flashstatus{
	color: #fff;
}
#copynow {
	color: rgba(0, 0, 0, 0.705);
}
#message{
	padding-right: 5px;
	color: rgba(0, 0, 0, 0.705);
	display: none;
}
.copy-contaner {
	text-align: right;
	user-select: none;
}
.off::after {
	content: " OFF";
	color: red;
	font-weight: bold;
}
.on::after {
	content: " ON";
	color: rgb(94, 255, 0);
	font-weight: bold;
}

#location {
	font-size: 1.3em;
}

.camera-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100vw;
	height: 100vh;
	display: grid;
	place-items: center;
	padding: 10vh;
	color: white;
	font-family: 'Plus Jakarta Sans', sans-serif;
}

.frame {
	position: relative;
	width: 100%;
	height: 100%;
}

.frame-horizontal,
.frame-vertical {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
}

.frame-vertical {
	flex-direction: column;
}

.left-border,
.right-border {
	display: flex;
	height: 100%;
	justify-content: space-between;
	width: 5px;
	flex-direction: column;
}

.top-border,
.bottom-border {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.top-border::before,
.top-border::after,
.bottom-border::before,
.bottom-border::after {
	content: '';
	display: block;
	width: 80px;
	height: 5px;
	background-color: white;
}

.left-border::before,
.left-border::after,
.right-border::before,
.right-border::after {
	content: '';
	display: block;
	width: 5px;
	height: 80px;
	background-color: white;
}

.status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1.5em;
}

.battery-life,
.recording-info {
	display: flex;
	align-items: center;
	letter-spacing: 1px;
}

.battery-life span {
	margin-left: 0.5em;
}

.recording-info span {
	margin-right: 0.5em;
}

.status-bar .icon {
	font-size: 1.2em;
}

.recording-info .icon {
	color: red;
}

.camera-info {
	display: flex;
	position: absolute;
	bottom: -8px;
	margin: auto;
	justify-content: space-between;
	width: 100%;
	padding-left: 100px;
	padding-right: 100px;
	letter-spacing: 1px;
	font-size: 0.8em;
}

.shutter-info span {
	margin-right: 1em;
}

.fa-magnifying-glass-plus {
	margin-right: 0.5em;
}

.hide {
	display: none;
}