/*
*
* SDEC ILE Flip
* By Roderick Young
* 2023
*
-------------------------------------------------- */

/* General 
-------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

audio {
	width: 100%;
	display: block;
	margin: 1rem auto 0.5rem;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: sans-serif; 
	background-image: url("/img/SahtuBG.jpeg");
	background-color: #cccccc;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;	
}

body > .container, body > .container-fluid {
	padding: 75px 10px 0;
}

canvas {
	display: block;
	margin-bottom: 0.5rem;
}

/* Classes
-------------------------------------------------- */
.audio-control {
	margin-left: -185px;
}

.scene {
	display: inline-block;
	width: 200px;
	height: 260px;
	/*   border: 1px solid #CCC; */
	margin: 40px 0;
	perspective: 600px;
}

.carousel-inner {
	width: 80vw;
}	

.carousel-control-prev, .carousel-control-next {
	height:65vh;
}

.card {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transform-style: preserve-3d;
	transform-origin: center;
	transition: transform 1s;
	background: hsla(204, 55%, 28%,0);
}

.card img {
	height: 300px;
	width: 300px;
}
.card-flip {
	height: 60vh;
}

.card.is-flipped {
	transform: rotateX(-180deg);
}

.card__face {
	position: absolute;
	width: 100%;
	height: 100%;
	/* line-height: 260px; */
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: 40px;
	backface-visibility: hidden;
}


.card__face--front {
	background: hsla(201, 50%, 24%, 1);
	color: white;
}

.card__face--back {
	background: hsla(92, 50%, 95%,0.9);
	color: black;
	transform: rotateX(180deg);
}

.card-img-top {
	width: 200px;
	height: 200px;
}

.card-delete{
	position: absolute;
	left:0;
	right:0;
	margin-top: -5vh;
	font-size: 1em;
	border: 1px solid red;
}
.card-edit {
	position: absolute;
	left:0;
	right:0;
	margin-top: -10vh;
	font-size: 1em;
	border: 1px solid blue;
}
.card-edit button {
	width: 49%;
}
.card-text {
	font-size: calc(18px + 2vw);
	white-space: nowrap;
	overflow: hidden;
	padding-top: 2rem;
}

.clip {
  padding-bottom: 1rem;
}

.clip p {
  display: inline-block;
  font-size: 1rem;
}

.clip button {
  font-size: 1rem;
  float: right;
}

.footer {
	margin-top: auto;
	/* Set the fixed height of the footer here */
	height: 10wh;
	line-height: 40px; /* Vertically center the text there */
	background-color: #000;
	color: white;
	font-size: calc(8px + 1vw);
}

.footer > .container {
	padding-right: 15px;
	padding-left: 15px;
}

.main-controls {
	padding: 0.5rem 0;
}

.navbar {
	padding-bottom:0;
	background-color: #3b5998;
	z-index:1;
}

.navbar-brand {
	margin-left: 5vw;
}

.play, .pause {
	position: absolute;
	left:0;
	right:0;
	margin-left: auto;
	margin-right: auto;
	width: 50px;
	color: white;
	margin-top: -120px;
	font-size: 2em;
}

.region, .category {
	max-width: 8wh;
}

/* IDs
-------------------------------------------------- */
#header {
	font-size: calc(12px + 2vw);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#main {
	overflow-x: hidden;
	overflow-y: auto;
	height:86vh;
}

/* Printing
-------------------------------------------------- */

@media print {
  body * {
    visibility:hidden;
  }
  #qrcode-body * {
    visibility:visible;
  }
}